Skip to content

Add custom CSS

Inject custom CSS into your published site for fine-grained control over appearance. Available on Team and Business plans.

Before you begin

  • You need a Team or Business plan. Custom CSS is not available on Free or Pro plans.

  • You should have at least one published web target so you can preview your changes.

Add custom CSS

  1. Go to Settings > Branding.

  2. Find the Custom CSS field.

  3. Enter your CSS rules.

  4. Publish (or republish) a web target to see the changes.

What custom CSS can do

Custom CSS is injected into the <head> of every page on your published site. You can:

  • Override default typography (font sizes, line heights, letter spacing)

  • Customize colors beyond the primary color

  • Adjust spacing, margins, and padding

  • Style specific elements (tables, code blocks, callouts)

  • Hide or rearrange elements

  • Add custom backgrounds or borders

Topicary's published site styles use specific CSS selectors. Your custom rules may need higher specificity to take effect. Use your browser's developer tools to inspect the existing selectors and match or exceed their specificity rather than relying on `!important`.

Common CSS targets

The following selectors cover the most frequently customized elements:

Selector

What it targets

.prose

Main content area (typography, spacing)

.sidebar

Left navigation panel

.toc

Right-side table of contents

pre, code

Code blocks and inline code

.callout

Callout/admonition blocks

.homepage-cards

Homepage topic cards

h1, h2, h3

Heading elements

Example: Increase body text size 

.prose {
  font-size: 18px;
  line-height: 1.75;
}

Example: Custom code block styling 

pre {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

Example: Narrow the sidebar 

.sidebar {
  width: 240px;
}

Example: Custom heading color 

.prose h2,
.prose h3 {
  color: #1e3a5f;
}

Example: Adjust dark mode colors 

[data-theme="dark"] .prose {
  color: #e0e0e0;
}

[data-theme="dark"] pre {
  background-color: #1a1a2e;
  border-color: #2a2a4a;
}

Use your browser's developer tools to inspect the published site and identify the CSS selectors you need. Toggle dark mode while the inspector is open to test both themes at once.

Tips

  • Custom CSS applies to all published web sites in the project. Target specific pages by using page-specific selectors if needed.

  • Test changes on both light and dark modes — the published site supports dark mode, and your CSS should work in both.

See also

Was this page helpful?