Skip to main content

Custom CSS

Fine-tune the visual design of your Sites website by adding your own CSS. Change fonts, adjust spacing, restyle components, or match your existing brand guidelines precisely.

Sites configuration with custom CSS
The Configuration tab is where you add custom CSS and manage domains.

Adding custom CSS​

  1. Go to Stream Settings → Sites → Configuration tab
  2. Find the Custom CSS field
  3. Enter your CSS
  4. Click Save

Your CSS is injected into every page of your Sites website as a <style> block. It takes effect immediately.

What you can customise​

Custom CSS gives you full control over the visual presentation. Common customisations include:

Colours and typography​

/* Change the heading font */
h1, h2, h3 {
    font-family: 'Georgia', serif;
}

/* Override the primary accent colour */
:root {
    --color-primary: #e63946;
}

/* Change link colours */
a {
    color: #457b9d;
}

Layout and spacing​

/* Increase spacing between sections */
.section {
    margin-bottom: 3rem;
}

/* Limit content width */
.container {
    max-width: 1000px;
}

Hiding elements​

/* Hide the footer */
footer {
    display: none;
}

/* Hide a specific section */
.section-presenters {
    display: none;
}

Custom backgrounds​

/* Add a background pattern */
body {
    background-image: url('https://example.com/pattern.svg');
    background-repeat: repeat;
}

Show-level CSS​

You can also set custom CSS for individual shows. This applies only to that show's pages on your Sites website, allowing different shows to have distinct visual styles.

Configure per-show CSS from the show's Sites settings in the dashboard.

Limits​

  • Maximum size: 10,000 characters — enough for extensive customisation
  • No JavaScript: Custom CSS only, not custom scripts (use the analytics code field for tracking scripts)
  • No file uploads: CSS must reference external URLs for images or fonts (use Google Fonts or your own hosted files)

Tips​

Use your browser's developer tools

Right-click any element on your site → Inspect to see its CSS class names and current styles. This tells you exactly what to target in your custom CSS.

Test on mobile

Check your custom CSS on a mobile device or using your browser's responsive mode. Some desktop-only styles can break the mobile layout.

Start small

Make one change at a time and check the result. It's easier to debug a single rule than a large block of CSS.

Be careful with layout changes

Overriding core layout properties (display, position, grid, flexbox) can break the responsive design. If something looks wrong on mobile, your custom CSS may be the cause.