Question Change Custom Nav Tab Colours

Status
Not open for further replies.
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
 
GoodApples said:
@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!
Click to expand...

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

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.webp

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

Similar threads

XGC Paravain
  • Locked
  • Support ticket Support ticket
Question Vb Custom Nav
Tags Tags
box color dragonbyte tech font forum forums funny lite modification mods more navbar navigation navtabs php pro question stylevar tabs template test thread url vbulletin vbulletin mods
Replies
7
Views
6K
XGC Paravain
XGC Paravain
Fillip H.
DragonByte Shout v7.0.0 Beta 1 for XenForo Released, FREE Lite version available!
Replies
0
Views
10K
Fillip H.
Fillip H.
OUTL4W
  • Locked
  • Support ticket Support ticket
Question Changing input text area and text
Tags Tags
auto box button chat chatbox color colors editor font inactive instance options post pro shoutbox style stylevar tab text threads url vbshout version
Replies
7
Views
2K
Fillip H.
Fillip H.
Mental
  • Locked
  • Support ticket Support ticket
Bug having trouble getting nav to display correctly
Tags Tags
button color comment display document functionality guests hidden hide hover image member missing navbar navigation navtabs notifications php profile query style stylevar template ten text threads total url
Replies
10
Views
5K
Mental
Mental
Henk Keuris
  • Locked
  • Support ticket Support ticket
Question How do I change the text color on the Forum tabs?
Tags Tags
box category color colors font forum forums inactive questions style stylevar tab tabs text
Replies
1
Views
3K
Mokonzi
Mokonzi

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