Support » Theme: Sela » Change Page Title Color On Only One Page

  • Resolved jsg442

    (@jsg442)


    Hello,

    Apologies if this has been asked. I tried to find the answer but wasn’t sure. I would like to change the color of the page title text to red, only on the front page. To be totally clear, this is not the header text (which I figured out how to do in the Customizer), but the page title that precedes the text on the front page. I would prefer to change it just on that page, not on any other pages on the site. I imagine the answer lies in some clever CSS code, which is sadly outside of my technical capabilities. Any help would be greatly appreciated!

    Thanks,
    Joel

    • This topic was modified 2 years, 3 months ago by  jsg442.
Viewing 8 replies - 1 through 8 (of 8 total)
  • 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 2 years, 3 months ago by  jsg442.
    • This reply was modified 2 years, 3 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.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    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!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change Page Title Color On Only One Page’ is closed to new replies.