Code Injection to Disable Cover Image Overlay

Hello,

Possibly absurdly easy question but I can’t find any consolation after an hour of vigorous googling.

Using code injection, is it possible to disable the tint/slightly opaque/image overlay that the default Casper theme applies to a site’s main cover image? I can’t quite figure it out and it’s driving me nuts. I am, of course, also prepared to edit the actual theme files but am sure there is a better way.

Cheers,

G!

    • Version 2.3.0
  • Database mysql
  • Browser safari

I think this might do the trick:

<style>.site-header:before {background: none}</style>

You, good sir, are a genius. Thank you.

Out of curiosity, how do you know which descriptors (e.g. .site-header) correspond to which bits of the finished site? Are you slogging through Chrome’s code inspector or is there a list up somewhere that has eluded me.

For example: if I wanted to change colour of the various Navigation links (usually, Home, About, etc.), what is the best practise for figuring this out?

Thanks again.

G.

Yep, I’m using the chrome inspector :slight_smile: I usually right click -> inspect element and move around from there. You’re not always going to find what you’re looking for immediately since the corresponding style could be anywhere. I’ve worked with Casper a bit, so I have a bit more intuition as to where to look

If you’re trying to change the navigation color, your best bet is probably

<style>.nav li a{color: coral}</style>

1 Like

Thanks so much. You’ve both taught a man to fish — and given him some much needed fish.

G!

1 Like