ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   alst
   Member

   Have had some great success integrating a mixed pages and category dropdown menu.

   Now trying to get some styling and having a small CSS problem.

   Using the auto created cat-item-x class that is formed I'm trying to change the background of the top menu item.

   Not having a lot of success.

   How do I combine the sfmenu class with the cat-item-x class to change the background of a specific cat class?

   have tried .sfmenu.cat-item-x {background:red;} but it's not working.

   Any ideas?

   Posted 3 years ago #
2. 

   Chris
   Moderator

   Hi,

   using Thematic Powerblog this would be #category-access .sf-menu .cat-item-1 a {background: red;}

   .sf-menu .cat-item-1 a {background: red;} should work .. otherwise drop me a link to your blog.

   Cheers,

   Chris

   Posted 3 years ago #
3. 

   alst
   Member

   HI Chris,

   Thanks for your response. Got want i wanted with the following altered skin stylesheet. One last thing. Hover changes the background to grey, but as you scroll down the sub-categories drop down the parent category remains highlighted with the hover colour. So I get two highlighted blocks. Any way you can think to unhover the parent category when moving down the sub-categories?

   
.sf-menu {
border-right:1px solid #ccc;
float:left;
}

   .sf-menu a {
   border-left:1px solid #ccc;
   border-top:1px solid #ccc;
   border-bottom:1px solid #ccc;
   padding:9px 13px;
   text-decoration:none;
   }
   .sf-menu .current_page_item a,
   .sf-menu .current_page_ancestor a,
   .sf-menu .current_page_parent a {
   border-bottom-color:#fff;
   }
   .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
   color: white;
   }

   .sf-menu li.cat-item-9 {
   background: red;
   }

   .sf-menu li.cat-item-9 {
   background: red;
   }

   .sf-menu li.cat-item-34 {
   background: #3c5ef5;
   }

   .sf-menu li.cat-item-8 {
   background: green;
   }

   .sf-menu li {
   background: black;
   }

   .sf-menu li li {
background: black;
}
.sf-menu li li li {
background: black;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #666;
outline: 0;
border-bottom-color:#ccc;
}
.sf-menu ul {
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top:32px; /* overriding essential styles */
}
.sf-menu ul ul {
margin-top:0;
}
.sf-menu ul a {
background:black;
border-bottom:none;
}
.sf-menu ul a:hover {
color: white;
background:#666;
}


   Posted 3 years ago #
4. 

   alst
   Member

   Just to explain. Have got a handcrafted menu with a combination of page links and wp_list_categories with exclusions.

   Posted 3 years ago #
5. 

   Chris
   Moderator

   Change the background for .sf-menu .current_page_parent

   Chris

   Posted 3 years ago #

RSS feed for this topic

Reply

You must log in to post.