Code injection

Want to nudge a colour, hide a section, or resize your logo without forking the theme? Signal gives every major part of the page a stable handle you can target with a few lines of CSS. You paste that CSS once into Ghost's Code injection and it sticks, even when you update the theme.

This guide comes in three parts — this page teaches the system, and two companion pages do the looking-up and the copy-pasting:

The naming convention

Signal labels its building blocks with a small, predictable set of HTML attributes. Once you know the four words below, you can usually guess the hook for something instead of looking it up:

• data-region marks a big structural area — the site header, a homepage section, the episode body, the footer. Usually one of each per page.
• data-component marks a reusable unit that can appear many times — an episode row, a guest card, the pagination bar.
• data-variant tells apart flavours of the same thing — for example which homepage hero layout is in use, or an audio episode header versus the default video one.
• data-part marks a piece inside a component or region — the title, kicker, excerpt, meta, image, plus Signal's own additions like logo, wordmark, duration, and poster. These names are the same everywhere.

To target any of them, use an attribute selector in CSS:

<style>
  /* A structural region */
  [data-region="site-footer"] { font-size: 0.95rem; }

  /* Every episode row on the site */
  [data-component="episode-row"] { /* ... */ }

  /* The headline inside any episode row, whatever element it uses */
  [data-component="episode-row"] [data-part="title"] { /* ... */ }
</style>

You compose these by nesting — region, then component (with its variant), then part — and you can scope a rule to one area of the page so it doesn't leak elsewhere.