There is an option to have a background overlay on the header image on each blog post. Is there a way to replicate this for my portfolio items? I've been searching for weeks for the answer, but can't seem to find it.
Thanks Andrew, but I'm wondering how you get the same kind of effect you get on the blog background overlay. They seem very different. On the portfolio option, it just puts a colour over the image, which doesn't look great at all. Whereas on the blog pages, it looks textured/vignetted and visually strong. Do you see what I mean?
I've added screen shots of the difference.
Is there any way to replicate this on the portfolio items?
Sorry to sound contradictory but even in the code sent to the page there is no difference in the two.
Maybe we are missing it but there is not textured effect that is applied.
There's definitely a difference in the overlay that is being applied.
The blog page has a checkbox that reads "Background Overlay. This will add a slight overlay onto your header which will allow lighter text to be easily visible on light images". Whereas the Portfolio item has a colour picker that reads "Page Header Overlay Color. This will be applied ontop on your page header BG image (if supplied)". I've attached screen grabs.
The portfolio option does not look anywhere near as good as the blog option, which is why I wanted to replicate the Background Overlay from the blog to the portfolio.
The only difference is the value of Opacity . The Blog header has it set to 0.4 whereas on Products its 0.65 .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
There is an option to have a background overlay on the header image on each blog post. Is there a way to replicate this for my portfolio items? I've been searching for weeks for the answer, but can't seem to find it.
Any help would be hugely appreciated.
All the best,
Tim
Hi Tim,
There is a page header settings section in the portfolio edit page area.
Use that to set a page header image and then set a page header image overlay color.
Cheers.
Thanks Andrew, but I'm wondering how you get the same kind of effect you get on the blog background overlay. They seem very different. On the portfolio option, it just puts a colour over the image, which doesn't look great at all. Whereas on the blog pages, it looks textured/vignetted and visually strong. Do you see what I mean?
I've added screen shots of the difference.
Is there any way to replicate this on the portfolio items?
Hi there,
There are no effects on top of the post header image here https://filmandcontent.co.uk/2018/06/20/the-customer-journey-starts-before-they-book-for-travel-brands/ and the portfolio item header here https://filmandcontent.co.uk/portfolio/iceland-air-start-your-story-in-the-middle/
Sorry to sound contradictory but even in the code sent to the page there is no difference in the two. Maybe we are missing it but there is not textured effect that is applied.
Please clarify.
Hi Andrew,
There's definitely a difference in the overlay that is being applied.
The blog page has a checkbox that reads "Background Overlay. This will add a slight overlay onto your header which will allow lighter text to be easily visible on light images". Whereas the Portfolio item has a colour picker that reads "Page Header Overlay Color. This will be applied ontop on your page header BG image (if supplied)". I've attached screen grabs.
The portfolio option does not look anywhere near as good as the blog option, which is why I wanted to replicate the Background Overlay from the blog to the portfolio.
Thanks again and sorry for being a pain!
All the best,
Tim
Hey Again,
The only difference is the value of Opacity . The Blog header has it set to 0.4 whereas on Products its 0.65 .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.page-header-overlay-color:after { opacity: 0.4 !important; }Thanks
ThemeNectar Support Team
Yes! That looks so much better. Thank you! :-)