Hi There
I’m using the EDITION theme for my blog. I need to remove the grey overlay that dulls/greys the Publication cover image. I found a Code Injection suggestion on the forum and tried to use it to fix my problem. But it did not help. I used the below code:
.is-cover::before { background-color: transparent }Please refer to the attached picture, the preview on the right is grey, I uploaded a white cover, on the left.
THANKS
Did you get an answer to this? I’m trying to do the same, remove the gray tint.
Hi! I’m only just learning how to do this sort of thing myself, so the following may be completely incorrect. So, this comes with all the usual caveats and then some and refers to using Ghost Pro. If you are self hosting, some or all of this may be very different (I have no idea!).
I think you need to edit a css file in the Edition Theme. You can download a copy of the theme Zip file from the Ghost settings area you use to change themes. It can be unzipped to reveal all the folders and files that comprise the Theme (different from the YAML file remember). In there you will find the css file that I believe needs to be edited in order to remove that overlay. Once you have the theme file unzipped, find “cover.css” by following this flow:-
“ASSESTS—>CSS—>SITE—>cover.css
Now, in there, I think you’ll find the lines of css that insert the grey overlay. You can just change the relevant attribute or, indeed, delete it, then save it of course. Then, you will need to zip up all the files and folders again and upload them to your site and activate the uploaded theme. Consider adding some “commented out” text above the change: that’s to remind yourself if you revisit where you made the change and why you did so. Also, remember to keep an original copy of the unchanged ‘cover.css’ file separately, just in case, which is especially important if you have made other changes to the theme files. If this is the only change and you make a boo-boo, then reloading a ‘vanilla’ version of the “Edition” theme will fix all that. Consider changing the Theme file name to denote the change you made to avoid any confusion later. And remember, if the theme is updated, by Ghost, there’s a possibility the change you made might be overwritten.
I am not going to tell you which lines of css to edit. If you are unable to recognise them, perhaps you need a better helper than ‘newby’ me?
Finally, consider isolating the code you plan to alter and changing it in an open version of the website home (cover) page by means of the developer tools in Chrome browser. It will show you if you are on the right track when the overlay disappears🥳
I’m going to offer an alternate approach here that’s a little simpler than editing the theme files. In code injection header (under the settings menu - look for the gear)
<style>
.with-full-cover .cover:before {
background-color: unset!important;
}
</style>
That fixes the demo version of edition, with the full header. If it doesn’t fix your version, please link your site so I can have a peek. :) Or try .cover:before { as the full the second line.
Ghost official tutorial: How to use Code Injection in Ghost
A walk-through using code injection here: Code Injection 101
Thank you! I’m new at this and not sure I understand all of that, but I appreciate your reply.
That worked! Thank you so much. As I said I’m new to this, I appreciate your help.