shadowdao
6a0a461c26
Build and deploy / deploy (push) Successful in 23s
Adds /whp/site-builder/ with overview, getting-started, blocks-and-pages, styling, and publishing. Wired as a 'Site Builder' sidebar group with a Beta badge. - Captured real screenshots via the demo account through a redaction step (server names, domain, demo-user all swapped for placeholders) - New beta-callout partial shared across all 5 articles - capture-site-builder.ts is local-only (uses tools/screenshots/.env for demo creds, never runs in CI)
72 lines
3.4 KiB
Plaintext
72 lines
3.4 KiB
Plaintext
---
|
||
title: Styling your site
|
||
description: Set colours, fonts, and link styles once with Site Design Tokens; reach for Advanced when you need finer control.
|
||
sidebar:
|
||
order: 4
|
||
---
|
||
|
||
import { Aside } from '@astrojs/starlight/components';
|
||
import Beta from '~/content/partials/beta-callout.mdx';
|
||
import Support from '~/content/partials/support-link.mdx';
|
||
|
||
<Beta />
|
||
|
||
The **Styles** panel on the right side of the editor controls site-wide design. Set a colour or font here and every block that uses it updates everywhere — no need to edit each page.
|
||
|
||
|
||
|
||
## Site Design Tokens (Basic)
|
||
|
||
The default **Basic** view exposes the most common controls:
|
||
|
||
- **Primary Color** — used for buttons, accents, and important highlights.
|
||
- **Secondary Color** — used for secondary buttons, hover states, and supporting accents.
|
||
- **Accent Color** — used for callouts, badges, and small decorative touches.
|
||
- **Heading Font** — applies to all heading blocks (H1–H6).
|
||
- **Body Font** — applies to paragraph text and other body copy.
|
||
- **Link Color** — used for inline links inside text blocks.
|
||
|
||
Each colour has a hex input plus an eight-swatch quick-pick row (a curated palette of vibrant brand colours). Click a swatch to apply it, or paste your brand hex into the input.
|
||
|
||
<Aside type="tip">
|
||
Tokens are saved with your site, so visiting the editor again preserves your palette and fonts. Changes apply immediately on the canvas — but, like everything else in Site Builder, they go live only when you click **Publish**.
|
||
</Aside>
|
||
|
||
## Advanced
|
||
|
||
Click **Advanced** in the Site Design Tokens header to expose finer controls:
|
||
|
||
- Extended palette — backgrounds, surfaces, borders, muted text, and inversions for dark sections.
|
||
- Type scale — adjust the relative size between H1–H6 and body text.
|
||
- Spacing scale — tune the default padding and margin used by sections and containers.
|
||
|
||
If you make a mess, click **Reset to Defaults** at the bottom of the panel — it restores the original token set without touching your content.
|
||
|
||
## Per-block overrides
|
||
|
||
The tokens above are the default for the whole site. When you need a single block to deviate (a one-off red CTA, for instance), select that block on the canvas; its block-settings panel on the right has its own colour controls that take precedence over the site tokens.
|
||
|
||
Use per-block overrides sparingly. The point of tokens is consistency — if you find yourself overriding the same value on every block, change the token instead.
|
||
|
||
## Picking fonts
|
||
|
||
The Heading and Body font dropdowns include a curated list of web fonts. If you need a font that isn't in the list:
|
||
|
||
1. Add a `<link>` to the font's CSS via [Custom head code](/whp/site-builder/publishing/#custom-head-code).
|
||
2. Type the font's exact family name into the font picker.
|
||
|
||
The dropdown is forgiving about custom names — anything you type will be applied as the `font-family`.
|
||
|
||
## Live preview at different widths
|
||
|
||
The desktop / tablet / mobile toggles at the top of the editor switch the canvas viewport. Layout decisions (column counts, padding, font size) often look fine at one width and break at another — switch through all three before publishing.
|
||
|
||
## Related
|
||
|
||
- [Blocks & pages](/whp/site-builder/blocks-and-pages/) — what the tokens apply to.
|
||
- [Publishing & code injection](/whp/site-builder/publishing/) — add a custom font via `<head>`.
|
||
|
||
## Still stuck?
|
||
|
||
<Support />
|