CSS Selector for changing text color

  • Author
    Posts
  • #2857853

    sarahfburns
    Member

    I’m trying to change the color on titles and headings on my site. I was able to change the body color using “body {color: #252887;}”
    but when I tried to use “h1 {color: #252887;}, nothing happened.
    The theme I am using is apparently overriding the h1 selector. I tried h2 and h3. Any ideas for how to get the text color I would like?

    Thank you!

    Sarah

    http://www.artprojectspace.com

    The blog I need help with is sarahfburns.com.

    #2858024

    nizamilputra
    Member

    Hi @sarahfburns,

    Please try this css,

    #page h1,
    #page h2,
    #page h3{
      color: #252887;
    }

    Let me know if you need another help.

    Thank you.

    #2858064

    chad1008
    Staff

    This is when CSS gets fun ;)

    CSS is all about specifics – if there are two rules for an h1‘s color, the more specific rule wins.

    For example – the CSS you’ve used so far sets a base color for h1, h2, and h3 elements.

    If I look at the front page of @sarahfburns‘s site, I can inspect the word Welcome (which is an h1).

    In the inspector panel, I can see that particular h1 has a class on it:

    <h1 class="entry-title">Welcome</h1>

    Over in the CSS of my inspector, there’s a style for that class:

    .page-title, .entry-title, .entry-title a {
        color: #333;
    }

    There are a couple of other elements sharing that style – but see the .entry-title in the middle?

    That means that even though you’ve set a color for h1 elements, this one has a more specific rule.

    Armed with this knowledge, we can write a style to override it!

    .entry-title {
        color: #252887;
    }

    That should change the color of Welcome on the home page – and of any other text that has a class of .entry-title elsewhere on the site :)

    #2858112

    sarahfburns
    Member

    @chad108 — incredibly helpful, thank you!

    #2858113

    sarahfburns
    Member

    @chad108 – I was able to fix the .entry-title text color Yay! And the video seemed really clear and logical but somehow I’m still lost when it comes to finding the CSS selector I need for other parts of the site. I’d like to change the Menu button text color as well. When I dig around it looks like maybe

    .main-navigation {
    color: #252887;
    }

    or

    .nav-menu {
    color: #252887;
    }

    should help but they don’t seem to have any effect. Any ideas? Thank you!!

    #2858114

    sarahfburns
    Member

    @nizamilputra – thank you for the suggestions, they are getting me closer to my goal as well!

    #2858115

    nizamilputra
    Member

    It’s getting closer @sarahfburns, every link end up with “a” selector.
    Please try this:

    .main-navigation a{
      color: #252887;
    }

    And this is for current menu color:

    .main-navigation li.current_page_item>a,
    .main-navigation li.current-menu-item>a {
        color: #4f4f4f;
    }

    #2858116

    chad1008
    Staff

    Agreed, the a is sometimes necessary to make the CSS specific enough.

    I use the Computed tab in my inspector a lot – rather than listing all of the styles that apply to an element, it shows you what the currently active value is – and depending on your browser it can help you locate it.

    In Chrome, for example, if I inspect a link and use the Computed tab (over on the right were CSS is displayed) I can see the current color, and click a little arrow to se the exact style that is defining the color. Then I know what I need to override in terms of specificity :)

    #2858119

    I need help to change the color of the tittle of my post.
    I changed the color already for the post itself, and used:
    div.entry-content{
    color: #404F66;
    }

    I want to use the same color for the tittle of the posts. what can I try?
    The blog I need help with is fabiscrapbook.com

    #2858120

    chad1008
    Staff

    Hi @fabiscrapbook :)

    It look like you’ve already found you can use the same style from above, like this:

    .entry-title {
        color: #404F66;
    }

    Nicely done :)

    Feel free to open a new thread if you need help with anything else!

    #2858121

    sarahfburns
    Member

    @chad1008 – maybe I should download Chrome and use it because I’m not seeing a Computed tab in Safari.

    @nizamilputra – thank you – that worked.

    Not to bug you guys even more, but I think the last text color hurdle I have to resolve is when I highlight the text in the menu, both the highlighted text and drop down menu are gray and I want a custom color. Any idea what the selector is for this issue?

    Thank you!!

    #2858122

    sarahfburns
    Member

    Oh I think I found it!! I put #4f4f4f into the search bar in the inspector and found

    .main-navigation a:hover,
    .main-navigation ul > :hover > a,
    .main-navigation ul > .focus > a {
    color: #4f4f4f;

    I’m going to test it.

    #2858123

    sarahfburns
    Member

    I managed to get that to work but can’t find the selector for the sub menu or drop down menu — not sure what it should be called.

    #2858124

    chad1008
    Staff

    maybe I should download Chrome and use it because I’m not seeing a Computed tab in Safari

    Just opened Safari to double check – if you click on Styles over on the far right hand pane it should open a little menu where you can choose Computed :)

    when I highlight the text in the menu, both the highlighted text and drop down menu are gray and I want a custom color. Any idea what the selector is for this issue? …I managed to get that to work but can’t find the selector for the sub menu or drop down menu — not sure what it should be called.

    Try .main-navigation ul ul a :)

    If we add that to the style you mentioned in your last post, it would look like this (using your preferred color)

    .main-navigation a:hover,
    .main-navigation ul > :hover > a,
    .main-navigation ul > .focus > a,
    .main-navigation ul ul a {
    	color: #da2782;
    }

    Does that look like what you wanted? :)

The topic ‘CSS Selector for changing text color’ is closed to new replies.