ThemeShaper Forums » Thematic

[closed]

Can't style .current_page_item in Child theme

(5 posts)
  • Started 3 years ago by jason
  • Latest reply from jason
  • This topic is resolved
  1. jason
    Member

    I want to add rounded tab corners for those browsers (not IE) that can view them. They just look better than the square corners for the particular site I am working on. Everything works as expected, except when I try to style the .current_page_item. That tab in particular, and its dropdown seems to operate differently from the rest.

    Example:
    http://208.43.39.68/~natafoun/about/awards/research-awards

    I thought by changing the style for .current_page_item, I'd be set. But, there are SO many overlapping classes, I'm getting a headache looking at this stuff, and I've spent hours now. Please help!


    /*** THEMATIC SKIN ***/
    .sf-menu {
    float:left;
    }
    .sf-menu a {
    padding:9px 13px;
    text-decoration:none;
    color: #91AB99;
    }
    .sf-menu .current_page_item li,
    .sf-menu .current_page_ancestor li,
    .sf-menu .current_page_parent li {
    background-color: #ffffff;
    color: #91AB99;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color:#fff;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    }
    .sf-menu li {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: transparent;
    }
    .sf-menu li:hover {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #ccc;
    }
    .sf-menu li li {
    background-color: #ffffff;
    }
    .sf-menu li li:hover {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #E0EAE3;
    }
    .sf-menu li li li {
    display:block;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    outline: 0;
    color: #555555;
    background-color: #ffffff;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    }
    .sf-menu ul {
    border-right-width: 2px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
    border-left-color: #ccc;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    left: -1px;
    }
    .sf-menu ul ul {
    margin-top:0;
    }
    .sf-menu ul a {
    border-bottom:none;
    background-color: #ffffff;
    }
    .sf-menu ul li:hover {
    color: #555555;
    background-color: #E0EAE3;
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:0px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    }

    Posted 3 years ago #
  2. Hi jason,

    I think the class tou need to style is current_page_ancestor

    -Gene

    Posted 3 years ago #
  3. jason
    Member

    Thanks, but that's not it. I just tried it.... no change. The frustrating part is that this theme is designed to be customized, but it has been far from easy. I have spent hours trying to alter the look. Perhaps commenting on all of the classes would help people understand what they need to modify.

    I'm really close to installing a custom opencube menu and be done with it, but it would be a shame since all styling is right here in this theme. I just don't know how to access the right part.

    Thanks for any more suggestions you have.

    Posted 3 years ago #
  4. Now way around it, styling nested menus in WordPress is difficult. Try:

    .current_page_item a , .current_page_ancestor a { border-top: 10px solid red }

    Posted 3 years ago #
  5. jason
    Member

    Dude. You ROCK !!

    I thought I had tried every variation, but that one I missed. I think I started out with sf-menu. Anyway, there's obviously a lot I still need to learn about CSS.

    Thanks very much for your help!

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.