Code Injection to Disable Cover Image Overlay

Developer help
1

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
2

I think this might do the trick:

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

3

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

4

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.

5

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
6

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

G!

1 Like