How To Change The Blog Post Title Color In Wordpress

I just want to change the color of the header and title font. You think that would be a simple thing. I've tried editing the css but is not working. Need help.

The blog I need help with is: spaghettisauceandmeatballs.wordpress.com

njcrane

Hi
You may have a problem, as the <style> is defined inline within your index page.

Have you tried the important exception

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

did not know about that. yeah, well is seems there is a theme css style sheet that I can't get to and then there is the customizer that supposivly let's me edit stuff but really can only change the font. So the header/page title and post titles are set within the theme css which I can't edit. So if I edit with my own css and add this "important!" thingie, that might override theme css? Problem is i am new to css. I have been hard-coding plain html for a long time and just have used some css for fonts. Working on transferring my main static website here: http://spaghettisauceandmeatballs.com/ to wordpress. Will be a monumental task but I feel it will be worth it in the end. Trying to get used to template design. It definitely confines into a box.

Although reading this: "Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets."

Kind of discourages me from trying it.

Just seems like it should be a LOT easier to change a header font color.

njcrane

You're right, it's bad practice and there are pros and cons to all design.

I'm not sure what browser you use but you should be able the inspect each element via the browsers dev tool to see exactly what's happening.

It's not such an issue as the element you want to update, in this case h1, has a class of 'logo' so you can target that specific class with !important and it wont effect any other h1's.

Give it a go and see what happens, if the 'bad practice' element is too much to live with you can always remove it. In this instance the risk is minimal.

njcrane

To put your mind at rest !important is used in the CSS Coding Standards for WordPress

https://make.wordpress.org/core/handbook/coding-standards/css/

just search for !important

I will play around with it. You last link in regards top CSS Coding Standards for WordPress is a wordpress.org link. Still apply for wordpress.com?

njcrane

Yes, my understanding is if you were to build a theme or a plugin that you wanted to sell on WordPress.com these are the standards managed and endorsed by the WordPress that you'd need to adhere to.

@removearticle, at WordPress.com, CSS is done a little differently. What you do is to create CSS rules to override the existing CSS. Anything you add at Appearance > Customize > CSS is loaded after the original CSS, so it overrides.

To change the site title color, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and edit the color code as desired.

            .masthead .branding h1.logo a { color: #cc0000; }

To change the site description color, you can use this

            .masthead .branding h2.description { color: #cc0000; }

To change the color of page and post titles, you can use this

            .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title {     color: #cc0000; }

I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme's CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

@thesacredpath, Thank you so much for this! I never would have figured this out. I will tackle this, this evening and see how it goes.

Thanks again for the straight forward easy to follow help.

ha! I couldn't wait. Dropped everything and revised the css as per your instructions.

Thanks so much. Works great!!! :-)

Tony

Jun 24, 2015 at 11:36 pm #2414526

Hooray Tony, and you are welcome!

Jun 24, 2015 at 11:58 pm #2414528

@removearticle, at WordPress.com, CSS is done a little differently. What you do is to create CSS rules to override the existing CSS. Anything you add at Appearance > Customize > CSS is loaded after the original CSS, so it overrides.

For this reason, I tagged this thread for Staff assistance.
Thanks, Richard. :)

Jun 25, 2015 at 12:12 am #2414529

@galois, you are welcome.

Jun 25, 2015 at 11:14 am #2414552

njcrane

@removearticle, @thesacredpath, apologies for any confusion I may have caused. My presumption was @removearticle was already aware of Appearance > Customize > CSS.

I implied, although not succinctly executed, to target the class in the same manner as suggested by @thesacredpath but to include !important, for example:

              .masthead .branding h1.logo a { color: #cc0000 !important; }

This would have overriden any other declaration made in the CSS and @removearticle would then have been able to target with more confidence where the issue may have been.

My reference to the WordPress CSS coding standards was to reassure @removearticle that the inclusion of !important was an acceptable approach.

Again apologies for any confusion.

Jun 25, 2015 at 11:20 am #2414553

@njcrane, no worries man. I appreciate you trying to help. That is what these forums are all about!

Cheers! Tony

@njcrane, I second the "no worries man." Many thanks for helping out in the forums. :)