# Muddy Roots Worldwide Portal: Squarespace 7.1 Rebuild Guide
**Source of truth:** `portal/index.html` in this project.
**Live reference:** muddymockup2.mybuildstudio.com
**Target:** this page becomes the site **Homepage** (slug `/`).
**Audience:** a first time Squarespace user clicking every step herself.
Every link and every line of copy below was copied character for character from `portal/index.html`. Do not invent, change, shorten, or "fix" any URL or any line of copy.
---
## 1. Link Inventory
Built first, by reading every `href` in `portal/index.html`. Copy each URL exactly.
| Label or location | Exact URL (verbatim) | Section |
|---|---|---|
| Header logo (wordmark) | `#top` | Global header (do not rebuild, see Guardrails) |
| Header nav: Merch | `https://muddyroots.myshopify.com/` | Global header |
| Header nav: Tickets | `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh` | Global header |
| Header nav: Patreon | `https://patreon.com/muddyroots` | Global header |
| Header nav: Newsletter | `https://www.muddyroots.com/contact` | Global header |
| Header nav: Roots | `#about` | Global header (jumps to About section) |
| Card 1: United States, Muddy Roots Music Festival | `https://www.muddyroots.com/muddyroots` | Festival card grid |
| Card 2: United Kingdom, Rustic Stomp UK | `https://www.muddyroots.com/muddyrootsuk` | Festival card grid |
| Card 3: Belgium, Rattle The Barn | `https://www.muddyroots.com/muddyrootsbelgium` | Festival card grid |
| Card 4: Brazil, Muddy Roots Brasil | `https://www.muddyroots.com/muddyrootsbrasil` | Festival card grid |
| Card 5: Argentina, Muddy Roots Buenos Aires | `https://www.muddyroots.com/muddy-roots-buenos-aires` | Festival card grid |
| Record Label button: Shop Vinyl | `https://muddyroots.myshopify.com/` | Record Label feature |
| Record Label button: Stream | `https://muddyrootsmusic.bandcamp.com` | Record Label feature |
| About button: Check Out Our Roots | `https://www.muddyroots.com/` | About Us |
| Footer: Facebook | `https://www.facebook.com/muddyrootsmusicfest/` | Global footer |
| Footer: Instagram | `https://www.instagram.com/muddyrootsmusic` | Global footer |
| Footer: YouTube | `http://www.youtube.com/@MuddyRootsMusic` | Global footer |
| Footer: TikTok | `https://www.tiktok.com/@muddyrootsmusicfestival` | Global footer |
| Footer: Privacy Policy | `https://www.muddyroots.com/privacy-policy` | Global footer |
No link is missing from the file. The Tickets URL is kept exactly as written, even though it looks malformed.
---
## 2. Guardrails (read before you touch anything)
These are non-negotiable.
1. Only touch two pages in this whole project: this **Homepage** and the **Tennessee page** (existing slug `/muddyroots`, covered in its own guide). Touch nothing else.
2. Never delete a page. Never change any existing slug. Never remove an unrebuilt page (UK, Belgium, Brasil, Argentina, Record Label, vendor, volunteer, submission, contact) from navigation.
3. Never change global **Site Styles**, never change site-wide **Design > Custom CSS**, never change site-wide **Settings > Code Injection**. Those are site wide and would restyle the pages you are not rebuilding.
4. All styling for this page is page scoped, pasted into this page's own **Page Header Code Injection** (Part 8).
5. The header and footer we built are added as **page-scoped injected code** (see Part 8 and the Global Header and Footer file). They load only on this rebuilt page, never site-wide, so the pages you are not rebuilding keep their existing header and footer. On this page you also hide Squarespace's own native header and footer so ours shows. Never paste this into the site-wide Code Injection.
6. Confirm the plan is **Core or higher** first (Part 0). On Basic, injected CSS and code silently do not run.
7. Safe Mode escape: if anything looks broken after injecting code, add `/safe` to the end of the `/config` URL in your browser (for example `yoursite.com/config/safe`) to load the editor with all injected code disabled, then fix or remove the code.
---
## 3. Step 0: Confirm the plan is Core or higher
1. Click **Settings** in the left dashboard menu.
2. Click **Billing & Account**.
3. Click **Billing**.
4. Read the plan name. If it says **Business**, **Commerce**, or **Core**, you are fine, continue.
5. If it says **Personal** or **Basic**, stop. Custom CSS and code will silently not run. Tell the site owner the rebuild needs at least the **Core** plan, and wait for the upgrade before continuing.
---
## 4. Step 1: Rehearse on a duplicate site first
Do the entire guide on a copy before you touch the real site.
1. Go to your Squarespace **Dashboard** (the screen that lists your sites).
2. Find the Muddy Roots site in the list. Click the **three dots** to the right of it.
3. Click **Duplicate Website**. (If you do not see it there, open the site, go to **Settings > Site Availability**, and click **Duplicate Site**.)
4. Give the copy a clear name like `muddy-roots-rehearsal`.
5. Open the duplicate and do this whole guide on it first.
Know this about the duplicate: commerce data and third party integrations do **not** copy over, and you **cannot** copy a page from the duplicate back into the live site. The duplicate is a rehearsal only. When you are confident, repeat the steps on the real site.
---
## 5. Section by section build (top to bottom)
You are building the page **body** as native Squarespace **Sections** and **Blocks**. The sticky header and footer are global and are not rebuilt here (see Guardrails point 5).
### 5.0 Open the homepage in the editor
1. In the left menu click **Pages**.
2. Under **Main Navigation**, click your existing **Home** page (or the page set as homepage). If you are building fresh on the rehearsal copy, click the **+** at the top of the Pages panel, choose **Blank Page**, name it `Worldwide`, and open it.
3. Click **Edit** at the top left of the page preview.
4. You will add three sections in order: the festival card grid, the Record Label feature, and About Us.
### 5.1 Section A: Festival card grid (5 destination cards)
This is a grid of five large clickable cards.
1. Hover the top of the page and click **Add Section**.
2. In the section picker choose a blank layout (the empty one at the top). This is Section A.
3. Click the **paintbrush / Edit Section** icon for this section. Set **Background** color to black. Set the section **Color Theme** to a dark theme (for example "Black" or "Dark"). Close the panel.
4. Click **Add Block** inside the section, choose **Image**. This is Card 1.
5. Click **Add image** and upload `assets/card-tn.jpg` (from this project's `portal/assets/` folder).
6. With the image block selected, open its **Design** tab and choose the **Poster** layout (text sits over the image).
7. In the image block fields, set the **Title** to:
`Muddy Roots Music Festival`
8. Set the **Description / subtitle** to two lines:
`United States`
`Junebug Boogie Ranch, Cookeville, Tennessee. Sep 4-6, 2026.`
9. Turn on the image block **Button**. Set the button label to:
`Tickets`
10. Set the button **link** to exactly:
`https://www.muddyroots.com/muddyroots`
and set it to **Open in New Window**.
11. Still in the image block settings, set the whole image **Clickable Link** to the same URL `https://www.muddyroots.com/muddyroots`, Open in New Window. Now the whole card is clickable.
12. Repeat steps 4 through 11 for the remaining four cards, each its own Image block, dragged to sit beside the previous one so they form a grid (drag a block to the right edge of another to make a column). Use this data, copied verbatim:
**Card 2**
- Image: `assets/card-uk.jpg`
- Title: `Rustic Stomp UK`
- Description line 1: `United Kingdom`
- Description line 2: `Knoll Farm, Wareham, Dorset. Jul 17-19, 2026.`
- Button label: `Tickets`
- Button link and Clickable link: `https://www.muddyroots.com/muddyrootsuk`
**Card 3**
- Image: `assets/card-be.jpg`
- Title: `Rattle The Barn`
- Description line 1: `Belgium`
- Description line 2: `De Laerehoeve, Knesselare, East Flanders. Aug 1-2, 2026.`
- Button label: `Tickets`
- Button link and Clickable link: `https://www.muddyroots.com/muddyrootsbelgium`
**Card 4**
- Image: `assets/card-br.jpg`
- Title: `Muddy Roots Brasil`
- Description line 1: `Brazil`
- Description line 2: `Gaz Burning, São Paulo, SP. May 1-2, 2026.`
- Button label: `Explore`
- Button link and Clickable link: `https://www.muddyroots.com/muddyrootsbrasil`
**Card 5**
- Image: `assets/card-ar.jpg`
- Title: `Muddy Roots Buenos Aires`
- Description line 1: `Argentina`
- Description line 2: `CAFF, Buenos Aires, BA. Nov 21-22, 2026.`
- Button label: `Tickets`
- Button link and Clickable link: `https://www.muddyroots.com/muddy-roots-buenos-aires`
13. Note on Card 4 (Brazil): its button label is `Explore`, not `Tickets`, because that event date has already passed. Keep it as `Explore`.
14. Arrange the five image blocks into a balanced grid (for example three across on the top row and two on the next). Center the rows. The brand CSS in Part 8 squares off the corners and applies the fonts.
### 5.2 Section B: Record Label feature
1. Below Section A click **Add Section**, choose a blank layout. This is Section B.
2. Open **Edit Section**, set **Background** to black and the **Color Theme** to dark. Close the panel.
3. Click **Add Block**, choose **Text**. Paste this small label on its own line:
`Record Label`
Make it small, uppercase, and the accent color later handles the red. For now it is a short eyebrow line.
4. Add another **Text** block below it. Paste the heading:
`Muddy Roots Records`
Format it as **Heading 2**.
5. Add another **Text** block below. Paste the subtitle line:
`Muddy Roots Music Recordings`
6. Add another **Text** block below. Paste this paragraph verbatim:
`Jason Galaz built Muddy Roots Records right alongside the festival, to cut the real deal onto wax. No gloss, no filler. The pure, uncut stuff the radio forgot and the labels kicked to the curb. The forgotten classics, the workers, the builders, the poets and the myth makers. The sound the whole thing is built on.`
7. Add a **Button** block. Label it:
`Shop Vinyl`
Link it to exactly `https://muddyroots.myshopify.com/`, Open in New Window. Set its style to a solid (Primary) button.
8. Add a second **Button** block beside the first. Label it:
`Stream`
Link it to exactly `https://muddyrootsmusic.bandcamp.com`, Open in New Window. Set its style to an outline (Secondary / Tertiary) button.
9. Optional visual: the source page shows a spinning vinyl graphic with the letters `MR`. There is no image file for it. Mark this as a **TODO placeholder**: either leave a simple circle Image as a stand in, or add a real vinyl photo later. Do not invent copy for it.
### 5.3 Section C: About Us
1. Below Section B click **Add Section**, choose a blank layout. This is Section C.
2. **Important:** open **Edit Section**, and in the section settings set the section **Anchor / ID** (sometimes labeled "Section ID" under the section's settings) so that the header "Roots" link target works. The source uses the id `about`. If your Squarespace version does not expose a section ID field, leave this and tell the owner the "Roots" nav jump may need a small follow up. Do not change the global nav to fix it.
3. Set **Background** to black and **Color Theme** to dark.
4. Add a **Text** block, paste the eyebrow line:
`About Us`
5. Add a **Text** block, paste the heading and format as **Heading 2**:
`Underground Since 2010`
6. Add a **Text** block, paste this paragraph verbatim:
`Muddy Roots kicked off in 2010 because the festival circuit got too clean and too corporate. So we built the opposite. One family, five festivals around the world, a record label, and a whole lot of mud.`
7. Add a **Text** block, paste this paragraph verbatim:
`The sound never picked a lane. Punk, doom, outlaw country, rockabilly, blues, and back-porch folk all share the same stages, because it all comes from the same place. Real people, played loud, no apologies.`
8. Add a **Text** block, paste this paragraph verbatim:
`A crowd that has your back, and a home for every misfit stuck in-between scenes.`
9. Add a **Button** block. Label it:
`Check Out Our Roots`
Link it to exactly `https://www.muddyroots.com/`, Open in New Window.
### 5.4 Header and footer (our branded version, added in Part 8)
You do not build the header or footer as native blocks. Our sticky wordmark header and our footer (the `D.I.Y. til we die.` tag, the four social icons, the copyright, and the Privacy Policy link) are added by the injected code in Part 8. That code also hides Squarespace's native header and footer on this page so you do not get doubles. Every header and footer link comes verbatim from the file.
---
## 6. Background video
This page has **no background video**. The Tennessee card uses a static image (`assets/card-tn.jpg`). Skip this part. The native background video flow is only used in the Tennessee guide.
---
## 7. Countdown widget
The portal file contains **no countdown widget**. This section is intentionally skipped. Do not add a countdown to this page. (The countdown ticker lives on the Tennessee page and is covered in that guide.)
---
## 8. Page scoped code (brand CSS, plus our header and footer)
This applies Anton and Epilogue, the accent red, square corners, and the button styling to **this page only**. It is pasted into this page's own **Page Header Code Injection**, which loads only on this page. We also scope every rule under this page's unique id so it cannot leak.
### 8.1 Find this page's unique id
1. Install the free Chrome extension **Squarespace ID Finder**.
2. Open this page in a normal browser tab (not the editor).
3. Click the **Squarespace ID Finder** extension icon, then click anywhere on the page background.
4. It shows the page's **collection id**, which looks like `collection-1234abcd5678ef90`. Copy it.
5. Alternative without the extension: right click the page, choose **Inspect**, find the `<body>` tag, and read its `id` (it starts with `collection-`). Copy that.
### 8.2 Open the per page code panel
1. In the left menu click **Pages**.
2. Hover this homepage, click the **gear / Settings** icon next to it.
3. Click **Advanced**.
4. Click into the **Page Header Code Injection** box.
### 8.3 Paste this, then replace the id
Paste the block below, then replace **every** `YOURPAGEID` with the id you copied (keep the `#collection-` style, so for example `#collection-1234abcd5678ef90`). Keep the whole thing under 32,000 characters (this is far under).
```html
<style>
/* @import must stay on the very first line of this style block */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600&display=swap');
/* Replace YOURPAGEID below with this page's collection id. Example: #collection-1234abcd5678ef90 */
#YOURPAGEID { background-color: #000000; }
/* Display font on all headings */
#YOURPAGEID h1,
#YOURPAGEID h2,
#YOURPAGEID h3,
#YOURPAGEID h4,
#YOURPAGEID .sqsrte-large {
font-family: 'Anton', Impact, sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 400;
color: #FFFFFF;
}
/* Body font on text */
#YOURPAGEID,
#YOURPAGEID p,
#YOURPAGEID li,
#YOURPAGEID .sqsrte-small {
font-family: 'Epilogue', system-ui, sans-serif;
color: rgba(255,255,255,0.82);
}
/* Accent red for the small eyebrow label lines and links */
#YOURPAGEID a { color: #FD3008; }
/* 0px corners on every image and media frame */
#YOURPAGEID img,
#YOURPAGEID .sqs-block-image-figure,
#YOURPAGEID .sqs-image-shape-container-element {
border-radius: 0 !important;
}
/* Buttons: solid accent, square-ish corners, deep red on hover */
#YOURPAGEID .sqs-block-button-element {
background-color: #FD3008 !important;
color: #FFFFFF !important;
border-radius: 6px !important;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: 'Epilogue', sans-serif !important;
font-weight: 600;
}
#YOURPAGEID .sqs-block-button-element:hover {
background-color: #C70E20 !important;
}
</style>
```
5. Click **Save**.
6. Open the live page in a new tab and confirm the fonts, the black background, the red accents, and the square corners show up. If nothing changed, recheck the plan (Part 0) and that you replaced `YOURPAGEID` correctly.
### 8.4 Paste our header and footer into the same box
The brand CSS and our header and footer all live in this one Page Header Code Injection box.
1. Open the Global Header and Footer file (`SQUARESPACE-GLOBAL-HEADER.md`, or the header guide page online). Copy the whole first code block.
2. Paste it into the same Page Header Code Injection box, below the brand CSS you already pasted.
3. Set the two values near the top of the script: `WORDMARK_IMAGE_URL` to your uploaded wordmark image URL, and `ROOTS_LINK` to `#about` on this Worldwide page.
4. From the same file, copy the small hide block (the one that hides `#header`, `.header`, `#footer-sections`, and so on) and paste it below, so Squarespace's native header and footer do not show as doubles on this page.
5. Click **Save**. Open the live page and confirm our sticky wordmark header is at the top and our footer is at the bottom, with no doubled Squarespace header or footer. If a Squarespace header or footer still shows, tell me your template and I will give the exact hide selector.
6. Keep the whole box under 32,000 characters. The brand CSS plus the header and footer are well under.
---
## 9. Publish: set this page as the Homepage
Preview first. Pause for explicit confirmation from the owner before you publish or set the homepage.
1. Click **Done**, then **Exit** the editor. Use the device preview (the monitor, tablet, phone icons) to check desktop, tablet, and phone.
2. Get explicit confirmation from the owner to proceed.
3. In the left menu click **Pages**.
4. Find this page in the list. Click its **gear / Settings** icon.
5. Click the **three dots** at the top of the Pages panel near "Main Navigation", or in older versions hover the page and look for **Set as Homepage**. Choose **Set as Homepage**.
6. The homepage keeps the slug `/`. Do **not** create a new slug for it.
7. Confirm the live homepage loads at the site root.
---
## 10. Verification checklist (this page)
- [ ] Plan is Core or higher.
- [ ] You worked on the duplicate first.
- [ ] Five festival cards present, in order: United States, United Kingdom, Belgium, Brazil, Argentina.
- [ ] Each card links to its exact URL from the inventory, opening in a new window.
- [ ] Card 4 (Brazil) button says `Explore`. The other four say `Tickets`.
- [ ] Record Label section: heading `Muddy Roots Records`, the paragraph verbatim, `Shop Vinyl` to the myshopify URL, `Stream` to the bandcamp URL.
- [ ] About Us section: heading `Underground Since 2010`, three paragraphs verbatim, `Check Out Our Roots` to `https://www.muddyroots.com/`.
- [ ] No global Site Styles, site-wide Custom CSS, or site-wide Code Injection were changed.
- [ ] Our branded header shows at the top and our footer at the bottom (via the injected code), with Squarespace's native header and footer hidden on this page only. Nothing was added to site-wide settings.
- [ ] Brand CSS pasted only in this page's Page Header Code Injection, scoped under the page id, under 32,000 characters.
- [ ] No other page, slug, or nav item was touched.
- [ ] Page set as Homepage, slug stays `/`.
- [ ] Checked on desktop, tablet, and phone.
- [ ] Zero em dashes anywhere you typed.