Support » Themes and Templates » How to change nav menu bar color in catch box theme

  • I have 2 items I have been struggling with to pretty up my site.

    #1.) I would like to change the color of my navigation bar in catch box theme. I would prefer to change it Custom CSS Styles box.

    #2.) I would like to change the grey color block that’s on top of the background (which I have an image) but under the white boxes that hold the content of my posts. I would prefer to change it Custom CSS Styles box also.

    For reference my site is http://www.gettingstamped.com

Viewing 7 replies - 1 through 7 (of 7 total)
  • #1 – change the background element:

    #branding #access,
    #colophon #access-footer,
    #branding ul.menu ul a {
    background: linear-gradient(#255A8C, #1B4266) repeat scroll 0 0 transparent;
    }

    #2 – change the background-color element:

    #main {
        background-color: #EEEEEE;
        clear: both;
        padding: 2em 0 0;
    }

    Thanks for your quick and accurate response, worked great on both issues.

    I also wanted to change the hover color of the menu so I grabbed this piece of code and modified it to fit the colors I wanted:

    #branding ul.menu li:hover > a,
    #branding ul.menu a:focus,
    #colophon #access-footer ul.menu a:hover,
    #colophon #access-footer ul.menu a:focus {
    background: linear-gradient(#7b1f0a, #501407) repeat scroll 0 0 transparent;
    }

    It worked but is that the correct way to do it or is there potential problems with browser types or anything else I am not aware of?

    Again thanks for the help.

    Damn those other browsers, here is the full version to play with, you just need to alter the backgrounds to take into consideration the other and older browsers:
    #1

    #branding #access,
    #colophon #access-footer {
    	background: #3d3d3d; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#585858, #3d3d3d);
    	background: -o-linear-gradient(#585858, #3d3d3d);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#585858), to(#3d3d3d)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#585858, #3d3d3d);
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 2px;
    	width: 100%;
    }

    For the hover elements you had, full version:

    #branding ul.menu li:hover > a,
    #branding ul.menu a:focus,
    #colophon #access-footer ul.menu a:hover,
    #colophon #access-footer ul.menu a:focus {
    	background: #e5e5e5; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e5e5e5'); /* for IE */
    	color: #373737;
    }

    @ Brad Davis,

    I am working on changing the nav bar color as well. When I test in firebug it works fine however when I go to the css stylesheet and search for the code, it does not show up when I do a find search. Any ideas what I may be doing wrong?

    my site is http://formulaforpeace.com

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You don’t edit the theme’s files. You use either a Child Theme or Custom CSS plugin. Do you have either?

    Thanks,

    No, how do I get the plugin?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Install this one http://wordpress.org/extend/plugins/custom-css-manager-plugin/

    If you have any more queries you ought to create your own thread to discuss them.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to change nav menu bar color in catch box theme’ is closed to new replies.