Theme Thirteen CSS help

fanfy85 · Member · Nov 9, 2013 at 11:43 am
Copy link

Add topic to favorites
Hi, I’ve bought the theme twenty thirteen to customize it.
Anyway I don’t understand how to change the color of the menu’s titles. For example I want the menu bar “blue”, text color “white” and the field that contain the text, “grey”. How I can do that? If I select CSS I just see a blank field for editing, but not the actual code that need to be edited.

I would know how to change the page’s title colour, it appear black but i’d prefer if it could be red (pantone 201c).
My blog is: associazioneannarosataddei.com

Hoping for your answer,
Alessandro

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 11, 2013 at 2:19 am
Copy link
I see you have gotten the menu bar blue with white text. Congratulations!

At WordPress.com, you do not actually edit the CSS. What you do is create CSS rules to override the existing CSS. If you aren’t using it already, all modern browsers have a web inspector built into them and we have some brief screencasts on How to Find Your Theme’s CSS that will get you started using them. They are a great help when doing CSS customization.

I see you have the following in your custom CSS:
```
entry titles {
    color: #0C5EAF;
}
```
You are almost there on changing the page entry titles, but you need to form the selectors correctly. For the entry titles, it would be the following:
```
.entry-title {
color: #0C5EAF;
}
```
In CSS, if you see “class=” for the element you are trying to change, then the selector after class= has to be proceeded by a period ( . ) in the CSS. If you see “id=” , that has to be proceeded by a hash mark ( # ). If you see a list of classes, such as this in the HTML

class="post-29 page type-page status-publish hentry"

every time you see a space in that list, it is the end of a selector. In other words, “post-29” is one selector, “page” is another, “type-page” is another, etc. You have to look in the HTML for your site to see which selector the designer used.

For the background area of the page content, add the following CSS and then edit the color code as you desire.
```
.site-main {
    background-color: #EEEEEE;
}
```
fanfy85 · Member · Nov 11, 2013 at 10:01 am
Copy link
Thanks you so much for reply!
I tried to change CSS with your codes but it doesn’t change, page’s title are black again and che code “site main” works with the general background of the site and not with che menu bar background when you go over it with pad or mouse.

I hope you can help me, anyway thanks for consideration!
thesacredpath · Member · Nov 11, 2013 at 5:24 pm
Copy link
I must have misunderstood.

I want the menu bar “blue”, text color “white” and the field that contain the text, “grey”.

Do you want the background of the individual menu items to be grey or just the current page menu item (the one the person is on)?

I’ll offer two bits of code for you to try. The first turns the area of the menu grey, over to, and including the search box.
```
.menu-menu-1-container {
    background: #CCCCCC;
}
```
This one turns the individual menu item backgrounds grey.
```
.nav-menu li {
    background: #CCC;
}
```
On the entry-title, sorry, my bad. I had a parenthesis instead of a curly bracket. This is correct now.
```
.entry-title {
color: #0C5EAF;
}
```
fanfy85 · Member · Nov 11, 2013 at 9:39 pm
Copy link
Thanks you so much!
For the entry-title now is ok.
About menu maybe i’m not so able to explain for my bad English…
I like the colour of the menu bar but when I go with mouse on the Home or L’Associazione and so on the individual menu appear in black while the rest of menu is blue.
I would like to change that black.

Thanks you so much
fanfy85 · Member · Nov 12, 2013 at 12:52 am
Copy link
I tried the solution…thanks you so much
thesacredpath · Member · Nov 12, 2013 at 10:50 pm
Copy link
I see that the submenu items are black, such as Galleria foto off of Annarosa Taddei. The following will allow you to change the background color and the font color on the submenus.
```
ul.nav-menu ul a:hover, .nav-menu ul ul a:hover {
    background-color: #DBDACF;
    color: #9E1B34;
}
```
On Home or L’Associazione I’m seeing a tan color background when I hover them and see this in your custom CSS. Nice job in finding that!
```
.nav-menu li:hover > a, .nav-menu li a:hover {
    background-color: #DBDACF;
    color: #9E1B34;
}
```

No items found.