How to change H2 color inside content

[daintyg]

Follow up to https://theme.co/apex/forum/t/how-do-i-change-the-color-of-my-h2-heading/62779

I am not sure if you are not understanding but I do not want my home page colors to change, I just want the H2 in my content to be Pink and blue hover. I entered the code again and my home page colors are changing.

Example

When I use the H2 on my blog with a link it shows as BLACK but I need it to be Deep Pink #ff1493 rgb(255,20,147) and Deep Sky Blue #00bfff rgb(0,191,255) when hover.

Also if my post title is H1 why did the colors change when I entered the code that you gave me for H2?

[nabeel]

Hi Shamalee,

Thank you for reaching out to us. The code provided in the previous thread is for H2 only and it should not change the colors of H1 unless you’ve added code for H1 as well. Please check your custom CSS and remove the customization for H1 tags.

To exclude the titles from taking effect you can use the following code:

.entry-content h2 a {
	color: #ff1493 !important;
}
.entry-content h2:hover a {
	color: #00bfff !important;
}

The above code is expecting that you’re adding the link with H2 tag in this way:

<h2><a href="#">Link</a></h2>

Please clear all caches after adding the code as I see you’ve active plugin cache and the content is being served by the cache to avoid caching issues. Let us know how this goes!

[benursal]

Hi Shamalee,

I understand. It looks like our initial coding recommendation was general and affects the entire site.

Kudos to you for figuring out how to specify the code to only the blog entry heading 2. And I’m referring to this code you’ve added below:

.entry-content h2 a {
	color: #ff1493 !important;
}

.entry-content h2:hover a {
	color: #00bfff !important;
}

The idea is correct and I think you’re very close to solving it. Please use .entry-title instead of .entry-content on both codes. So, the code will now be like this:

.entry-title h2 a {
	color: #ff1493 !important;
}

.entry-title h2:hover a {
	color: #00bfff !important;
}

If that works, I would also suggest that you try removing the !important keyword in both instances to see if everything still works without it. If not, then just leave it there.

Tell us how it goes. And if at this point we still misunderstood what you wanted to achieve, continue to reach out to us until it’s sorted.

All our best.

[benursal]

Hi Shamalee,

I noticed my earlier coding recommendation was incorrect. Please change it to:

.entry-title a {
	color: #ff1493 !important;
}

.entry-title a:hover{
	color: #00bfff !important;
}

Apologies for the confusion.