ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

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 2 years ago #
2. 

   em hr
   Moderator

   Hi jason,

   I think the class tou need to style is current_page_ancestor

   -Gene

   Posted 2 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 2 years ago #
4. 

   em hr
   Moderator

   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 2 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 2 years ago #

RSS feed for this topic

Reply

You must log in to post.