Hi, in my homepage http://frosta.frostaporten.no/ I want to show more of the background image before the page content show up, like what I find in this site: https://www.visitharstad.com/
I have tried to make this possible by using a homepage post with the same image as the background, but the grey layer over the post makes the image not standing out as I want it. Do you have a better solution for this one?
Thanks,
Audun Kvamme
Hello,
You can remove the gradient if you like using this code:
.page .td-post-template-8 .td-post-header{
background-color:transparent!important;
}
.page .td-image-gradient-style8:after{
display:none!important;
}
And maybe a bit of a shadow to the text:
.page .td-post-template-8 .td-post-title{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
You can add the code in the theme panel ->custom css box.
I hope his helps
Thanks
Great solution! Worked out nice.
Thanks,
Audun
Hi again,
I liked the possibility of removing the gradient from the homepage post. Can this be done for other posts also, like for big grids and featured posts? I think many of my images appears very grey due to this.
Thanks again,
Audun
Hello,
Yes, the gradient can be removed from other elements as well.
You can use this code:
.td-grid-style-1 .td-module-thumb a:last-child:before{
display:none!important;
}
Thanks
Hi,
I experience that this solution only affects the posts situated in the homepage. What to do when I want to avoid the gradient on a general basis, for all posts and categories? Like showing http://frosta.frostaporten.no/category/hvaskjer/ the gradient appear despite the code in the custom css box…
Well there is no universal code as the theme has many elements and the gradient is not added in the same waqy on each one. The gradient you mention now on the category template is not even part of the blocks it is a category template . The code for it is separate from any other element:
.td-image-gradient-style8:after{
display:none!important;
}
.td_category_template_8 .td-category-header{
background-color:transparent!important;
}
Thanks.
