How do I remove gray overlay from Solo theme?

Hi, just trying to remove the gray overlay from the cover image/background banner on the Solo theme homepage. I’ve tried some code injection shared here for other Ghost themes but it didn’t work. (Which makes sense! But thought I’d give it a go.) Just setting up my site. Here’s the current url. https://okay.ghost.io

I just played around with the developer tools in my browser, so not tested through code injection, but this CSS worked for me:

<style>
.gh-header.has-background-image:before {
    opacity:0;
}
</style>

Jannis, I really appreciate this! I am going to give it a try. Thank you!

1 Like

IT WORKED. Thank you!

1 Like

Hi everyone,

I played around with this in the code injection on using the “edition” theme, but can’t get it to work. Any idea how I would make it work on this theme with code injection?

Thanks a lot in advance!

BW,
AB

Yeah, the themes have different CSS classes.

For the Edition theme this should work:

<style>
.with-full-cover .cover:before {
    opacity: 0;
}
</style>
1 Like

Thank you very much! :pray:
Is there any way I could have figured that one out myself e.g., by inspecting the element? I’m currently trying to figure out how to change the navigation bar text color since there is now a low contrast between the words/links and the background.

Best,
AB

Absolutely!

You can inspect your site by opening your browser’s developer tools – usually by right-clicking on an element and then selecting “Inspect”. Then you’ll see all the CSS classes that are applied and can try out what modifications work.

2 Likes

OMG :exploding_head: You sir, have just taught me how to fish. Thank you very much! :pray: :pray: :pray:

I bet I’ll still come back to ask some less n00b-ish questions, but that just helped me A LOT!

Best,
AB

2 Likes

Hey, another beginner here! Wondering if you figured out the navigation bar text color… currently trying to figure out the same thing on the Edition theme. Want to change the header menu and actions colors