Changing Colour of header content area

Discussion in 'General WordPress Discussions' started by Mark, Feb 6, 2012.

  1. Mark New Member

    Hi. I am using the theme Swagger from Theme Boulevarde. Great Theme! My client would like to change the colour of the header content area to the same colour as the main content area. Theme options do not allow this change.
    I don't know where to go to affect this colour change.
    Can anyone help?
    Cheers. Mark.
    www.hallsgaplakeside.com
  2. Kevin Muldoon WordPress Fanatic!

    You can adjust the colours easily via your stylesheet. Look for the style.css template in the theme editor area and change it there (let me know if you are unsure about this).
  3. Mark New Member

    This is all there is in the style sheet:
    /*
    Theme Name: Swagger
    Description: A simple business portfolio theme by Theme Blvd.
    Author: Jason Bobich
    Author URI: http://jasonbobich.com
    Theme URI: http://themeforest.net/item/swagger-premium-wordpress-theme/930581
    Version: 1.0.4
    License: Partial GNU General Public License, please reade license file for more details.
    License URI: license.txt
    */

    /* This theme's primary styles can be found in /assets/css/theme.css */
  4. Kevin Muldoon WordPress Fanatic!

    Ahhhh. I really do hate when designers place css stylesheets in sub directories as it means you can't modify them via the admin area (I always copy the style over to style.css to address this).

    what's the url of your site? I can view the source and try and help you that way.
  5. Mark New Member

    www.hallsgaplakeside.com
    Thanks Kevin. I think once I change the header content area to the blue colour I will also have to affect change with the Nav button links from black to white?
  6. Kevin Muldoon WordPress Fanatic!

    To change the header to blue, add this to your stylesheet:


    Code:
    #branding{
    background:#384c6c;
    }
    To change the links to white, add this:

    Code:
    #access .sf-menu li a {
    color: #ffffff;
    }
    You should add this to make the link hover black:

    Code:
    #access .sf-menu li a:hover {
    color: #000000;
    }
    So altogether the code is:

    Code:
    #branding {background:#384c6c;}
    #access .sf-menu li a {color: #ffffff;}
    #access .sf-menu li a:hover {color: #000000;}
    
    You would still need to change the drop down colours though.
  7. Mark New Member

    That's great.
    Thank you very much.
    Sorry but I am not sure how to change the drop down colours.
  8. Kevin Muldoon WordPress Fanatic!

    Either add this to your stylesheet:

    Code:
    #access .sf-menu ul {background:#384c6c;}
    Alternatively, open your main stylesheet and find this:

    Code:
    #access .sf-menu ul {
        width: 200px;
    }
    And replace it with this:

    Code:
    #access .sf-menu ul {width: 200px;background:#384c6c;}
    The end result:


    [IMG]

    :)
  9. Mark New Member

    Your blood is worth bottlin!
    Kevin Muldoon likes this.

Share This Page

Users found this page by searching for:

  1. wordpress theme fanatics 1.0

    ,
  2. jason bobich change menu hover