Making menus look like Education Theme

Community Forums Forums Design Tips and Tricks Making menus look like Education Theme

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Pixel Frau 1 year, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #39263

    sue_k
    Participant
    Post count: 4

    I am attempting to change the menu color scheme. I assumed that the teal background for the nav was the “default”, but I guess the white background is the default, which is pretty boring against my white background.

    I successfully changed the colors on the current menu item in the style.css, using a tan color (replacing the menu-active.png with menu-active-tan.png), but when I paste the code teal color

    {
    background: #469491 url(images/teal/menu-active.png) repeat-x;
    color: #fff !important;
    border-bottom: 3px solid #469491;
    text-shadow: #397573 -1px -1px;
    }

    after this line: .education-teal a,

    I lose the rounded corners. (Nor am I really sure that’s where I would paste it.)

    I’ve seen a couple other posts, but not finding quite the answer.

    Any ideas, anyone?

    http://enmchamber.org.previewdns.com
    #56099

    Pixel Frau
    Participant
    Post count: 111

    If you take a look at the CSS for the active menu item, you’ll find this:

    #header .menu li a:active, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a, #header .menu .current_page_item a:hover, #header .menu .current-cat a:hover, #header .menu .current-menu-item a:hover {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    background: url(images/menu-active.png) repeat-x;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 3px solid 
    #386a8d;
    color: 
    #fff !important;
    text-shadow: 
    #2d5876 -1px -1px;
    }

    This bit adds the rounded corners:

    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    To add the same rounded corners to the non-active menu items, change this:

    #header .menu a {
    border-bottom: 3px solid 
    #44928f;
    color: 
    #d4bf95;
    display: block;
    padding: 16px 21px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 
    #2e6a67 1px 1px;
    }

    to this:

    #header .menu a {
    border-bottom: 3px solid 
    #44928f;
    color: 
    #d4bf95;
    display: block;
    padding: 16px 21px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 
    #2e6a67 1px 1px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }

    Julia
    ===============
    Need help customizing your Genesis child theme? Come visit me at Pixel Frau.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.