# Muddy Roots Tennessee Festival: Squarespace 7.1 Rebuild Guide
**Source of truth:** `site/index.html` in this project.
**Live reference:** muddymockup.mybuildstudio.com
**Target:** the existing page at slug **`/muddyroots`**. Preserve that slug. Do not create a new one.
**Audience:** a first time Squarespace user clicking every step herself.
Every link and every line of copy below was copied character for character from `site/index.html`. Do not invent, change, shorten, or "fix" any URL or any line of copy. The tickets URL is kept exactly as written, even though it looks malformed.
---
## 1. Link Inventory
Built first, by reading every `href` in `site/index.html`.
| 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 | `https://muddymockup2.mybuildstudio.com/` | Global header (points to the Worldwide home) |
| Sub-nav: Lineup | `#lineup` | Festival sub-nav (jumps to Lineup section) |
| Sub-nav: The Poster | `#feature-bill` | Festival sub-nav (jumps to The Poster section) |
| Sub-nav: Camping & Grounds | `#experience` | Festival sub-nav (jumps to Camping section) |
| Sub-nav: Location & Map | `#location` | Festival sub-nav (jumps to Location section) |
| Sub-nav: FAQ | `#faq` | Festival sub-nav (jumps to FAQ section) |
| Sub-nav: Other Shows | `#shows` | Festival sub-nav (jumps to Other Shows section) |
| Sub-nav: Tickets | `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh` | Festival sub-nav |
| Contact: Text the Muddy Hotline | `sms:+16154376182` | Contact links |
| Contact: Street Team | `https://www.muddyroots.com/muddyrootstreetteam` | Contact links |
| Contact: Volunteer | `https://www.muddyroots.com/muddyrootsvolunteer` | Contact links |
| Contact: Vendor Booth | `https://www.muddyroots.com/muddyrootsvendors` | Contact links |
| Contact: Food Vendor | `https://www.muddyroots.com/muddyrootsfoodvendor` | Contact links |
| Contact: Join Our Staff | `https://www.muddyroots.com/muddyrootsstaff` | Contact links |
| Contact: Band Submissions | `https://www.muddyroots.com/muddyrootsbandsubmissions` | Contact links |
| Contact: Muddy Photographer | `https://www.muddyroots.com/muddyrootsphotographer` | Contact links |
| Hero button: Get Your Tickets Now! | `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh` | Hero |
| Lineup button: Get Weekend Passes | `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh` | Lineup |
| Sponsor link: Heart in Hand (logo) | `https://www.heartinhandcrittersrescue.com` | Location, Sponsors |
| Sponsor link: Find a Home (logo) | `https://www.findahomeintn.com` | Location, Sponsors |
| Sponsor outreach email | `mailto:milt@muddyroots.com` | Location, Sponsors |
| FAQ 01 button: Get Tickets | `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh` | FAQ |
| FAQ 07 email link | `mailto:milt@muddyroots.com` | FAQ |
| Other Shows card: Sex Mex | `https://www.muddyroots.com/` | Other Shows in TN |
| Other Shows card: Profanatica | `https://hopspringstn.com` | Other Shows in TN |
| Other Shows card: CKY | `https://hopspringstn.com` | Other Shows in TN |
| Other Shows button: All Tour Dates | `https://www.muddyroots.com/` | Other Shows in TN |
| 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.
---
## 2. Guardrails (read before you touch anything)
1. Only touch two pages in this project: the **Homepage** (its own guide) and this **Tennessee page** at slug **`/muddyroots`**. Touch nothing else.
2. Never delete a page. Never change any existing slug, especially `/muddyroots`. Never remove an unrebuilt page from navigation.
3. Never change global **Site Styles**, site-wide **Design > Custom CSS**, or site-wide **Settings > Code Injection**. They are site wide and would restyle 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, add `/safe` to the end of the `/config` URL (for example `yoursite.com/config/safe`) to load the editor with 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**, then **Billing**.
3. Read the plan name. **Business**, **Commerce**, or **Core** is fine, continue.
4. If it says **Personal** or **Basic**, stop. The countdown Code Block and the brand CSS silently will not run. Ask the owner to upgrade to at least **Core** before continuing.
---
## 4. Step 1: Rehearse on a duplicate site first
1. Open your Squarespace **Dashboard** (the list of your sites).
2. Click the **three dots** by the Muddy Roots site, then **Duplicate Website**. (Or open the site, **Settings > Site Availability > Duplicate Site**.)
3. Name the copy `muddy-roots-rehearsal`.
4. Do this entire guide on the copy first.
Remember: commerce data and integrations do not copy, and you cannot copy a page from the duplicate back into the live site. The duplicate is a rehearsal only. When confident, repeat on the real site.
---
## 5. Section by section build (top to bottom)
You build the page **body** as native **Sections** and **Blocks**, plus one **Code Block** for the countdown. The global header and footer are not rebuilt (Guardrails point 5).
### 5.0 Open the Tennessee page in the editor
1. In the left menu click **Pages**.
2. Find the page with slug `/muddyroots`. Click it, then click **Edit**.
3. You will rebuild this page's content sections in order, top to bottom. Build new sections below first and remove old content only after the new content is confirmed, so you never leave the live page empty mid build.
### 5.1 Hero section (background video plus text)
The video setup itself is in Part 6. This step builds the text on top.
1. At the top of the page click **Add Section**, choose a blank layout. This is the Hero.
2. Open **Edit Section**, set the **Color Theme** to dark. The background video is added in Part 6. For now leave the background black.
3. Add a **Text** block. Paste, format as **Heading 1**:
`Muddy Roots Music Festival`
4. Add a **Text** block below it. Paste this line verbatim:
`September 4/5/6 | 115 Waterloo Rd, Cookeville, TN`
5. Add a **Text** block below it. Paste this paragraph verbatim:
`The biggest little D.I.Y. fest in Tennessee, since 2010. A place for everybody who never fit in just one scene.`
6. Leave a gap here for the **countdown**. You will drop a **Code Block** in this spot in Part 7, between the paragraph above and the button below.
7. Add a **Button** block below the countdown spot. Label it:
`Get Your Tickets Now!`
Link it to exactly:
`https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh`
Set **Open in New Window**. Make it a large solid (Primary) button.
8. Center all hero blocks.
### 5.2 Festival sub-nav (jump links)
The source has a small navigation strip with jump links and a Tickets button. Squarespace has no native page level sticky sub-nav with dropdowns, so build it as a simple row of links that jump to sections. Set the matching **Section IDs** as you build each section below so these jumps work.
1. Below the Hero, add a blank **Section**, dark theme. This is a thin strip.
2. Add **Button** blocks (or a single Text block with links) in one row, in this order, each linking to the on-page anchor shown:
- `Lineup` links to `#lineup`
- `The Poster` links to `#feature-bill`
- `Camping & Grounds` links to `#experience`
- `Location & Map` links to `#location`
- `FAQ` links to `#faq`
- `Other Shows` links to `#shows`
- `Tickets` links to `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh` (Open in New Window)
3. To make a `#anchor` jump work: open each target section's **Edit Section** settings and set its **Section ID** to the matching value without the `#` (for example `lineup`, `feature-bill`, `experience`, `location`, `faq`, `shows`). If your Squarespace version does not expose a Section ID field, the page still works by scrolling, and you can note the jump links as a follow up. Do not edit the global nav to fix this.
### 5.3 Lineup section (71 band image tiles)
1. Below the sub-nav add a **Section**. Open **Edit Section**, set **Section ID** to `lineup`, dark theme.
2. Add a **Text** block, paste the eyebrow line:
`100 Plus Bands, Two Stages`
3. Add a **Text** block, paste and format as **Heading 2**:
`2026 Lineup`
4. Add a **Gallery Section** (or a Gallery block) set to a **Grid** layout. This holds the band tiles.
5. Upload the 71 lineup images from this project's `site/assets/lineup/` folder, in the order listed below. Each tile is a band's announcement artwork. Keep the order.
6. For each image, set its **alt text** to the band name plus ` at Muddy Roots Music Festival 2026` (for example `Circle Jerks at Muddy Roots Music Festival 2026`).
7. Lineup order (1 to 71), verbatim band names:
1. Circle Jerks
2. Monolord
3. Municipal Waste
4. Shannon and the Clams
5. Frankie and the Witch Fingers
6. Son Rompe Pera
7. Mac Sabbath
8. Rickshaw Billie's Burger Patrol
9. The Monsters
10. Codefendants
11. The Builders and the Butchers
12. The Tillers
13. Bloodshot Bill
14. Angry Zeta
15. Bosko Baker
16. Sex Mex
17. James Hunnicutt
18. American Sharks
19. Labretta Suede and The Motel 6
20. Zander Schloss
21. Squid Pisser
22. Jason Dea West
23. Summer Newman
24. Pat and the Pissers
25. Bronco
26. Gumm
27. Johanna Rose
28. Bask
29. Deady
30. Blossomin' Bone
31. Yosemite in Black
32. Los Pistoleros
33. Jay Bird
34. Black Tarpoon
35. Meredith Moon
36. Mangy Bones
37. Wynton Existing
38. Keddies Resort
39. Psychic Death
40. American Dream Survivors
41. Shrudd
42. Pollute
43. Hobo Gadget Junk Band
44. A.P. Rodgers
45. Josh and the Dirty Rags
46. The Chapel
47. Buzzard Fight
48. Filthy Still
49. Gremlins
50. Nightfreak
51. The Hotrails
52. Belly Hole Freak
53. Total Flesh
54. Rotten Luck
55. Uncle Skunkle
56. Commander Keen
57. Runt
58. Knifey
59. Leo Crafft
60. Burning Death
61. Bootprint
62. Dead Runes
63. Ramblin Ricky Tate
64. Barcode
65. Horse Breakfast
66. Jimmy "Duck" Holmes
67. James Leg
68. Matt Pless
69. Joe Buck Yourself
70. Sarah Slade & The Slow Burn
71. Strayhound
8. Below the gallery add a **Text** block, paste this note verbatim:
`Big names up top. Everybody else below, all the way down to the Thursday pre-party. The whole crew.`
9. Below it add a centered **Button** block. Label it:
`Get Weekend Passes`
Link to exactly:
`https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh`
Open in New Window.
### 5.4 The Poster section (image left, text right)
1. Below the Lineup add a **Section**. Open **Edit Section**, set **Section ID** to `feature-bill`, dark theme.
2. Add an **Image** block on the left. Upload `assets/poster.jpg`. Set alt text:
`Muddy Roots Music Festival 2026 lineup poster`
3. Beside it add a **Text** block, paste the eyebrow line:
`The Poster`
4. Add a **Text** block, format as **Heading 2**:
`One Hundred Bands, One Poster`
5. Add a **Text** block, paste this paragraph verbatim:
`Circle Jerks play hardcore. Monolord play doom. Mac Sabbath play fast food metal. Frankie and the Witch Fingers play psych. The Tillers play folk. We do not stick to one kind of music. We just book bands that mean it.`
6. Add a **Text** block, paste this paragraph verbatim:
`We add each band to the poster by hand and post it online, one at a time. Watch the wall fill up.`
7. Add a **Text** block, paste this pull quote verbatim:
`No genre. No filler. Just roots.`
### 5.5 Camping & Grounds section (image, then text)
1. Below it add a **Section**. Open **Edit Section**, set **Section ID** to `experience`, dark theme.
2. Add an **Image** block. Upload `assets/feat-crowd.jpg`. Set alt text:
`Crowd at Muddy Roots Music Festival`
3. Add a **Text** block, paste the eyebrow line:
`Camping & Grounds`
4. Add a **Text** block, format as **Heading 2**:
`Three Days. 127 Acres. Come As You Are.`
5. Add a **Text** block, paste this paragraph verbatim:
`Two stages play from sundown to sunup. Your weekend pass comes with free camping and free hot showers. Roll in Friday, set up camp anywhere on the ranch, and stay through Monday.`
6. Add a **Text** block, paste this paragraph verbatim:
`Bring an RV, a tent, a school bus, or a beat-up old tour bus. We do not care what you sleep in. Just be good to your neighbors and the land.`
7. Add a **Text** block, paste this pull quote verbatim:
`D.I.Y. til we die.`
### 5.6 Location and Sponsors section
1. Below it add a **Section**. Open **Edit Section**, set **Section ID** to `location`, dark theme.
2. Add a **Text** block, paste the eyebrow line:
`Where It Goes Down`
3. Add a **Text** block, format as **Heading 2**:
`Cookeville, Tennessee`
4. Add a **Text** block, paste this line verbatim:
`Junebug Boogie Ranch • 115 Waterloo Rd, Cookeville, TN 38506`
5. Add an **Image** block. Upload `assets/map.jpg`. Set alt text:
`Map of the Muddy Roots festival grounds at the Junebug Boogie Ranch`
6. Add a **Text** block, paste the eyebrow line:
`Sponsors & Partners`
7. Add four **Image** blocks in a row, the sponsor logos from `site/assets/sponsors/`. Two of them are clickable:
- `heart-in-hand.png`, alt `Heart in Hand Critters Hollow Ranch and Rescue`, set its Clickable Link to `https://www.heartinhandcrittersrescue.com`, Open in New Window.
- `find-a-home.png`, alt `Find a Home in Tennessee`, set its Clickable Link to `https://www.findahomeintn.com`, Open in New Window.
- `mystic-panther.png`, alt `Mystic Panther Tattoo`, no link.
- `pabst.png`, alt `Pabst Blue Ribbon`, no link. (This one sits on a white tile in the source. You can give just this image block a white background.)
8. Add a **Text** block below, paste this verbatim, and make the email a link to `mailto:milt@muddyroots.com`:
`Want your logo on the wall? Sponsor or advertise: milt@muddyroots.com`
### 5.7 FAQ section (accordion)
1. Below it add a **Section**. Open **Edit Section**, set **Section ID** to `faq`, dark theme.
2. Add a **Text** block, paste the eyebrow line:
`Good to Know`
3. Add a **Text** block, format as **Heading 2**:
`Frequently Asked`
4. Add an **Accordion** block (Squarespace 7.1 has a native Accordion block). Add seven rows. Paste each question as the row title and each answer as the row body, verbatim:
**01 Where do I buy tickets?**
`Weekend passes are $200 and your best bet. They include free camping and free hot showers. Arrive Friday and leave Monday, and you can come and go all weekend. One pass gets you every band, except one private set just for paying Patreon members, called the "Keys To The Kingdom." Do not need a full weekend? Show up at the gate on the day you can and single day tickets will be available for the rest of the show. Kid tickets are discounted and only sold at the gate.`
Under this answer add a **Button** labeled `Get Tickets` linking to exactly `https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh`, Open in New Window. (If the Accordion row cannot hold a button, place the button just below the accordion.)
**02 What is the camping situation?**
`We have 127 acres for you to spread out on. Park and camp just about anywhere you like, except on vendor row, at no extra charge. Bring an RV, camper, tent, U-Haul, hotrod, school bus, or a vintage 1956 country star touring bus. We do not care. But there are no hookups, and do not bring a loud generator. Be mindful of your neighbors or you may be asked to leave with no refund. There are several hotels in Cookeville and the surrounding towns.`
**03 Food and drink?**
`There are many food and drink vendors onsite, including two bars. BYOB is fine, and so is cooking and grilling out at your campsite. Pick up your mess and be safe with fire. It is all at your own risk.`
**04 How do I get there?**
`115 Waterloo Rd, Cookeville, TN 38506 is the address, but sometimes that sends you to a house across the road. Look for the Junebug Boogie Ranch. We are about 15 miles north of I-40 in Cookeville. BNA airport is about 90 miles away and Knoxville airport is about 115 miles. Greyhound goes to Cookeville. From there you may need a carpool, Uber, Lyft, or taxi.`
**05 What can't I bring?**
`No dogs, guns, knives, or bad attitudes. For clarity, you may cook with knives, but leave your Crocodile Dundee hip knife at camp. Real service dogs are welcome. This is private property. The law does not count emotional support animals as service dogs, so please leave them home. Do not push your luck, or you will get sent packing.`
**06 There is a waterfall?**
`There are actually two of them, one small and one large, both at Waterloo Falls and Events. You may walk there from the fest grounds or take the shuttle provided each day for $5 round trip. Do not park alongside the road or on the waterfall lot. The shuttle stop is near the ticket booth at the Junebug Ranch. The falls are on private property and not open to the public during the festival, just for us. Bring water shoes, the river rock can be slippery. Be careful and look out for each other.`
**07 How do I sponsor or advertise?**
`We would love to have you. Reach out to milt@muddyroots.com and the crew will get you set up with sponsorship, advertising, or a vendor booth.`
Make `milt@muddyroots.com` a link to `mailto:milt@muddyroots.com`.
### 5.8 Other Shows in TN section (three show cards)
1. Below it add a **Section**. Open **Edit Section**, set **Section ID** to `shows`, dark theme.
2. Add a **Text** block, paste the eyebrow line:
`Not the Festival`
3. Add a **Text** block, format as **Heading 2**:
`Other Shows in TN`
4. Add a **Text** block, paste this paragraph verbatim:
`These are not the festival. They are other Muddy Roots shows around Tennessee all year long. Come catch one near you.`
5. Add three **Image** blocks in a row from `site/assets/tours/`, each clickable, each with a caption below it:
- `sex-mex.jpg`, alt `Sex Mex live at Hubba Hubba Tiki Tonk, Nashville, July 18`. Clickable Link `https://www.muddyroots.com/`, Open in New Window. Caption: title `Sex Mex`, line `July 18 · Hubba Hubba Tiki Tonk, Nashville`, line `Free Show`.
- `profanatica.jpg`, alt `Profanatica at Hop Springs, Murfreesboro, August 2 2026`. Clickable Link `https://hopspringstn.com`, Open in New Window. Caption: title `Profanatica`, line `August 2, 2026 · Hop Springs, Murfreesboro`.
- `cky.jpg`, alt `CKY at Hop Springs, Murfreesboro, October 14 2026`. Clickable Link `https://hopspringstn.com`, Open in New Window. Caption: title `CKY`, line `October 14, 2026 · Hop Springs, Murfreesboro`.
6. Below the three cards add a **Button** block. Label it:
`All Tour Dates`
Link to exactly `https://www.muddyroots.com/`, Open in New Window. Make it an outline (Secondary) button.
### 5.9 Contact links (native version of the Contact Us dropdown)
The source has a Contact Us dropdown in the sub-nav. Squarespace has no native page dropdown, so place these eight links in a small native section so none are lost.
1. Below Other Shows add a **Section**, dark theme. Title it with a **Text** block, format as **Heading 2**:
`Contact and Get Involved`
2. Add **Button** blocks (or a Text block with links), each labeled and linked exactly:
- `Text the Muddy Hotline` links to `sms:+16154376182`
- `Street Team` links to `https://www.muddyroots.com/muddyrootstreetteam`
- `Volunteer` links to `https://www.muddyroots.com/muddyrootsvolunteer`
- `Vendor Booth` links to `https://www.muddyroots.com/muddyrootsvendors`
- `Food Vendor` links to `https://www.muddyroots.com/muddyrootsfoodvendor`
- `Join Our Staff` links to `https://www.muddyroots.com/muddyrootsstaff`
- `Band Submissions` links to `https://www.muddyroots.com/muddyrootsbandsubmissions`
- `Muddy Photographer` links to `https://www.muddyroots.com/muddyrootsphotographer`
Set the external links to Open in New Window.
### 5.10 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, which 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. Hero background video (native flow), and the mobile fallback
This page failed on mobile in version 1 because phones often will not autoplay video. Do the mobile fallback step. It is required.
### 6.1 Prepare the video file
1. Use `assets/hero-loop.mp4` from this project as the source.
2. The clip must be **40 seconds or less**, **10MB or less**, **720p**, **mp4**. The provided file is already a short loop near that size. If you re-export, keep it muted, around 720p, and trim to 40 seconds or less so Squarespace accepts it.
### 6.2 Add the background video
1. Open the **Hero** section (Part 5.1).
2. Click **Edit Section**.
3. Click **Background**.
4. Click **Video**, then **Upload** and choose `hero-loop.mp4`.
5. Squarespace plays it muted, looping, and autoplaying on desktop. It caps near 60 seconds and roughly 10MB, which the file meets.
### 6.3 Set the required mobile fallback image
1. Still in the section **Background** panel, find the **Fallback image** or **Image** field (Squarespace uses the background image as the phone fallback when video will not autoplay).
2. Upload `assets/hero-poster.jpg` as that fallback image.
3. Confirm on a phone: open the live page on a real phone, or use the editor's phone preview. The hero must show the poster image cleanly even if the video does not autoplay. Text must stay readable over it. If the text is hard to read, darken the section overlay in the section Background settings.
---
## 7. Countdown widget (this page, one Code Block)
The countdown ticker lives on the **Tennessee** page (the source file places it in the hero, not on the portal). It is the only custom code on this page besides the brand CSS. It is a single self-contained snippet, HTML plus one inline script, no external libraries.
### 7.1 Add the Code Block
1. In the **Hero** section, click into the gap you left in Part 5.1 step 6 (between the tagline paragraph and the Tickets button).
2. Click **Add Block**, choose **Code**.
3. Make sure the block's setting **Display Source** is **off** (so it renders, not shows the raw code).
4. Delete any sample text in the box and paste the snippet below exactly.
### 7.2 The snippet (paste as is)
```html
<div id="mr-countdown" aria-label="Countdown to Muddy Roots 2026" style="text-align:center;font-family:'Epilogue',system-ui,sans-serif;padding:8px 0;">
<div style="font-weight:600;text-transform:uppercase;letter-spacing:.26em;font-size:11px;color:#FD3008;margin-bottom:11px;">Gates open September 4 at the Junebug Boogie Ranch</div>
<div style="display:inline-flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap;">
<div style="display:flex;flex-direction:column;align-items:center;min-width:50px;">
<span id="mr-d" style="font-family:'Anton',Impact,sans-serif;font-size:46px;line-height:.9;color:#fff;">--</span>
<span style="font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:rgba(255,255,255,.5);margin-top:7px;">Days</span>
</div>
<div style="display:flex;flex-direction:column;align-items:center;min-width:50px;">
<span id="mr-h" style="font-family:'Anton',Impact,sans-serif;font-size:46px;line-height:.9;color:#fff;">--</span>
<span style="font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:rgba(255,255,255,.5);margin-top:7px;">Hrs</span>
</div>
<div style="display:flex;flex-direction:column;align-items:center;min-width:50px;">
<span id="mr-m" style="font-family:'Anton',Impact,sans-serif;font-size:46px;line-height:.9;color:#fff;">--</span>
<span style="font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:rgba(255,255,255,.5);margin-top:7px;">Min</span>
</div>
<div style="display:flex;flex-direction:column;align-items:center;min-width:50px;">
<span id="mr-s" style="font-family:'Anton',Impact,sans-serif;font-size:46px;line-height:.9;color:#fff;">--</span>
<span style="font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:rgba(255,255,255,.5);margin-top:7px;">Sec</span>
</div>
</div>
<div style="margin-top:13px;font-size:13px;color:rgba(255,255,255,.72);">Weekend passes are $200 and going fast. Grab yours before the gates open.</div>
</div>
<script>
(function(){
var target = new Date('2026-09-04T12:00:00-05:00').getTime();
function pad(n){ return (n < 10 ? '0' : '') + n; }
function set(id, v){ var el = document.getElementById(id); if (el) el.textContent = pad(v); }
function tick(){
var diff = target - Date.now();
if (diff < 0) diff = 0;
var s = Math.floor(diff / 1000);
set('mr-d', Math.floor(s / 86400));
set('mr-h', Math.floor((s % 86400) / 3600));
set('mr-m', Math.floor((s % 3600) / 60));
set('mr-s', s % 60);
}
tick();
setInterval(tick, 1000);
})();
</script>
```
5. Click out of the block. In the editor the code may not animate, that is normal. Save, then open the live page and confirm the numbers count down every second.
---
## 8. Page scoped code (brand CSS, plus our header and footer)
This applies Anton and Epilogue, the accent red, square corners, the black background, and the button styling to **this page only**. Paste it into this page's own **Page Header Code Injection**.
### 8.1 Find this page's unique id
1. Install the free Chrome extension **Squarespace ID Finder**.
2. Open the Tennessee page in a normal browser tab (not the editor).
3. Click the extension icon, then click the page background. It shows the page's **collection id**, like `collection-1234abcd5678ef90`. Copy it.
4. Alternative: right click the page, **Inspect**, read the `<body>` tag's `id` (it starts with `collection-`). Copy that.
### 8.2 Open the per page code panel
1. Left menu, **Pages**.
2. Hover the Tennessee page, click its **gear / Settings** icon.
3. Click **Advanced**.
4. Click into the **Page Header Code Injection** box.
### 8.3 Paste this, then replace the id
Paste the block, then replace **every** `YOURPAGEID` with the id you copied (keep the `#collection-` form, for example `#collection-1234abcd5678ef90`). Stay 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 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**. Open the live page and confirm fonts, black background, red accents, square corners. If nothing changed, recheck the plan (Part 0) and that you replaced `YOURPAGEID`.
### 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 `https://muddymockup2.mybuildstudio.com/` on this Tennessee page (or your own Worldwide page URL if you prefer an internal link).
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. Place this content on the existing `/muddyroots` slug
Preview first. Pause for explicit confirmation from the owner before publishing or changing anything on the live page.
1. Click **Done**, then **Exit** the editor. Use the device preview icons to check desktop, tablet, and phone. Tap the phone preview and confirm the hero poster fallback and that the page is readable.
2. Get explicit confirmation from the owner to proceed.
3. You are editing the **existing** page whose slug is `/muddyroots`. Keep that slug. Do **not** open **Page Settings > General** and change the **URL Slug**. Leave it as `muddyroots`.
4. Once the new sections are confirmed and the old content is removed, click **Save** to publish the updated page in place.
5. Open `yoursite.com/muddyroots` and confirm the live page is the rebuilt one and the slug is unchanged.
---
## 10. Verification checklist (this page)
- [ ] Plan is Core or higher.
- [ ] You worked on the duplicate first.
- [ ] Hero has the background video on desktop and the `hero-poster.jpg` mobile fallback. Checked on a real phone.
- [ ] Hero heading, sub line, tagline verbatim. `Get Your Tickets Now!` links to the exact tickets URL.
- [ ] Countdown Code Block counts down live. Snippet pasted exactly, Display Source off.
- [ ] Lineup gallery has 71 tiles in order, each alt set, `Get Weekend Passes` to the exact tickets URL.
- [ ] The Poster, Camping & Grounds, Location, Sponsors, FAQ (7 rows), Other Shows: all copy verbatim.
- [ ] Sponsor logos: Heart in Hand links to `https://www.heartinhandcrittersrescue.com`, Find a Home to `https://www.findahomeintn.com`. Email is `mailto:milt@muddyroots.com`.
- [ ] Other Shows: Sex Mex to `https://www.muddyroots.com/`, Profanatica and CKY to `https://hopspringstn.com`, All Tour Dates to `https://www.muddyroots.com/`.
- [ ] All eight Contact links present and exact, including `sms:+16154376182`.
- [ ] 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 only in this page's Page Header Code Injection, scoped under the page id, under 32,000 characters.
- [ ] Slug stays `/muddyroots`. No new slug created. No other page or nav item touched.
- [ ] Checked on desktop, tablet, and phone.
- [ ] Zero em dashes anywhere you typed.