Common snippets
Ready-to-paste Code injection CSS for the most-requested Signal tweaks — resizing the logo, hiding a homepage section, and adjusting type.
Copy-paste CSS for the most common requests. Paste into Ghost Admin → Settings → Code injection → Site Header, wrapped in a <style> tag. For the full list of selectors, see the Hook reference.
One block is fine
You can keep all your tweaks in a single <style>…</style> block. Save Code injection, then hard-refresh your site (Cmd/Ctrl + Shift + R) to see changes.
Resize the logo
Your logo appears in three places, each in its own region: the site header, the footer, and the mobile menu. Set the height on whichever one you want to change:
<style>
/* Header logo (default 32px) */
[data-region="site-header"] img[data-part="logo"] { height: 44px; }
/* Footer logo (default 32px) */
[data-region="site-footer"] img[data-part="logo"] { height: 40px; }
/* Mobile menu logo */
[data-region="mobile-nav"] img[data-part="logo"] { height: 36px; }
</style>Width takes care of itself — the theme already sets width: auto, so the logo keeps its proportions.
Use `height`, not `max-height`
The theme gives the logo a fixed height, and max-height can only make something smaller than the height it already has — so a max-height larger than the current size does nothing at all. Always set height.
Why `img`
If you haven't uploaded a logo, the same data-part="logo" handle sits on the small circle mark the theme draws instead. Writing img[data-part="logo"] keeps your rule on real logo images, so the circle never gets stretched into an oval.
Hide a homepage section
Every homepage section is a data-region. Hide one you don't use — for example the sponsors band:
<style>
[data-region="sponsors"] { display: none; }
</style>Swap sponsors for any homepage region: featured-episodes, episode-feed, from-blog, platforms, hosts, guests, about, or membership (see the Hook reference).
The newsletter band is the one exception. Its handle sits just inside the section rather than on it, so hiding the handle alone would leave the section's empty spacing behind. Hide the section itself:
<style>
section:has(> [data-region="newsletter"]) { display: none; }
</style>Make episode titles bigger
Scope a data-part to its component so the rule only touches episode rows:
<style>
[data-component="episode-row"] [data-part="title"] {
font-size: 1.35rem;
}
</style>Tighten the footer text
<style>
[data-region="site-footer"] { font-size: 0.9rem; }
</style>Straight quotes only
If you paste from a word processor, plain quotes (") can turn into "smart quotes" that CSS doesn't understand. Paste into a plain-text editor first, or type the quotes directly in Ghost's Code injection box.
Related
- Hook reference — every selector you can target.
- Code injection — how the naming convention works.
Hook reference
Every stable data-* selector Signal exposes for Code injection — regions, components, variants, and parts — plus the protected names you must not rename.
Troubleshooting
Quick fixes for common Signal issues — theme upload, hidden settings, routes 404s, the persistent player, transcripts and chapters, listen links, and the Library.