CSS Customisation

I don’t see an element that has a class called navigation. There is a class called navigation-main:

.navigation-main {
   background: #b5b5b5;
}

For your post date, the existing rule is this:

.entry-header .post-date {
   background: #000;
}

So just copy this rule into your custom CSS and change the value for background.

To see what the existing rules are for other elements, use a web debugging tool like Firebug or Chrome Developer Tools.

Thanks for the help.
The menu nav bar changed color but the “corners” stayed black. Is there another element for that?

Also, the icons for social network are also black, is there a way I can change it?

I didnt understand how can I use the firebug addon to sort out this stuff.
Im sorry for all the questins and “ignorance” but this is not my area at all.
Thanks.

Add these rules:

@media screen and (min-width: 63.750em) {
   .navigation-main:before,
   .navigation-main:after {
      border-top-color: #b5b5b5;
      border-bottom-color: #b5b5b5;
   }
   .navigation-main:before {
      border-right-color: #b5b5b5;
   }

   .navigation-main:after {
      border-left-color: #b5b5b5;
   }
}

#social-networks a {
   background-color: #b5b5b5;
}

To use one of the web debuggers, you right-click on an element on your web page and select Inspect element from the pop-up menu. The debugger window will open up in the bottom half of your browser. The left pane will contain the code structure for the page, with the element that you are inspecting highlighted. The right pane will show the CSS rules which affect that particular element.

Everything working!
Thank you so much for all the help!
With the info you sent I’ll try to to more on my own.
Thanks!
Fernando

So the only thing you need to change is the footer ribbon down at the very bottom. Open up your site in Chrome, right-click on the footer, and select Inspect element. A <div> with the class site-info will be highlighted on the left, but two lines above that will be the <footer> element with an ID of colophon</stong>. Click on that line, and in the right pane you should see a rule where the background is set to #000. Copy that rule to your custom CSS (you don’t need to include the position property) and change the value for background.

I tried this:
.site-footer::before {
border-left-color: #fff;
border-right-width: 1.5em;
left: 0;
}

.site-footer::before, .site-footer::after {
border: 1.1em solid #b5b5b5;
bottom: 0;
content: “”;
display: block;
position: absolute;
z-index: 1;
}

.site-footer::after {
border-left-width: 1.5em;
border-right-color: #fff;
right: 0;
}

.site-footer::before, .site-footer::after {
border: 1.1em solid #b5b5b5;
bottom: 0;
content: “”;
display: block;
position: absolute;
z-index: 1;
}

.site-footer {
background: #b5b5b5 none repeat scroll 0 0;
position: relative;

It stays grey but the “arrow” ends in the left and right side (like in the navigation menu) disappear…

You have the right idea. But the placement of the rules is important. The way that CSS works is that when there are multiple rules with the same selector, then the rule which comes last will take precedence over any earlier rules. This is only for properties which are identical.

For ease of understanding, and so I don’t have to re-enter all of your rules above, let’s number your rules from 1 to 5.

Rules #2 and #4 are identical, so you can remove one of them. Let’s take out rule #4.

The border property in rule #2 is overriding the border-left-color property in rule #1. That is, the border property can be seen as a combination of border-left, border-top, border-right, and border-bottom properties. Since rule #2 comes after rule #1, and they have the same selector (.site-footer::before), then the color for border in rule #2 (gray) is going to override the color for border-left in rule #1 (white). What you need to do, then, is to move rule #2 above rule #1. That way, the white for the left side in rule #1 overrides the gray in rule #2. And then, since rule #4 is gone, then the border-right color of rule #3 won’t be overridden.

Lastly, it looks like the very last rule (#5) is missing the closing right brace } (or maybe you just neglected to copy it over). Make sure it’s there so any rules you add after it at a later time will work.

Stayed perfect and I understood the logic of it.
Agaim, thank you so mcuh!