How to change site title text color
-
This is from my style.css:
.site-title {
font-size: 80px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 10px;
}I added color:#8000FF into it. The color doesn’t change. No any effect. What’s wrongγ
-
Hi marlonmin,
This looks like a basic CSS issue. Either the theme that you’re using doesn’t use .site-title for the title color or something else in the CSS is overriding it.
Usually the first place I check if I know that my CSS selector is correct is for typos. If it’s not a typo, you can try adding !important to the end of your color declaration. If you do this (below) and it works, that means something else is conflicting with your CSS.
color: #8000FF !important;
That said, using !important is not something that is advisable because it will override any other color changes you may want to make to the title too. E.g. you might have to use it for hover colors too so you would find yourself putting it at the end of everything after a while.
I am using twenty thirteen, and .site-title is right. I can change the size in that section. Wow, !important works. What does it mean?
!important is a CSS command for overriding other CSS commands. If that is working then that means there is something else in the theme that is conflicting with the code you wrote.
An alternative to using !important that is the only option shy of more advanced CSS rules is to move that whole block of CSS that you mentioned above (without the !important) to the bottom of your style.css file. That should work too. If it doesn’t, then that probably means one of your plugins is causing the issue.
Technically !important does work… it’s just not recommended since it tends to cause conflicts with other CSS over time if you use it a lot.
Are you familiar with Twenty Thirteen theme? These are not my own CSS code. Similarly, I want to change the color of navigation bar, and it has no effect either.
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
font-weight: bold;
color: #FFFF00
}I added ‘font-weight’ and ‘color’ to this selector. font-weight takes effect, but color doesn’t. What’s wrong with it?
It looks like something you have on your site is causing an override with your CSS changes. That means you are going to keep running into this until you identify what’s causing those overrides and work around the problem – especially if the !important trick keeps working for you. If the !important trick doesn’t work, then you could also be looking at a typo. Either that or you’re running into some sort of caching issue. Have you tried clearing your browser cache?
If you keep running into problems like this, it might make sense to bring in some outside help. Full disclosure is that this is what we do for a living so we could take a look and try to point you in a better direction, but we’d probably have to charge something to do so. Depends a bit on what you’d need as to the cost of such a thing, but the option is out there if you need it.
Give the extra items I mentioned here a look and see if any of those work out. If not, let me know and we can get involved directly to help you out if that’s an option for you too.
@vrazer: Please do not solicit private contact. Suggesting that others to contact you off forum is really frowned upon here.
Additionally, the point of these community-based forums is to help each other in a public space so that the whole community can benefit from the discussion and any solutions proposed. Private discussions take this benefit away.
No problem, @esmi. That was not the intention in the first place. Given that the situation was unique to this WordPress setup and not just a general issue, it was the only remaining advise we could offer.
In situations where a problem is unique to an individual’s particular blend of plugins, themes, CSS, etc and the only solution is to either recommend learning a technology or asking for help, what would you recommend? Just recommending learning the technology or reaching out to a professional of some sort (in general)? Refraining from offering any further help? What would you recommend if someone asks us for such help without “solicitation”?
Honestly, I’m not looking for business here. We have plenty already. We’re just interested in helping the community and when a situation presents itself that requires pro grade help, I just generally don’t like leaving people with a “good luck with that”. If you have insights into how we could be more helpful in such situations, we’d like to participate in that way.
Looking forward to your feedback. Thanks for the clarifications, @esmi.
@marlonmin? Please excuse me while I go off topic for a minute.
@vrazer I’m going take the liberty of replying on Esmi’s behalf for now.
Given that the situation was unique to this WordPress setup and not just a general issue, it was the only remaining advise we could offer.
Thanks for helping out. Please do not offer that advice again of contacting you.
what would you recommend?
Keep forum support on the forum. Do not attempt to use these forums to contact people off of the forums and certainly do not ever use these forums to promote yourself or any service you may offer.
That’s not a judgement on you or your behavior and I’m not accusing you of any ill will.
You see, it’s doing things like that that has lead to abusive behavior in the past.
It’s something that was touched upon not that long ago. You can read the summary of that conversation at this link. It’s the item labeled “Contacting people off forum”.
and when a situation presents itself that requires pro grade help, I just generally don’t like leaving people with a “good luck with that”.
Then give other volunteers a chance to help. You do not have to solve all problems here. If you really feel that another member may need “pro grade” support them you can encourage them to post to the jobs site.
Do not recommend conversationally that you or your company offers that service via your web site. The jobs site is sufficiently neutral for that purpose.
Back to the topic at hand.
@marlonmin? I’m sorry about the sidebar. π
Are you familiar with Twenty Thirteen theme? These are not my own CSS code. Similarly, I want to change the color of navigation bar, and it has no effect either.
I may have missed it but can you provide a link to your site running that theme? I think I may be able to offer some tangible step-by-steps but having a real site to look at really helps me do that.
If you can’t provide a link then can you use http://wp-themes.com/twentythirteen/ as a reference? That’s a WordPress.ORG site BTW for theme previews.
@jan Thank you for the clarifications. We’ll see what we can do within those bounds. I’m sure there may be others that have no intent in doing anything other than ripping off the community, but that is definitely not what we’re after. Quite to the contrary, I’ve debated having some of my staff help contribute to WordPress core code on my dime more than once and thought I would start getting involved myself via volunteer efforts in the forums in the meantime to see what the community is like. Admittedly this conversation is not part of the way I planned to get involved and is a bit more adversarial than I had hoped, but lesson learned. We’ll change course accordingly. I appreciate you taking the time to explain that and your volunteer efforts on the WordPress forums in general.
@marlinmin Apologies for the distraction from your question. Obviously that is not helpful to you and it was never part of our interest in conversing with you. Jan’s recommendation of sharing the link would be a good idea. That would allow the community to help you in a more specific way to your issue too.
Thank you all for the discussions and advices, and I think I have eventually solved that problem. In order to change the text color of the main menu, it works here by changing the color setting:
.nav-menu li a {
color: #CC0066;
display: block;
font-size: 15px;
line-height: 0.6;
padding: 15px 20px;
text-decoration: none;
}
It works in this selector. Initially, I tired here:
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 35px;
position: relative;
background-color: #FFFF99
}The main-navigation’s color settting doesn’t work.
Thank you again!
I’m glad you sorted it out but I’m going to copy part of a really good reply from Kathryn Presner yesterday:
Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
That reply give you all the neat cautions of editing the original theme files. Copying her reply is a form of flattery. π
the site is http://www.chillnfill.com
I would like to change the color of the menu item called “Live Tap List” – actually only the word “Live” but I will settle for the three words if it simplifies matters.
I used the “Inspect element” and found the line where the title “Live Tap List” is.
<div id=”post-body-content”><div id=”titlediv”>
<div id=”titlewrap”>
<label id=”title-prompt-text” class=”screen-reader-text” for=”title”></label><input id=”title” type=”text” autocomplete=”off” value=”Live Tap List ” color=”red” size=”30″ name=”post_title”></input>
</div>
<div class=”inside”></div>
<input id=”samplepermalinknonce” type=”hidden” value=”6bbc6b5dba” name=”samplepermalinknonce”></input></div>
I tried to put color=”red” and color=”#FF0000″ but to no avail. Also, I tried to change the size but it does not change when I click on “preview changes”
The theme is avada 3.5.1@voltaire15 – this thread is long outdated and marked resolved. And CSS is theme specific – and as you are using a commercial theme, please contact the developers for assistance.
http://codex.wordpress.org/Forum_Welcome#Commercial_Products
- The topic ‘How to change site title text color’ is closed to new replies.