Modularity Lite – css site title size and color

bakerross · Member · Jul 18, 2013 at 8:59 am
Copy link

Add topic to favorites
Hello!

I am using the Modularity Lite Theme with the custom design upgrade and I am trying to change the site title and tag line color and size with css. I have searched in the forums and tried a few things, but nothing happens when I save the changes.

I have also changed the link colors with css, but would also like to change the color of the blue links under Categories on the right side. I do not understand why they didn’t change as well.

I will highly appreciate any help!

The blog I need help with is: (visible only to logged in users)
fabianapsimoes · Member · Jul 18, 2013 at 12:44 pm
Copy link
Hi there,

You can use this CSS to change the color of the site title:
```
#masthead h4 .logo {
    color: red;
    font-size: 20px;
}
```
… and this one to change the color of the tagline:
```
.wf-active #masthead span.description {
    color: blue;
    font-size: 10px;
}
```
In both cases, you can change “red” and “blue” for the color code you want to use.

I have also changed the link colors with css, but would also like to change the color of the blue links under Categories on the right side. I do not understand why they didn’t change as well.

This bit of CSS should take care of it:
```
#sidebar .widget_categories ul li a {
    color: #333333;
}
```
The reason your CSS didn’t work for the categories is that, in your theme’s stylesheet, there’s a CSS rule for it that is more specific (#sidebar .widget_categories ul li a) than the CSS rule you’ve inserted ( just a). In order to overwrite that CSS rule, you’ll need a rule that is as specific or more. You can read some on CSS specificity here, if you are interested: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

One thing you can do to find out what CSS rules applied to an element is to right click it in your page, and select the “Inspect Element” option. A panel with your HTML will appear, along with a panel on the right showing the CSS rules that apply to the element you clicked. See more about your browser’s developer tools here, in “CSS Help”: http://en.support.wordpress.com/custom-design/editing-css/
bakerross · Member · Jul 18, 2013 at 2:58 pm
Copy link
Excellent, that worked fine. Thank you so much!

No items found.