Common snippets

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.

Resize the logo

The logo appears in the header masthead. Target its data-part and cap its height:

<style>
  [data-region="masthead"] [data-part="logo"] {
    max-height: 44px; /* default is around 32px */
    width: auto;
  }
</style>

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 region — featured-episodes, hosts, guests, newsletter, and so on (see the Hook reference).

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>

Related

• Hook reference — every selector you can target.
• Code injection — how the naming convention works.