Change Page Title Color On Only One Page

Hello jsg442,

Add below css code into your active child theme’s style.css file.

Note : Don’t modify your theme. Use child theme for any modification.


.home .entry-title {
color: #f71616 ;
}


Hope this will helps you.

Thanks!

Worked perfectly, thank you! If I could bother you for one more little thing, how could I modify that code so the text is also in bold? Thanks again!!

I think I figured it out… this is how I modified the code and it seems to do the trick:

.home .entry-title {
color: #f71616 ; font-weight: bold
}

The only problem is that I just noticed, it seems this code is also modifying the text of the by-line of the 2 testimonials on the front page. Any way to limit the changes so it just affects the page title and not the testimonials section? Thanks again

• This reply was modified 7 years, 6 months ago by jsg442.
• This reply was modified 7 years, 6 months ago by bdbrown.

I did a bit of research and took a crack at some CSS code, and it seems I solved the issue I mentioned above. Specifically the problem that when I modify the home page title to be a different color or font size for example, the testimonials by-line on the front page was also modified. I am posting the below code to check with everyone here much smarter than myself with CSS to see if there is any issue with the code. If not, maybe it can help someone else who runs into a similar problem.

.home .entry-title {
	color: #f45b41;
	font-weight: bold;
	font-size: 30px;
}
.jetpack-testimonial .entry-title,
.jetpack-testimonial-shortcode .testimonial-entry-title {
	font-size: 14px;
	color: #41b2f4;
}

In this way the font size and color of the testimonial by-line is not affected by changes to these properties on the page title. Much appreciation to all of the regular contributors here, as without searching through past issues I would have no idea where to even begin.

Hi @jsg442,

If you want to target just the title of the front page (over the large main image), you can use this:

.home .hero .entry-title {
	color: #f45b41;
	font-weight: bold;
	font-size: 30px;
}

This is a bit more specific than the top portion of your code above, so it doesn’t affect the testimonials at all.

Looks like you’re getting some good CSS help here.

Use child theme for any modification.

Just wanted to mention that you don’t need to make a child theme for adding CSS alone unless you need to make other, non-CSS changes as well. WordPress now includes a CSS editor in the Customizer – look for the Additional CSS panel. You may have already discovered this but I just wanted to mention it explicitly in case you hadn’t, as it makes things a bit simpler. ??

Thank you for the tips, appreciate all the help. I did notice that it is easy to make the CSS changes with the built in editor. Will test the code modification that you mention David. Thanks again everyone!

Lovely! Just let us know if you run into any trouble with it.