WordPress.com

1. scottieenriquez
   Member
   Dec 15, 2012, 7:31 PM

   Hello,

   I just started messing around with CSS today, and I was able to make changes to pretty much everything I wanted to except the title of my blog. I've tried a few different ways. This is the code that I'm trying to make work:

   body {<br /> color: darkblue;<br /> }<br /> // blog title<br /> title {<br /> color: blue!important;<br /> }<br /> // blog post titles<br /> h2 {<br /> color: blue!important;<br /> }

   The body text color changes to navy blue, but the h2 and title won't change. Any idea why?

   Thanks in advance,
   Scottie

   The blog I need help with is scott-enriquez.com.

2. castelinokelvin
   Member
   Dec 16, 2012, 8:30 AM

   Hey scottieenriquez
   This forum is only for the WordPress hoisted blogs/sites. For personal/self hoisted one's, here's the forum link http://wordpress.org/support/ .
   Best wishes for your site :)

3. scottieenriquez
   Member
   Dec 16, 2012, 9:23 AM

   It is a WordPress hosted site. I just use my own domain.

4. castelinokelvin
   Member
   Dec 17, 2012, 6:43 AM

   Actually WordPress hoisted and self hoisted meaning,
   http://en.forums.wordpress.com/topic/read-me-first-what-is-custom-css?replies=1
   This link would help you to know!

5. castelinokelvin
   Member
   Dec 17, 2012, 6:46 AM

   And about your issue,
   To change the color of your blog post title's
   modify the code as,
   h2 a{<br /> color:blue !important;<br /> }

   For blog title you could go for,
   #logo a{<br /> color: blue !important;<br /> }

   And body color change I guess it worked for you right?

6. designsimply
   Staff
   Dec 31, 2012, 9:03 PM

   http://scott-enriquez.com/ is indeed setup here at WordPress.com. @castelinokelvin, a quick check of the footer link will usually give you the right info about that.

   Regarding CSS not working when you think it should, I would recommend checking it using your browser's web inspector. If you right-click on an element and select "Inspect Element," then you should see a panel open with the HTML for what you clicked on as well as all of the CSS that applies to it. You can usually check or uncheck different pieces to turn them on or off to see what's doing what. It's a really nice way to learn about the CSS of a site.

   CSS has all of these specificity rules. The most specific selector wins, or if there is more than one rule using selectors with the same specificity, then whatever is loaded last wins. In your case, just using the selector "h2" is not enough in the Oxygen theme because that theme uses a selector that is more specific: ".entry-title a"

   Here is an example you can try out. The top one is for the main site title (or what I would think of as the blog title), and the bottom rule is for post titles. You'll notice there are two because on the home page or archives pages the post titles are links (so you need to add "a" to the selector) and the individual posts just use ".entry-title". I added "#page" to the selectors to make them even more specific so they will override other stuff in the theme:

   #page .site-title a {
   	color: #f00;
   }
   
   #page .entry-title,
   #page .entry-title a {
   	color: #0f0;
   }

Topic Closed

This topic has been closed to new replies.