Change Color Of Home Page Title Text

  • I’m trying to change the color of the H2 text on my home page but when add the color to the css it does not make any changes.

    I inspected it with firebug and there seems to be another css code over writing the css code I wrote. When I delete the problem code on firebug the text then changes to the desired color.

    My problem is finding the problem causing css code. This is where firebug says the code is:

    https://www.domain.com/subdomain/

    This is the code it shows. I just need to find it to delete the color:#000000

    #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    color: #000000;

    I have checked all my Style file in my theme and I cannot find where to make this change anywhere. I’m using DW to edit the site and its a Themeforest>Peekaboo Theme. Any suggestions as to where to find this css code will be greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)

  • A link to your site would help.

    It looks to me as though you just need to use specificity to get the correct rule selected, but without being able to look at your page it’s very hard to say.

    Cheers

    PAE

    Thread Starter jltorres83

    (@jltorres83)

    ecraftmedia(dot)com/worldclassac

    Firebug informs that the style rule is in the HTML file, and a quick ‘View Source’ confirms that this is the case. So you’re going to have to use specificity. Something like:

    body.home #main h2 {
  /* Your properties */
}

    The way that the cascade and specificity work is explained on this page.

    HTH

    PAE

    Thread Starter jltorres83

    (@jltorres83)

    Where do I put that code? This is what I have on my css line that controls those headings:

    29 .replace { color:#0082c0;}

    Presumably the ’29’ in the code you quote is a line number, so I’ll ignore that. The actual CSS instructs the browser to use a background colour of #0082C0 on any element that has the class of ‘replace’.

    If you look in Firebug, you will see that all your pages h2 and h3 elements have the class ‘replace’, but you will also see that the colour set there is overridden by the rule for ‘#main h2, #main h3’ and so on. This is because an id trumps a class in specificity as you will see if you follow the link I gave you in my last post.

    So you need a rule like the one I gave you, to which you can add ‘.replace’ if you like. For example, this would do:

    body.home #main h2.replace {
  /* your properties */
}

    If you do that, the rule will be even more specific than the one I gave you.

    As for where you put the rule, the best thing would be for you to create a child theme and put it there, at the end of the child theme’s style sheet, since child themes are the only recommended way of making changes to themes. However if you’re prepared to take the risk of updates to the theme overwriting your changes and don’t want to create a child theme, you should add the new rule to the end of the theme’s style sheet.

    HTH

    PAE

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Color Of Home Page Title Text’ is closed to new replies.