Style a published Confluence site with custom CSS

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

To style a published Confluence site with custom CSS, open the site in Capable Sites, go to Settings, Custom CSS, paste your CSS, check it in Light and Dark, and save. It goes live with the next publish.

#Steps

  1. Open Capable, choose Sites, and open the site.

  2. Go to Settings, then Custom CSS.

  3. Paste one of the examples below into the Stylesheet pane, or choose Start from an example.

  4. Check the preview with Light and Dark.

  5. Select Save changes.

  6. Publish the site: Update and Promote, or Publish now on a live site.

#Examples

#A different header colour in light and dark mode

:root,
:root.light {
  --color-header-bg: #14532d;
  --color-header-text: #f0fdf4;
}
:root.dark {
  --color-header-bg: #052e16;
  --color-header-text: #bbf7d0;
}

#Brand-coloured links in page content

:root,
:root.light {
  --color-link: #b45309;
}
:root.dark {
  --color-link: #fbbf24;
}

#Style one space differently

body[data-space='RELEASES'] .article-body > h1 {
  color: #7c3aed;
}

#Rounder panels and a stronger info border

.site-panel {
  border-radius: 12px;
}
.site-panel--info {
  border-left: 4px solid var(--color-primary);
}

#Hide On this page on small screens

@media (max-width: 1024px) {
  .site-toc {
    display: none;
  }
}

#A few things worth knowing

  • Set colours in both the light and the dark block, or a light colour can show on a dark page.

  • You need to be a Confluence admin to see Custom CSS.

  • If a rule seems to do nothing, a more specific site rule may be winning. Use an equally specific selector.

Paste, preview, publish.