Add custom CSS

Use custom CSS for a change Styles and block settings do not offer. You can add CSS for the whole theme, or for one block or section.

Add CSS for the whole theme

1. Open your project in Fantasma.

2. In the icon rail, the narrow bar of icons along the edge of the editor, click the paintbrush icon, Styles.

3. Click Custom CSS.

4. Enter your CSS in the CSS field. The canvas shows the result as you type.

The field holds up to 20,000 characters. Past that, it shows "Custom CSS exceeds 20,000 characters. Shorten it to apply and save your changes." and keeps the last saved version that fit.

This CSS applies to every template. In the theme file it loads after the theme's own styles and after what Ghost adds to the page head, including Ghost Admin's code injection. When a rule here and a theme rule select the same element equally, yours wins.

You can also reach this field from Project settings. Under Custom code, next to Custom CSS, click Open in Styles.

Add CSS to one block or section

1. On the canvas, select the block or section.

2. In the right sidebar, click the plus button next to Advanced.

3. Select Custom CSS.

   

4. Enter your CSS in the Custom CSS field.

This CSS applies only to the block and what is inside it. Declarations at the top apply to the block itself. Write &:hover for the moment the pointer is over it, and a selector such as img for elements inside it:

opacity: 0.7;

&:hover {
  opacity: 1;
}

img {
  filter: grayscale(1);
}

If a bracket, a quote, a comment or a url( is left open, the field shows "A bracket, string, comment or URL is not closed. This CSS is not applied until it is." and none of the block's custom CSS applies until you close it. This field also holds up to 20,000 characters.

Give a block your own CSS classes

To add class names, click the plus button next to Advanced and select CSS classes. Enter the names separated by spaces. Then style every block with that class from the CSS field in Styles › Custom CSS:

.pull-quote {
  border-left: 4px solid var(--accent);
  padding-left: var(--fs-space-6);
  font-family: var(--font-heading);
}

The field also takes Tailwind CSS utility classes, and the theme builds the CSS for them. For example, uppercase tracking-widest sets a heading in spaced capitals, and md:hidden hides a block on screens 768 px wide and wider.

CSS variables

The theme sets these variables from your Styles. When you change a color or a size in Styles, CSS that uses its variable changes with it.

Colors

The color variables hold the colors of the scheme and mode each element sits in, so the same CSS works in a dark section and a light one.

To replace a color in every scheme and both modes, set its --fs- version on :root in the CSS field in Styles › Custom CSS. It works for every color above except the four status colors and the text on them:

:root {
  --fs-background: #faf8f5;
}

Fonts and text styles

For example, font-size: var(--fs-text-h3-size); gives an element the size of an H3 heading.

Widths and spacing

Corners and shadows

Motion

Custom presets have no variable name you can see in Styles, so use the theme presets above in CSS.

Fantasma saves your CSS as you type. Your Ghost site shows it after you publish your theme.