WordPress.org

Ready to get started?Download WordPress

Forums

[closed] How to change nav menu bar color in catch box theme (8 posts)

  1. GetStamped
    Member
    Posted 1 year ago #

    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

  2. Brad Davis
    Member
    Posted 1 year ago #

    #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;
    }
  3. GetStamped
    Member
    Posted 1 year ago #

    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.

  4. Brad Davis
    Member
    Posted 1 year ago #

    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;
    }
  5. lanne
    Member
    Posted 1 year ago #

    @ 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

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  7. lanne
    Member
    Posted 1 year ago #

    Thanks,

    No, how do I get the plugin?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic