Code Injection CSS/JS not overriding Casper theme on tag page (visible in source)

Themes
1

Hi everyone,

I’m customizing the latest Casper theme on Ghost(Pro) and running into an issue where CSS and JS added via Settings → Code Injection appear correctly in view-source, but don’t actually override the rendered styles.

Site: https://news.enm.life

Affected page: https://news.enm.life/tag/news-brief/

I’m injecting both a block (color override for .gh-article-title) and a small block to force inline color. Both appear in the source, but neither applies — even with !important. Console query finds the element (NodeList(1)), but styles are still coming from Casper’s screen.css.

Screenshot attached showing page, console output, and code in context.

Google Photos screenshot

Anyone run into this before or know if Casper’s re-render timing interferes with Code Injection?

— Michael Rubin, editor@enm.life

2

What specifically are you injecting?

3

Thanks, Cathy! Here’s what I’m injecting in **Settings → Code Injection → Site Header
**
<style> body.tag-news-brief h1.gh-article-title.is-title a { color: #1a0dab !important; text-decoration: none !important; } body.tag-news-brief h1.gh-article-title.is-title a:hover { text-decoration: underline !important; } </style>

I’ve confirmed the code appears correctly in the rendered HTML (view-source shows it in <head>), but the computed styles still come from Casper’s screen.css.

I also tried scoping more tightly with:

html body.tag-news-brief .gh-article-title.is-title a { … }

Same result — selector is found in document.querySelectorAll(), but the style doesn’t override.

Do you know if Casper’s build (on Ghost Pro) defers part of its CSS load until after Code Injection is parsed, or if it’s sandboxed differently on tag pages?

…Michael

4

You don’t appear to have a tag with the slug news-brief. I did look at another tag page, but you don’t have a h1 tag that contains an a, so there’s nothing with that selector.

1 Like
5

Thanks, Cathy. You were absolutely right about the selector mismatch. The tag slug had been renamed from news-brief to enm-newswire, so none of my injected rules were matching anything in the DOM.

After correcting the selector, I ran into a second wrinkle: the Source theme’s CSS (screen.css) was reloading after my injected <style> block, which meant Ghost(Pro) was overriding my color and text-decoration rules even with !important.

I ended up fixing it by keeping the corrected CSS in the header and adding a small JavaScript snippet in the footer that waits for the DOM to load and then appends the style again. That forces my overrides to load last and wins the cascade, no matter how the theme updates or reorders its assets.

Here’s the simplified takeaway for anyone else who runs into this:

  1. Double-check your tag slug (the body.tag-… selector must match exactly).

  2. If the injected CSS shows up in view-source but not in the computed styles, Ghost(Pro)’s asset order may be the culprit. A late-load script can reapply the override reliably.

Appreciate the nudge in the right direction! The fix is working perfectly now.

At your service,
Michael