Hi,
I believe I figured out where to edit tabs in the Dark Whiteness theme, and I created a repeating image used for one active tab. However, I want to edit the css of the inactive tabs, and I can't seem to find where to add a border, a color, or anything else for that matter. Here is the code. Can someone please tell me where to change the styles of the tabs in their different states? Thank you!
/* top styles */
#top_menu {
padding: 10px 8px 0 0;
text-align: center;
}
#top_menu ul li.first-level, #top_menu ul li.first-level.cm-active {
height: 43px;
}
#top_menu ul li.first-level a, #top_menu ul li.first-level a:hover, #top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {
display: block;
font: bold 108%/123% Arial, Helvetica, sans-serif;
padding: 13px 40px;
color: #bfbfbf;
}
#top_menu ul li.first-level:hover, #top_menu ul li.first-level:hover a, #top_menu ul li.first-level a:hover, #top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {
color: #ffffff;
background: #0C113D url(images/top_tab_active_bg.gif) repeat-x left top;
}
#top_menu ul ul {
margin-top: 0;
padding-top: 3px;
padding-bottom: 4px;
text-align: left;
}
#top_menu ul li.first-level:hover ul li a, #top_menu ul li.first-level ul li a, #top_menu ul li.first-level ul li a:hover, #top_menu ul li.first-level.cm-active ul li a, #top_menu ul li.first-level.cm-active ul li a:hover {
background-color: transparent;
padding: 5px 20px 4px 2px;
font: bold 100% Arial, Helvetica, sans-serif;
}
#top_menu ul li.first-level:hover li, #top_menu ul li.first-level:hover ul li a, #top_menu ul li.first-level ul li a, #top_menu ul li.first-level ul li a:hover, #top_menu ul li.first-level.cm-active ul li a, #top_menu ul li.first-level.cm-active ul li a:hover {
color: #000000;
background: transparent none;
}
#top_menu ul li.first-level ul *.dir, #top_menu ul li.first-level.cm-active ul *.dir {
background: url('images/icons/category_collapsed.gif') no-repeat right 8px;
}
#top_menu ul li.first-level ul *.dir:hover, #top_menu ul li.first-level.cm-active ul .dir:hover {
background: url('images/icons/subcategory_expanded.gif') no-repeat right 8px;
}
/ /top styles */
you can do this for active
#top_menu ul li.first-level:hover, #top_menu ul li.first-level:hover a, #top_menu ul li.first-level a:hover, #top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {
background: url("images/top_tab_active_bg.gif") repeat-x scroll left top #232129;
border-left: 1px solid #FF0000;
border-radius: 6px 6px 0 0;
border-right: 1px solid #FF0000;
border-top: 1px solid #FF0000;
color: #FFFFFF;
}
and this for inactive
#top_menu ul li.first-level a, #top_menu ul li.first-level a:hover, #top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {
border-left: 1px solid #880E12;
border-radius: 6px 6px 0 0;
border-right: 1px solid #880E12;
border-top: 1px solid #880E12;
display: block;
font: bold 108%/123% Arial,Helvetica,sans-serif;
margin: 0 1px;
padding: 14px 16px 12px;
}
offcourse you need to refine that…
Fotis