Publication cover image and tagline overlaying each other on Source v1.5.0 (Ghost Pro)

Themes
1

Hi all,

My website is at news.enm.life. I’m using Ghost(Pro) with the Source v1.5.0 theme, and I’m running into a persistent problem with my publication cover and tagline.

My publication cover image (uploaded under Settings → Design & Branding → Site Cover Image) displays behind the site tagline, and the tagline sits directly on top of the image with a gray overlay tint.

What I’m trying to do:

  • Move the tagline below the logo, not over the cover image.

  • Remove the dark overlay tint.

  • Keep the cover image responsive on desktop and mobile (not cropped).

I’ve tried injecting custom CSS in Code Injection → Site Header/Site Footer, but it doesn’t seem to override the theme’s built-in markup. I suspect the overlay and tagline positioning are baked into hero.hbs or a similar partial, but I can’t access theme files directly on Ghost(Pro) Starter.

Question:

  • Is there a supported way (via Design settings, Code Injection, or theme override) to move the tagline below the logo and disable the overlay without editing the theme files?

  • If not, how can I download and edit the theme locally while on a Ghost(Pro) plan?

Screenshots linked to for reference:

  • Screenshot 1(“gray overlay with tagline on top”) — shows the original problem clearly: tagline overlaying the image and gray tint visible.
  • Screenshot 2 (“Design & Branding settings showing Source v1.5.0”) — shows your theme configuration and that you’re on Ghost (Pro), which matters for support permissions.
  • Screenshot 3 (“white background, tagline faint”) — shows the current broken state after CSS/JS attempts, proving the injected code affects the header container.

Thanks in advance. I’m hoping to find the cleanest supported way to resolve this.

At your service,
Michael

2

While you can download a theme on Ghost’s starter plan (I think), you definitely can’t upload an edited/custom theme. (You can absolutely edit a Ghost theme while hosted on Ghost Pro, but you need their Publisher plan or higher to do so.)

You can do a lot with code injection, including overriding any CSS you need to override. Looks like the structure of the page is pretty compatible with what you’re trying to do, so you probably “just” need to take the absolute off the image, adjust z-index in a couple spots, unset the “content” on the ::before (source of grey overlay), etc. If you can’t sort it out, you could hire someone to do it, but you’re presumably on the starter plan because you’re not able to spend much on your site, so maybe the hints above will let you get it sorted out.

I’m a huge fan of Ghost Pro, especially since hosting there supports the dev team that brings us Ghost, but their starter plan is super limited. For that price, you’d probably be happier over at Magic Pages.

3

I’m struggling with the same issue! If you find a solution (like a code injection that works!) please share it here.

1 Like