Archived topic
Page Hero overlay colours
5 replies · Started by Tania on November 2, 2020
I am trying to customise library template site SERVICES.
I have changed the home page's hero & header gradient- overlay from blue to dark green and purple.
However, I can't customise the gradient overlay of global page header, however, I was able to change the background photo.
In elements backgrounds are inactive.
How can I do this?
Hi,
By default, the Service site template adds a custom CSS that styles the page hero's gradient through a .gradient-overlay class.
On your site's Dashboard > Appearance > Customize > Additional CSS, you should be able to find a CSS code that looks something like this:
/* page header gradient overlay */
.gradient-overlay {
position: relative;
}
.gradient-overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(135deg, rgba(24,106,178,0.9) 20%, rgba(0,175,229,0.9) 80%);
}
.gradient-overlay .inside-page-hero {
z-index: 1;
position: relative;
}
Change the value of this line to the color of your preference.
background: linear-gradient(135deg, rgba(24,106,178,0.9) 20%, rgba(0,175,229,0.9) 80%);
Thanks a lot. It was resolved and has worked.
I have another query.
I want to customise blog page. Where there is an excerpt and read more link, on services sample site.
I wrote and post which has automatically replaced the sample excerpt. However, the title of my post is added at the beginning of the excerpt as a starting line of the paragraph. There is no way I can take this line off or could edit. What should I do?
Thanks a lot. It was resolved and has worked.
No problem. Glad it worked for you.
As for the other query: As its a completely different issue, can you open a new topic about it?
We'll make sure to address it. Thank you. :)
Sure Thanks.
Thanks. No problem. :)