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]

[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 and SEO & AI Visibility.

Change Your Email And Booking Link

File: src/config/config.toml, [settings.contactInfo]

[settings.contactInfo]
  email   = "[[email protected]](mailto:[email protected])"
  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.

Change The Header Button

File: src/config/config.toml, [settings.navigationButton]

[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.

Switch The Header Or Footer Layout

File: src/config/config.toml, [settings.layout], or a page’s frontmatter

[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 and 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.

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.

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.

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>/

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

Check: /projects/ and the new page. See Projects.

Change Colours Or Fonts

Colours are tokens in src/styles/theme.css, fonts are in src/config/fonts.json. See Colors & Fonts.

Start In Dark Mode

File: src/config/config.toml, [settings]

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

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:

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

In config.toml: title and logoText in [site], and author in [seo].
Search the whole project (Ctrl + Shift + F) for Margo, and change what is visible text. [settings.themeCredit] is the theme credit, editable in config.toml.
Replace the favicon and social image: see Site Identity & Logo.

Do It With AI

Make these changes to my Margo site, in every language: [LIST, e.g. name "Ana Duarte", email
[email protected], 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.