Status
Not open for further replies.

GoodApples

Customer
Where can I change the Custom Nav Tab colours without changing my main nav colours?
 
Last edited:
Works just fine for me, change the following, {vb:stylevar navbar_tab_background} To a color such as red
 
I would like to re-create the look of the dragonbyte v3 Custom NavTab colors ...perhaps size etc. using the dbtech_custom_nav_tabs.css
I gave it a go but not quite getting it !

I didn't realize it until a few days ago the my header background is a similar colour so the Custom Nav tabs would look great! Perhaps Fillip H. can share with me what to input into the css
 
@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!
 
@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!

Hello,

Here is the following code used, feel free to strip, edit and remove anything you need. BACKUP BEFORE APPLYING:

The code was designed around the v3 template, as a result it may cause conflicts with any template you are using at the moment.

Code:
.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;
}
 
I will see what I can do... :)

FYI the-danzor this is the default dbtech_custom_nav_tabs.css
if you care to give it a go ;)

Code:
.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;
}
 
Honestly, I'm looking at it going ... :RpS_blink::eek::RpS_huh: ...if you can that would be great! :)

I will need access to your live site, as some custom classes may need to be added to stop conflicts.

If you can PM me your forum URL and AdminCP information i can look into it for you.

Regards,
Scott
 
Hello,

The changes have been applied, as a warning i must remind you that applying updates may revert these custom changes. As a result i am placing them here for you to backup and apply at anytime.

Custom Code:

Code:
.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;
}

Default Code:

Code:
.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;
}

I hope this helps.

Regards,
Scott
 
Awesome the-danzor :)

I was looking for the custom nav mod to look like this...
custom nav.png

...but what you did is better and works for me !!! :D
 
Status
Not open for further replies.

Legacy DragonByte Custom Navigation

vBulletin 4.x.x
Seller
DragonByte Technologies
Release date
Last update
Total downloads
122
Customer rating
0.00 star(s) 0 ratings
Back
Top