> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> Restyle a named part of your site, such as a heading, a card or a button, with your own CSS: for every section of a kind, or for one section.

Restyle one part of your site exactly the way you want, when the built-in options don't go far enough. Every section names its parts, such as its heading, its cards or its buttons. Type CSS into the slot for the part you want to change, and it reaches that part only.

CSS is the code language websites use to describe how things look, such as colors, sizes and spacing. Custom CSS is an optional, advanced feature: you never need it to set up your site. The settings in **Site design** and each section's own tabs cover colors, fonts, buttons, cards and backgrounds. If you want a change they don't cover and nobody on your team writes CSS, ask a web designer, or ask the [FetchskiAI Agent](https://docs.fetchski-attract.com/fetchskiai/agent.md) to write it for you.

 **Who can do this:** Admins and Owners.

## Where custom CSS goes

| Where | What it styles |
| - | - |
| **Site design** → **Custom CSS** → **Design layer** | Every section of a kind at once, plus parts shared across the site, such as all buttons, the header and the footer |
| A section's **CSS** tab | That one section. It wins over the **Design layer** |
| The **Custom CSS** button in the side toolbar of **Rich Text** and **Layout** sections | That one section. These sections have no editor window, so the button opens their CSS |
| The blog page's settings → **Post · CSS** → **Post custom CSS** | Every blog post under that blog page |

The **Form** section has a **CSS** tab too, like every other section. **Site design** → **Custom CSS** also has **Form** and **Form (placed)** groups for every form on your site.

## Open the Design layer

1. In the toolbar (the bar across the top of your site once you're signed in; see [The toolbar](https://docs.fetchski-attract.com/guides/get-started/toolbar-and-command-palette.md#the-toolbar)), choose **Site design**. Or open the command palette (⌘K, or Ctrl+K on Windows) and choose **Site design**.
2. Choose the **Custom CSS** tab.

The **Design layer** lists every kind of section, such as **Hero** or **Feature Cards**, then the shared parts of your site. Open one to see its slots. A **CSS** badge marks a group that already has CSS, and a red "N to fix" badge marks one with problems.

![Site design open on Custom CSS: the Design layer list with Hero (CSS badge) and Feature Cards open, its Card title slot open with 2 lines of CSS.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/custom-css/guides-site-design-custom-css-design-layer-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=fe4932270d509abafea76d89b462417e)

The Design layer: one group per kind of section, one slot per part.

## The shared parts

These groups sit below the sections in the **Design layer**, and only there:

* **Buttons**, **Eyebrows** and **Rich text**: every button, every small label above a heading, and all text written in the rich text editor.
* **Form controls**, **Blog cards** and **Social icons**: every form field, blog card and set of social icons.
* **Site header**, **Mobile menu** and **Site footer**: the bars at the top and bottom of every page, and the menu on phones.
* **Cookie banner**, **Blog post** and **Coming soon**: the cookie notice, the blog post page and the "coming soon" note. A page shows that note while it has no content yet (set on its **Coming Soon** tab). **Coming soon** isn't the maintenance page that covers your whole site.

## Style one section

1. Open the page and choose **Edit** in the edit bar.
2. Select the section, then choose **Edit** (pencil) in its side toolbar.
3. Choose the **CSS** tab. It holds one **Custom CSS** field, with one slot per part.
4. Open a slot and type your CSS. The section updates on the page as you type.
5. Close the editor when you're done, then choose **Update** to put the page live.

Choose **Cancel** in the section editor to put the page back as it was.

![A Parker's Feature Cards section with its editor open on the CSS tab; the Card slot open with CSS, and its part outlined on the page beside the editor.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/custom-css/guides-site-design-custom-css-section-tab-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=bc7f6f4fe90ea733dbe0c332bdce9c62)

Point at a slot and its part is outlined on the page.

## How a slot works

Each slot has the part's name, a short note on what it styles and a code box.

* **Point at a slot** and its part is outlined on the page. The slot's title says "Outlined on the page", or "Not on this page" when the part isn't there.
* **Expand editor** gives you a taller code box. **Shrink editor** puts it back.
* **Problems show as you type.** Each one is listed under the slot as **Error** or **Warning**, with its line number.
* **An empty slot changes nothing.** The part keeps its built-in look and your site's settings.

## Your first CSS

A slot holds styles for its part, one per line. Each line names what to change, a colon, the new value and a semicolon. For example, to make every Feature Cards card title your **Primary / brand** color and a little larger:

1. In **Site design** → **Custom CSS**, open **Feature Cards**, then the **Card title** slot.
2. Type these 2 lines:

```css theme={"dark"}
color: var(--fetchski-accent);
font-size: 1.5rem;
```

3. Choose **Update**, then open a page with a Feature Cards section to check it.

`var(--fetchski-accent)` means "my **Primary / brand** color". `rem` is a size unit: 1rem is your site's normal text size, so 1.5rem is one and a half times that. To undo it, empty the slot and choose **Update**.

## Advanced: CSS reference

This section is for people who already write CSS.

You don't write a selector (the part of a CSS rule that says which element it styles): the slot already points at its part. Use `&` for the part itself in nested rules (a rule inside the slot that styles a state of the part, or something inside it).

```css theme={"dark"}
color: var(--fetchski-accent);
letter-spacing: -0.02em;

&:hover { text-decoration: underline; }
@media (width >= 48rem) { font-size: 3rem; }
[data-theme='light'] & { color: var(--fetchski-ink); }
```

* **Use your palette colors.** These names follow **Site design** → **Colors** and switch with light and dark. A plain color like `#625bff` stays the same in both themes.

| In CSS | The color setting |
| - | - |
| `var(--fetchski-accent)` | **Primary / brand** |
| `var(--fetchski-accent-soft)` | the soft tint made from **Primary / brand** |
| `var(--fetchski-on-accent)` | **Text on primary** |
| `var(--fetchski-mint)` | **Secondary** |
| `var(--fetchski-coral)` | **Tertiary** |
| `var(--fetchski-link)` | **Link** |
| `var(--fetchski-surface)` | **Page background** |
| `var(--fetchski-raised)` | **Cards** |
| `var(--fetchski-sunken)` | **Bands between sections** |
| `var(--fetchski-ink)` | **Text** |
| `var(--fetchski-ink-muted)` | **Muted text** |
| `var(--fetchski-line)` | **Lines and borders** |
| `var(--fetchski-success)`, `-warning`, `-danger`, `-info` | **Success**, **Warning**, **Error**, **Information** |

* **Write for phones first.** Write the phone look first, then larger screens with a media query (a rule that applies only from a screen width up), `@media (width >= …)`. Media queries that end at a width aren't allowed, because they break the editor's device preview.
* **Target the other theme** with `[data-theme='light'] &` or `[data-theme='dark'] &`.
* **Reach inside the part** with `& a` or `& h2`. Every nested rule starts with `&`, except a theme rule, which starts with `[data-theme='light'] &` or `[data-theme='dark'] &`.
* **Target states** with `&:hover`, `&:focus-visible`, or the part's own states, such as `&[aria-expanded='true']` on an open question or `&[aria-current='page']` on the current page's link.
* **Pick one card** with `&:nth-child(2)`. A featured card also carries `&[data-featured]`.

## See what already styles a part

Every slot has a **Currently applied** list. It shows what styles the part today, before your CSS.

* **As it looks now**: every rule that styles the part at this screen width and theme, strongest first. A rule that another one beats is struck through. "Overridden by this slot" means your CSS beats it.
* **States: hover, focus, active…**: the rules for hover, focus and other states.
* **Settings these rules read**: the settings behind the rules, such as a section's background or a button's colors, with their values.
* **Copy rule**: copies a rule into your slot, ready to change. A rule copied this way no longer follows the setting it came from, so copy only what you mean to change.

When the part isn't on the page you're on, the list reads it from another page that uses it. That takes a few seconds.

![A slot's Currently applied list open: As it looks now with 3 rules, one line struck through and marked "Overridden by this slot", the States group closed.](https://mintcdn.com/fetchski-attract-api/5p16uJgtNdjvJND9/images/cms/guides/site-design/custom-css/guides-site-design-custom-css-applied-light.png?fit=max\&auto=format\&n=5p16uJgtNdjvJND9\&q=85\&s=531c2be2c20783c5c2e7b38f8fe677ec)

Currently applied shows what styles the part, strongest first.

## Which CSS wins

1. A section's own **CSS** tab wins over the **Design layer**.
2. The **Design layer** wins over the part's built-in look and your settings.

Put a look you want everywhere in the **Design layer**. Use a section's **CSS** tab for the one section that's different.

## A short example

Parker's Puppy Playland wants every card title in its accent color, and one standout card on the home page.

1. Jordan opens **Site design** → **Custom CSS**, opens **Feature Cards**, then the **Card title** slot, and types `color: var(--fetchski-accent);`.
2. Jordan chooses **Update**. Every Feature Cards section on the site now has accent titles.
3. On the home page, Jordan opens the Feature Cards section's **CSS** tab, opens the **Card** slot, and types `&:nth-child(2) { background: var(--fetchski-accent-soft); }`.
4. Jordan closes the editor and publishes the page. Only the second card on the home page gets the soft accent background.

## What CSS can't change

* **Movement that runs on its own.** Scroll effects, the scrolling ribbons, card tilt and similar motion control their own position and fading. Style the part around them instead.
* **Sizes worked out for the layout.** Gallery tile placement, column widths in a **Layout** section, device frames and maps size themselves. Only the parts around them can be styled.
* **Clipped edges.** Some cards and ribbons hide anything that spills over their edge, so a large shadow can be cut off.

A rule that motion controls is marked "Set by an animation: CSS can’t override it" in **Currently applied**.

## Troubleshooting

CSS with an **Error** is never saved. The CMS lists every problem, with what to write instead. These are the ones you're most likely to see.

> [accordion] `colr` isn’t a CSS property. Did you mean `color`?
>
> The property name is misspelled. Use the name it suggests. Without a suggestion, the message says "Check the spelling."

> [accordion] `x` needs a `;` at the end: every `property: value` ends with `;`.
>
> Each line needs a semicolon at its end, such as `color: var(--fetchski-accent);`.

> [accordion] `max-width` media queries aren’t allowed
>
> Media queries must work for phones first, so the editor's device preview can follow them. Write the phone look first, then add larger screens with `@media (width >= 48rem)`. The `<` character isn't allowed either, so `width < 48rem` is refused too.

> [accordion] ids (`#x`) aren’t allowed in custom CSS selectors.
>
> Point at the part through its slot, and reach inside it with `&`. To pick one item, use `&:nth-child(2)`.

> [accordion] nested selectors must start with `&`, the part itself
>
> Write `& a` to reach links inside the part. To style the part itself, put the styles straight in the slot, and use `&:hover` for its states.

> [accordion] `url` isn’t allowed: custom CSS can only use images from this site’s uploads
>
> Upload the image to your media library first, then use its address on your site, which starts with /uploads/. Write only the part from /uploads/ on, without your domain, inside `url()`, such as `background-image: url('/uploads/attachments/parkers-paws.webp');`. Fonts can come from fonts.bunny.net or fontshare.

> [accordion] `@font-face` isn’t allowed in custom CSS: add fonts in Site design → Typography.
>
> Add the font in **Site design** → **Typography**, or in the section's **Fonts** tab. `@import` and `@container` aren't allowed either.

> [accordion] `#zz` isn’t a valid hex color
>
> A hex color uses 3, 4, 6 or 8 of 0–9 and a–f, such as `#625bff`. Or use a palette color, such as `var(--fetchski-accent)`.

> [accordion] this slot is N kB; the limit is 8 kB per slot.
>
> Shorten the slot, or move styles that apply to every section of this kind into the **Design layer**.

> [accordion] This section's CSS has errors and isn't applied.
>
> CSS saved earlier can stop passing the check. Then it isn't applied, and people signed in to edit see this note on the page. Open the section's **CSS** tab and save to check it again, then fix what it lists. For the **Design layer**, the note at the bottom of the page reads "Site design → Custom CSS has errors and isn't applied."

> [accordion] Custom CSS needs the “Write custom CSS” permission. Saving keeps the CSS as it is.
>
> You can edit the section, but not its CSS. Saving keeps any CSS already there. Ask an Admin or Owner to make the change.

> [accordion] The CSS check is unavailable right now; it runs again when you save.
>
> The check as you type couldn't run. Keep going: the CMS checks your CSS again when you save.

## Good to know

* **Try the built-in options first.** Background, Fonts, button and card options follow your palette and both themes for you. Custom CSS is for the touches they don't cover.
* **The Design layer has no preview.** Choose **Update**, then check a page that uses the part. A section's **CSS** tab updates the page as you type.
* **CSS travels with its section.** Copy a section, or save it in a page template, and its CSS comes along.
* **Cards from shared lists have no CSS of their own.** A testimonial or team member shows in every section that lists it. Style it in that section's **Card** slot. Use `&[data-featured]` for the ones with **Featured** turned on in their own settings, or `&:nth-child(2)` for the second card.
* **Check both themes.** Switch your site between light and dark to see your CSS in each.
* **FetchskiAI can help.** Admins and Owners can ask the [FetchskiAI Agent](https://docs.fetchski-attract.com/fetchskiai/agent.md) to write custom CSS. It writes into the same slots.

## Related

> [card] [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md)
>
> the CSS tab and the other shared tabs.

> [card] [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md)
>
> the palette colors to use in your CSS.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> button and card options to try before CSS.

> [card] [What each role can do](https://docs.fetchski-attract.com/guides/people/what-each-role-can-do.md)
>
> who can write custom CSS.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.