GoodApples
Customer
Where can I change the Custom Nav Tab colours without changing my main nav colours?
Last edited:
@the-danzor perhaps you will share what to place in the template, dbtech_custom_nav_tabs.css
to get the look of the DragonByte V3 Style Custom Nav Tabs Please!
.navbar {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 solid #FFFFFF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: #565656;
font: 11px 'Orienta',sans-serif;
height: 81px;
position: relative;
}
.navbar a {
color: #565656;
}
.navbar a:hover {
color: #2D2D2D;
}
.navtabs {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
height: 55px;
padding: 0 0 0 20px;
text-shadow: 0 1px 0 #FFFFFF;
text-transform: uppercase;
width: auto !important;
}
.navtabs li:first-child {
border-left: 0 solid #5A7F97;
}
.navtabs ul {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0 solid #5A7F97;
direction: ltr;
left: 0;
margin-right: -80px;
position: absolute;
top: 42px;
width: 100%;
}
.navtabs li {
border-right: 0 solid #5A7F97;
float: left;
}
.navtabs ul li:first-child {
border-left: 0 none;
margin-left: 20px;
}
#navtabs .popupmenu ul li:first-child {
margin-left: 0;
}
.navtabs ul li {
border-right: 0 none;
position: relative;
}
.navtabs li a {
height: 55px;
line-height: 55px;
padding: 0 10px;
}
.navtabs li a.navtab {
background: none repeat-x scroll 0 0 rgba(0, 0, 0, 0);
border-left: 0 solid #CEDFEB;
border-top: 0 solid #CEDFEB;
color: #5A5A5A;
display: block;
font: bold 12px/55px 'Orienta',sans-serif;
min-width: 60px;
padding: 0 10px;
text-align: center;
text-decoration: none;
width: auto !important;
}
.navtabs li a.navtab:hover {
background: none repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #5A5A5A;
}
.navtabs li.selected {
color: #5A5A5A;
height: 55px;
}
.navtabs li.selected a.navtab {
background: none repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #5A5A5A;
padding-top: 0;
position: relative;
top: 0;
z-index: 10;
}
.navtabs > ul.floatcontainer li a, .navbar_advanced_search li a {
font: 11px/26px 'Orienta',sans-serif;
text-decoration: none;
}
.navtabs > ul.floatcontainer li a {
color: #565656;
padding: 2px 5px;
}
.dbt_custnav {
position:static;
max-width:915px;
clear:both;
float:right;
}
.dbt_custnav ul li {
float:right;
margin-right:3px;
padding:7px 10px;
background: {vb:stylevar navbar_tab_background};
border-radius:6px;
min-width:6px;
border:{vb:stylevar navbar_tab_border};
box-shadow:inset 0px 1px 0px 0px #fff;
height: 10px;
line-height: 10px;
}
.dbt_custnav ul li:hover {
background: {vb:stylevar navbar_tab_selected_background} 0 -{vb:stylevar navbar_tab_selected_top_height};
box-shadow:inset 0px 1px 0px 0px #dfe1e5;
}
.dbt_custnav ul li a {
font-size:{vb:stylevar small_fontSize};
font-weight:bold;
color:{vb:stylevar navbar_tab_color};
text-shadow:0px -1px 0px #9c9fa5; text-decoration:none;
}
.dbt_custnav ul li:hover a {
//text-shadow:0px -1px 0px #83878d;
color:{vb:stylevar body_color};
text-decoration:none;
}
Hello,
If you have any problems i will be happy to help further
Regards,
Scott
Honestly, I'm looking at it going ... :RpS_blink::RpS_huh: ...if you can that would be great!
.dbt_custnav {
position:static;
max-width:915px;
clear:both;
float:right;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
padding: 6px 8px;
text-shadow: 0 1px 0 #FFFFFF;
text-transform: uppercase;
}
.dbt_custnav ul li {
float:right;
margin-right:3px;
padding:7px 10px;
border-radius:6px;
min-width:6px;
height: 10px;
line-height: 10px;
}
.dbt_custnav ul li:hover {
}
.dbt_custnav ul li a {
font-size:{vb:stylevar small_fontSize};
font-weight:bold;
color:#565656;
text-shadow:0px -1px 0px #9c9fa5; text-decoration:none;
}
.dbt_custnav ul li:hover a {
//text-shadow:0px -1px 0px #83878d;
color:#2D2D2D;
text-decoration:none;
}
.dbt_custnav {
position:static;
max-width:915px;
clear:both;
float:right;
}
.dbt_custnav ul li {
float:right;
margin-right:3px;
padding:7px 10px;
background: {vb:stylevar navbar_tab_background};
border-radius:6px;
min-width:6px;
border:{vb:stylevar navbar_tab_border};
box-shadow:inset 0px 1px 0px 0px #fff;
height: 10px;
line-height: 10px;
}
.dbt_custnav ul li:hover {
background: {vb:stylevar navbar_tab_selected_background} 0 -{vb:stylevar navbar_tab_selected_top_height};
box-shadow:inset 0px 1px 0px 0px #dfe1e5;
}
.dbt_custnav ul li a {
font-size:{vb:stylevar small_fontSize};
font-weight:bold;
color:{vb:stylevar navbar_tab_color};
text-shadow:0px -1px 0px #9c9fa5; text-decoration:none;
}
.dbt_custnav ul li:hover a {
//text-shadow:0px -1px 0px #83878d;
color:{vb:stylevar body_color};
text-decoration:none;
}
Awesome the-danzor
I was looking for the custom nav mod to look like this...
View attachment 5182
...but what you did is better and works for me !!!
We use essential cookies to make this site work, and optional cookies to enhance your experience.