# Common Changes (Cookbook)

## Common Changes

**Skill level:** Beginner unless marked

Short recipes for the changes people ask about most. Each one names the file, the change, and what to check, and links to the page with the details. Make every content change in each language folder (`english`, `french`, `arabic`), and keep `npm run dev` running to see it.

### Change Your Name, Tagline, And Wordmark
**File:** `src/config/config.toml`, `[site]`

```toml
[site]
  title    = "Margo"   # your name or studio name
  tagline  = "Creative Portfolio Astro & Tailwind CSS Theme"
  logoText = "Margo"   # the text wordmark in the header
```

French and Arabic have their own tagline in `site.tagline` of `src/i18n/fr.json` and `ar.json`. **Check:** the header and the browser tab title. See [Site Identity & Logo](/margo/customization/site-identity-logo/) and [SEO & AI Visibility](/margo/customization/seo-ai-visibility/).

### Change Your Email And Booking Link
**File:** `src/config/config.toml`, `[settings.contactInfo]`

```toml
[settings.contactInfo]
  email   = "[hello@example.com](mailto:hello@example.com)"
  booking = "/contact/" # where every "Book a call" button goes: your scheduling URL, or a page of your site
```

The rows beside the contact form (email, phone, location, socials) are in `src/content/sections/<language>/contact-section.md`. **Check:** `/contact/` and every "Book a call" button. See [Contact & Booking](/margo/customization/contact-booking/).

### Change The Header Button
**File:** `src/config/config.toml`, `[settings.navigationButton]`

```toml
[settings.navigationButton]
  enable = true
  label  = ""          # empty uses nav.letsTalk ("Let's talk") from src/i18n/<language>.json
  url    = "/contact/"
```

To change the words in every language, edit `nav.letsTalk` in each file in `src/i18n/`. See [Header](/margo/customization/header/).

### Switch The Header Or Footer Layout
**File:** `src/config/config.toml`, `[settings.layout]`, or a page's frontmatter

```toml
[settings.layout]
  header = "bar"   # pill | bar | overlay
  footer = "email" # wordmark | columns | email
```

For one page only, add `headerLayout: "pill"` or `footerLayout: "columns"` to its frontmatter. See [Header](/margo/customization/header/) and [Footer](/margo/customization/footer/).

### Change Or Preview A Section Layout
Set `options.layout` in the section file or in a page block, for example `layout: "spotlight"` for the testimonials. The allowed values are in the comment next to `layout:`, and `/elements/` shows each one. See [Section Layouts](/margo/customization/section-layouts/).

### Hide A Section
- **Everywhere:** `enable: false` at the top of `src/content/sections/<language>/<section>.md`.
- **On one page:** add its block to the page's content file with `enable: false`, for example `logosSection:` then `enable: false` under it. Block names are the keys of `sectionsSchema` in `src/sections.schema.ts`. See [Sections](/margo/customization/sections/).

### Reorder The Homepage *(light code)*
Open the route, for example `src/pages/[...lang]/index.astro`, and move the section lines inside `<Base>`. Top to bottom in the file is top to bottom on the page. Keep each `<LayoutVariants ... />` line whole when you move it. See [Homepages](/margo/customization/homepages/).

### Change The Homepage Hero Text
**File:** `src/content/sections/<language>/hero-section.md`, or the `heroSection` block of the homepage's file in `src/content/homepage/<language>/`

The solo designer homepage (`-index.md`) takes its hero text from `hero-section.md` and sets only the layout and the cards in its own block. The studio and photographer homepages (`home-studio.md`, `home-photo.md`) set more of their own text in their `heroSection` blocks. Edit the field where it is set. **Check:** the title at phone width: a long title wraps onto more lines.

### Add A Project
**Folder:** `src/content/projects/<language>/`

1. Copy a project file, for example `ceramic-forms.md` to `my-project.md` (the file name becomes `/projects/my-project/`).
2. Put its images in `src/assets/images/projects/my-project/`, and change `title`, `description`, `image`, `imageAlt`, `client`, `year`, `categories`, and the `images` list.
3. Create the file in each other language folder, with the same name.

**Check:** `/projects/` and the new page. See [Projects](/margo/customization/projects/).

### Change Colours Or Fonts
Colours are tokens in `src/styles/theme.css`, fonts are in `src/config/fonts.json`. See [Colors & Fonts](/margo/customization/colors-fonts/).

### Start In Dark Mode
**File:** `src/config/config.toml`, `[settings]`

```toml
colorMode = "light" # light | dark | system
```

`system` follows the visitor's device until they pick a mode with the theme button. Their choice is saved and wins on later visits.

### Change The Copyright Line
The text is `footer.copyright` in each `src/i18n/<language>.json` (`© {year} {brand}. All rights reserved.`). `{year}` becomes the build year and `{brand}` your `[site] title`. See [Footer](/margo/customization/footer/).

### Change Wording That Isn't In Any Content File
Labels such as "Let's talk", "Copy email", "View project", form messages, and search texts live in `src/i18n/<language>.json`. Search those files for the words you see, and change the same key in each language.

### Change The Number Of Items Per Page
`blogPagination` in `[settings]` of `config.toml` sets the journal posts per page (6). `pagination` sets the other paginated lists (8).

### Hide A Page Without Deleting It
Add `draft: true` to its frontmatter. It stays visible in `npm run dev` so you can keep working on it, and is left out of the built site, the sitemap, and `llms.txt`. This also works for the studio and photographer homepages (`src/content/homepage/<language>/home-studio.md`, `home-photo.md`). Remove the page's links from the menus in each `src/config/menu.<language>.json` too.

### Button Options
Every button in the content files uses `sharedButton` from `src/sections.schema.ts`:

```yaml
button:
  enable: true             # false hides it without deleting it
  label: "Start a project" # required
  url: "/contact/"         # a page, a full https:// address, #section-id, or mailto:
  variant: "fill"          # fill | fill-white | outline | text | circle
  hoverEffect: "magnetic"  # text-flip | creative-fill | magnetic | magnetic-text-flip
  target: ""               # "_blank" opens a new tab
  rel: ""
  class: ""                # extra CSS classes
  icon:
    enable: true
    name: "ArrowUpRight"   # any Lucide icon name
    position: "right"      # left | right
```

Some buttons, such as the first hero button, can also show a portrait with `avatar` (`image`, and `you` for the word shown on hover).

### Replace The Theme Name
1. In `config.toml`: `title` and `logoText` in `[site]`, and `author` in `[seo]`.
2. Search the whole project (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>) for `Margo`, and change what is visible text. `[settings.themeCredit]` is the theme credit, editable in `config.toml`.
3. Replace the favicon and social image: see [Site Identity & Logo](/margo/customization/site-identity-logo/).

<Aside type="tip">
  Can't find where a text comes from? Ask your AI assistant: "Which file sets
  the text '[TEXT]' on the page [URL]?" The [Prompt Library](/margo/ai-customization/prompt-library/)
  has more ready-made prompts.
</Aside>

### Do It With AI
```text
Make these changes to my Margo site, in every language: [LIST, e.g. name "Ana Duarte", email
ana@example.com, booking link https://cal.com/ana, header layout pill]. Use the files named in the
Common Changes docs ([site] and [settings.contactInfo] in src/config/config.toml, the files in
src/i18n/ for interface labels). Then run npm run astro-check.
```