Adding custom CSS with Additional CSS

Additional CSS is a box in the WordPress Customizer where you can paste your own CSS. Rules you add there apply across the whole site, and Dirigible also loads them into the block editor so pages look the same while you edit.

Use it when the Customizer and block settings can't make the change you want, and no magic class covers it.

Open Additional CSS

1. Go to Appearance → Customize → Additional CSS. It's the last item in the Customizer menu.
2. Type or paste your CSS. The preview on the right updates as you type.
3. Click Publish when the preview looks right.

Dirigible doesn't add a second sitewide CSS box, so Additional CSS is the place for your own styles. The Scripts & Embeds fields are for tracking codes and scripts.

Style one block with a custom class

Additional CSS affects the whole site, so to change one block, give it a class name of your own and write the rule for that class.

1. Select the block. Under Advanced → Additional CSS class(es), type a name such as promo-card. Use lowercase letters and hyphens, and pick a name that isn't already a magic class.
2. In Additional CSS, write a rule that starts with a dot and the same name:

.promo-card {
  border: 2px solid var(--accent);
  padding: 2rem;
}

3. Click Publish. Only blocks with that class change. Add the same class to other blocks to reuse the style.

Use your site colors and fonts

Dirigible turns your palette and font choices into CSS variables. Use them instead of typing color codes, and your custom styles follow along when you change the palette later.

See Choosing site colors and fonts for where each one is set.

A pull quote in your heading font and brand color:

.pull-quote {
  font-family: var(--display-font);
  font-size: 1.5rem;
  color: var(--primary);
}

Less padding on the promo card on phones. Dirigible's tablet layout starts at 768px, so 767px and narrower is phone size:

@media (max-width: 767px) {
  .promo-card {
    padding: 1rem;
  }
}

Check the block editor too

When you publish in the Customizer, Dirigible copies your Additional CSS into the block editor. The editor's markup doesn't always match the live page, so a rule can work on the site but not in the editor. The live page is what visitors see, so check it there.

Undo a change

• Before publishing: close the Customizer without clicking Publish. The live site doesn't change.
• After publishing: delete the rule, or wrap it in /* */ to switch it off, then click Publish again.
• Keep a backup: go to Dirigible → Import/Export and click Export under Export Additional CSS to download everything in the box as a .css file.

Additional CSS belongs to the active theme

WordPress saves Additional CSS separately for each theme. If you switch to a different child theme, CSS saved under the old one doesn't come along. Export it first, then paste it into the new theme's Additional CSS.

Tips

• If a rule doesn't apply, the theme's own style may be more specific. Include the block's class in your rule rather than targeting a bare tag like h2.
• For styles that only one Section needs, use Section block CSS instead. It stays with that Section and can't affect the rest of the site.
• Tracking scripts and chat widgets don't go here. See Adding scripts and Custom embeds vs Additional CSS vs tracking IDs.
• Back up the box from Dirigible → Import/Export (Export Additional CSS).
• Changes not showing on the live site? See See your latest edits.