CSS Selector for changing text color
-
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: (visible only to logged in users)
-
Hi @sarahfburns,
Please try this css,
#page h1, #page h2, #page h3{ color: #252887; }Let me know if you need another help.
Thank you.
-
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 :)
-
@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!!
-
@nizamilputra – thank you for the suggestions, they are getting me closer to my goal as well!
-
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; } -
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 :)
-
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 -
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!
-
staff-loquaciousloon – 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!!
-
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.
-
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.
-
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.
WordPress.com Forums 