For Pages, there is an option for a Page Header Overlay Color, but there is not for Posts. I would like to add a dark overlay for the images in the post header for all posts. It would be the same color for every post, so it's not something that I need to change for different kinds of posts. How can I add this?
As a follow-up, at the bottom of the post it has links for Previous and Next posts. When you mouseover those it adds a dark overlay to the image, which I like. Can I add an overlay to the images when they are in their resting (i.e. non-hover) states?
I'm having a similar problem, I want to increase the color overlay opacity for the post header image - the CSS code down below works only in case if Blog Header Type is set to Variable height. My header is Fullscreen, and it doesn't seem to work.
I've set up the Blog Header Type to "Fullscreen with meta under". Here are the screenshots - when set to "Variable height minimal", the overlay color adjustment works, but not in the fullscreen case.
For Pages, there is an option for a Page Header Overlay Color, but there is not for Posts. I would like to add a dark overlay for the images in the post header for all posts. It would be the same color for every post, so it's not something that I need to change for different kinds of posts. How can I add this?
Hi Louis,
You could this CSS to add an overlay on you single post page like this one - https://www.freewaychurch.cc/2019/11/05/whats-happening-freeway/. We set a featured image since a featured image is needed:
body.single-post .page-header-bg-image:after{ background-color: rgba(45,100,45,0.60) !important; }add it to salient \ general settings - css script related - custom css code.
Adjust the 45,100,45 values to adjust the color and the 0.6 to adjust the opacity \ intensity of the color.
Hope this helps.
That worked perfectly Andrew. Thank you!
As a follow-up, at the bottom of the post it has links for Previous and Next posts. When you mouseover those it adds a dark overlay to the image, which I like. Can I add an overlay to the images when they are in their resting (i.e. non-hover) states?
Hi Louis,
You can use this CSS for adding an overlay on the resting \ non-hover:
.blog_next_prev_buttons[data-style="fullwidth_next_prev"] ul .next-post:after { background-color: rgba(130,130,13,0.5) !important; }Hope this helps.
I'm having a similar problem, I want to increase the color overlay opacity for the post header image - the CSS code down below works only in case if Blog Header Type is set to Variable height. My header is Fullscreen, and it doesn't seem to work.
Hi Evita,
Can you share a link to your website where you set that.
Thanks.
Please see http://eviinotes.com/blogs/pirma-diena/
I've set up the Blog Header Type to "Fullscreen with meta under". Here are the screenshots - when set to "Variable height minimal", the overlay color adjustment works, but not in the fullscreen case.
Hi Evita,
Use the following custom css:
.page-header-bg-image { opacity: .5; }Hope this helps.
That works! Thanks a lot!