Headline Text Gradient Issues

[danielhollands]

Hi there,

I’m having trouble putting a gradient on my headline text. In the attached screenshot, you can see the code works and is putting the gradient on, but the problem is this is targeting ALL H1s on the page, I ONLY want to target this particular headline.

The reason for that is I want to put different gradients on different headlines.

I’ve tried using the $el to target this particular headline but doesn’t seem to work.
This is all in the Element CSS section I am typing this in.

How can I modify this code to ONLY target this headline, so I can replicate a different colour gradient over different headlines?

[ruenel]

Hello There,

Thanks for writing in! Please make sure that you have inserted the correct code. Please try this code:

$el {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

I am using a background color generator to get the correct css. You can check this out: http://www.colorzilla.com/gradient-editor/

Hope this helps.

[danielhollands]

Thanks RueNel, but thats giving me a gradient background on the text which is not what I want.

I want to actually make the text have the gradient. Please see my previous screenshot and you can see the orange-red gradient on the text.

[christopher]

Hi Daniel,

Actually, your CSS code itself is correct, the problem is that you do not have a correct selector to target the specific h1 tag. I am not sure how you added the h1 tag if you used a text element and added the h1 tag inside that, then you need to go to the Element CSS option of the text element and add the code like this:

$el h1 {
/* add your CSS code here */
}

The reason that the selector is $el h1 because the $el selects the wrapper element of the text element and you need to focus the code on the h1 tag inside that text element.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[danielhollands]

Perfect, thanks Christopher.

Adding the h1 sorted it all out.

Works like a charm!

[christopher]

Perfect! Glad that we cold be of a help