Site logo

Archived topic

Page Hero overlay colours

5 replies · Started by Tania on November 2, 2020

Viewing posts 1–6 of 6

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. :)

This archived topic is closed to new replies.