Title: CSS Customisation
Last modified: August 30, 2016

---

# CSS Customisation

 *  Resolved [fsleite](https://wordpress.org/support/users/fsleite/)
 * (@fsleite)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/)
 * Hello, Im using the theme Adelle-Wordpress.com in wordpress.org ([http://www.thecutemommy.com](http://www.thecutemommy.com))
   
   I changed the css (in Jetpack) to make the navigation menu change color and nothing
   happens.
 * .navigation {
    background: #b5b5b5; }
 * .article .post-date {
    background: color:#b5b5b5; }
 * .article .post-date a {
    color: #b5b5b5; }
 * img {
    width: 100%; }
 * Can you please help?
    Thanks. Fernando

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6233847)
 * I don’t see an element that has a class called _navigation_. There is a class
   called _navigation-main_:
 *     ```
       .navigation-main {
          background: #b5b5b5;
       }
       ```
   
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6233848)
 * 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](http://getfirebug.com/) or [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/).
 *  Thread Starter [fsleite](https://wordpress.org/support/users/fsleite/)
 * (@fsleite)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6233888)
 * 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.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6233902)
 * 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.
 *  Thread Starter [fsleite](https://wordpress.org/support/users/fsleite/)
 * (@fsleite)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6233909)
 * 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
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6233912)
 * 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**.
 *  Thread Starter [fsleite](https://wordpress.org/support/users/fsleite/)
 * (@fsleite)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6234018)
 * 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…
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6234027)
 * 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.
 *  Thread Starter [fsleite](https://wordpress.org/support/users/fsleite/)
 * (@fsleite)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6234064)
 * Stayed perfect and I understood the logic of it.
    Agaim, thank you so mcuh!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘CSS Customisation’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/adelle/19.01/screenshot.png)
 * Adelle
 * [Support Threads](https://wordpress.org/support/theme/adelle/)
 * [Active Topics](https://wordpress.org/support/theme/adelle/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/adelle/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/adelle/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [fsleite](https://wordpress.org/support/users/fsleite/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/css-customisation-1/#post-6234064)
 * Status: resolved