[SW] Ultimate Image Navbar

[SoltanWorld]

[SW] Ultimate Image Navbar

If you have Installed This Mod Please Mark as Installed

About this Modification:

This Mod is designed to make your navigation bar customized by icons and images instead of simple phrases. Just This Modification is manual and you should change the codes by yourself. Please do it in the case of you have enough knowledge to make your site stable if any error appears.

How to:

Download The attachment and follow instructions.



Perview :

SoltanWorld.com (http://soltanworld.com)

If you have Installed This Mod Please Mark as Installed


Notice : if you have any problem about placing your new items you can take a look here in my last Mod about adding navtabs : Manual Add Navbar Links [Plus Image Menu] (https://vborg.vbsupport.ru/showthread.php?t=246687)


***Change Log :***

12/21/2010 : Icon Set Added

*****************

[SoltanWorld]

First Post Reserved~

[WEBDosser]

interesting

[STORMS]

Would this work on 4.0.7?

[leclownos]

Merci pour ce hack

[mgcom]

The following error occurred when attempting to evaluate this template:
Unclosed Curly Brace Expression
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

[worried]

It looks nice but there's too many graphics in vB as is. Some analytic sites complain vB 4 has too much CSS, JavaScript, graphics affecting loading time.

[SoltanWorld]

Would this work on 4.0.7?

Yeah You can just copy and replace Navbar code part in you vbulletin-chrome.css




/*************************************************/
/* NAVBAR */


.navbar {
position:relative;
height:{vb:math {vb:stylevar navbar_tab_border.borderWidth} + 60 * 2}px;
background:{vb:stylevar navbar_background};
padding:{vb:stylevar navbar_padding};
color:{vb:stylevar navbar_color};
font:{vb:stylevar navbar_font};
-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}
.navbar a { color:{vb:stylevar navbar_link_color}; }
.navbar a:hover { color:{vb:stylevar navbar_linkhover_color}; }


.navbar_advanced_search li a {
text-decoration:none;
font:{vb:stylevar navbar_font};
line-height: 70px;
}


.navtabs {
background:{vb:stylevar navbar_tab_background};
padding-{vb:stylevar left}: {vb:math {vb:stylevar padding}*2};
height: 70px;
_background-image:none;
}

.navtabs li:first-child {
border-{vb:stylevar left}: {vb:stylevar navbar_tab_border};
}

.navtabs ul {
/* background: {vb:stylevar navbar_background.backgroundColor}; */
position:absolute;
top:80px;
{vb:stylevar left}:0px;
width:100%;
border-top:{vb:stylevar navbar_tab_border};
-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
margin-{vb:stylevar right}:-{vb:stylevar navbar_tab_size.width}px;
/* This is to fix RTL menu issue under Opera */
direction:ltr;
}

.navtabs li {
float:{vb:stylevar left};
border-{vb:stylevar right}: {vb:stylevar navbar_tab_border};
}

.navtabs ul li:first-child {
text-indent: {vb:math {vb:stylevar padding}*2};
border-{vb:stylevar left}: 0;
}

.navtabs ul li {
border-{vb:stylevar right}: 0;
position: relative;
}

.navtabs li a {
height:30px;
line-height:30px;
padding:0 {vb:stylevar padding};
}

.navtabs li a.navtab {
border-top: {vb:stylevar navbar_tab_bevel};
border-{vb:stylevar left}: {vb:stylevar navbar_tab_bevel};
display:block;
background:{vb:stylevar navbar_tab_background};
_background-image:none;
min-width:{vb:math {vb:stylevar navbar_tab_size.width} - 2 * {vb:stylevar padding}};
width:auto !important;
width:{vb:math {vb:stylevar navbar_tab_size.width} - 2 * {vb:stylevar padding}};
_min-width:{vb:math {vb:stylevar navbar_tab_size.width} - 0.5 * {vb:stylevar padding}};
_width:auto !important;
_width:{vb:math {vb:stylevar navbar_tab_size.width} - 0.5 * {vb:stylevar padding}};
text-align:center;
color: {vb:stylevar navbar_tab_color};
font:{vb:stylevar navbar_tab_font};
text-decoration:none;
line-height:50px;
}

.navtabs li a.navtab:hover {
background:{vb:stylevar navbar_tab_selected_background} 0 -{vb:stylevar navbar_tab_selected_top_width}px;
_background-image:none;
/*color:{vb:stylevar linkhover_color};*/
color:{vb:stylevar navbar_tab_linkhover_color};
}

.navtabs li.selected {
height:{vb:stylevar navbar_tab_size.height}px;
color:{vb:stylevar navbar_tab_linkhover_color};
}

.navtabs li.selected a.navtab {
color:{vb:stylevar navbar_tab_linkhover_color};
background:{vb:stylevar navbar_tab_selected_background};
_background-image:none;
position:relative;
top:-{vb:stylevar navbar_tab_selected_top_width}px;
padding-top:{vb:stylevar navbar_tab_selected_top_width}px;
z-index:10;
}
.navtabs li.selected li a,
.navbar_advanced_search li a {
text-decoration:none;
font:{vb:stylevar navbar_font};
line-height: {vb:stylevar navbar_tab_size.height}px;
}
.navtabs li.selected li a {
color:{vb:stylevar navbar_link_color};
padding:{vb:math {vb:stylevar padding}/5} {vb:math {vb:stylevar padding}/2};
}

.navbar_advanced_search li {
height: {vb:stylevar navbar_tab_size.height}px;
display:block;
clear:both;
}

.navbar_advanced_search li a {
color:{vb:stylevar navbar_link_color};
}

.navbar_advanced_search li a:hover {
color:{vb:stylevar navbar_linkhover_color};
text-decoration:{vb:stylevar linkhover_textDecoration};
}

.navtabs li.selected li a:hover {
color:{vb:stylevar navbar_linkhover_color};
text-decoration:{vb:stylevar linkhover_textDecoration};
}

.navtabs li.selected .popupbody li > a {
padding:{vb:stylevar popup_padding}px {vb:stylevar padding};
text-indent: 0;
color: {vb:stylevar navbar_selected_popup_body_a_Color};
}

.navtabs li.selected li a.popupctrl {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:solid {vb:stylevar lightweightbox_border.borderWidth}px transparent;
_border: none;
background:transparent url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center;
padding-{vb:stylevar right}:15px;
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
color: {vb:stylevar navbar_link_color};
}

.toplinks .notifications a.popupctrl {
padding-top: 3px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: {vb:stylevar navbar_background_notify.backgroundColor} url({vb:stylevar imgdir_misc}/arrow.png) {vb:stylevar right} center no-repeat ;
-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}: {vb:stylevar border_radius};
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}

.toplinks .nonotifications a.popupctrl {
padding-top: 3px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: transparent url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center;
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}

.toplinks .notifications a.popupctrl:hover, .toplinks .nonotifications a.popupctrl:hover, .toplinks .nonotifications a.popupctrl.active {
padding-top: 3px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: {vb:stylevar navbar_tab_background.backgroundColor} url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center;
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}

.toplinks .notifications a.popupctrl:hover {
padding-top: 3px;
}

.navtabs li.selected li:hover a.popupctrl {
border-color:{vb:stylevar navbar_background.backgroundColor};
background-color:{vb:stylevar navbar_tab_background.backgroundColor};
text-decoration:none;
}

.navtabs li.selected li:hover a.popupctrl.active,
.navtabs li.selected li a.popupctrl.active {
border-color:{vb:stylevar navbar_tab_background.backgroundColor};
background-color:{vb:stylevar navbar_tab_background.backgroundColor};
color:{vb:stylevar navbar_link_color};
text-decoration:none;
}

.navtabs .popupbody {
border: 1px solid {vb:stylevar navbar_tab_background.backgroundColor};
background: {vb:stylevar navbar_tab_background.backgroundColor};
width: auto;
}

.navtabs .popupbody li {
float:none;
border-top: 1px solid {vb:stylevar navbar_tab_background.backgroundColor};
}

.navtabs .popupbody li a:hover {
background-color: {vb:stylevar imodhilite_backgroundColor};
}

.nonotifications div.popupbody {
min-width: 170px;
width: auto !important;
width: 170px;
background: {vb:stylevar navbar_tab_background.backgroundColor};
border: 1px solid {vb:stylevar navbar_tab_background.backgroundColor};
}

.nonotifications .popupbody p {
color: {vb:stylevar navbar_selected_popup_body_a_Color};
text-align: {vb:stylevar left};
background: {vb:stylevar navbar_popup_link_background};
border-top: 1px solid {vb:stylevar navbar_tab_background.backgroundColor};
padding: 0;
text-indent: {vb:math {vb:stylevar padding}/2};
line-height: {vb:stylevar navbar_tab_size.height}px;
display:block;
}

.toplinks .nonotifications .popupbody a {
background: {vb:stylevar navbar_popup_link_background};
color: {vb:stylevar navbar_selected_popup_body_a_Color};
float: none;
clear: none;
padding: 0 {vb:math {vb:stylevar padding}/2};
margin-{vb:stylevar left}: 0;
text-align: {vb:stylevar left};
line-height: 30px;
}

.toplinks .nonotifications .popupbody a:hover {
background:{vb:stylevar imodhilite_backgroundColor};
color: {vb:stylevar navbar_selected_popup_body_a_Color};
text-decoration: {vb:stylevar linkhover_textDecoration};
padding: 0 {vb:math {vb:stylevar padding}/2};
}

.globalsearch {
position:absolute;
width:182px;
{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
bottom: 0;
float: {vb:stylevar right};
clear: {vb:stylevar left};
text-align:{vb:stylevar right};
line-height: 1.0em;
display:block;
}

.navbar_search {
position:relative;
width:182px;
bottom: 1px;
float: {vb:stylevar left};
{vb:stylevar right}: -{vb:math {vb:stylevar padding}*2};
display:block;
}

.navbar_search input {
font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
vertical-align:middle;
padding: 1px;
border:{vb:stylevar navbarsearch_borderWidth} solid {vb:stylevar navbarsearch_input_borderColor};
}

.globalsearch .textboxcontainer {
height: 30px;
border-{vb:stylevar left}:{vb:stylevar navbar_tab_border};
display:inline-block;
float: {vb:stylevar left};
text-align:center;
}

.globalsearch .textboxcontainer span {
border-top: {vb:stylevar navbar_tab_bevel};
border-{vb:stylevar left}: {vb:stylevar navbar_tab_bevel};
display: inline-block;
height: {vb:math {vb:stylevar navbar_tab_size.height}-4}px;
padding-{vb:stylevar left}: 2px;
padding-{vb:stylevar right}: 2px;
padding-top: 3px;
margin-bottom: 1px;
width: 147px;
_width:140px; /* ie6 hack */
}

.globalsearch input.textbox {
width: 120px;
}

.toplinks form input.loginbutton {
font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
padding: 0 {vb:math {vb:stylevar padding}/2};
background-color: {vb:stylevar toplinks_input_login_backgroundColor};
border:solid 1px {vb:stylevar heavy_border.borderColor};
}

.globalsearch .buttoncontainer {
height: 30px;
border-{vb:stylevar left}:{vb:stylevar navbar_tab_border};
display:inline-block;
border-{vb:stylevar right}:{vb:stylevar navbar_tab_border};
width: 25px;
overflow: hidden;
float: {vb:stylevar right};
}

.globalsearch .buttoncontainer span{
border-top: {vb:stylevar navbar_tab_bevel};
border-{vb:stylevar left}: {vb:stylevar navbar_tab_bevel};
height: {vb:math {vb:stylevar navbar_tab_size.height}-3}px;
padding-{vb:stylevar left}: 4px;
padding-top: {vb:math {vb:math {vb:stylevar navbar_tab_size.height}-21}/2}px;
display:inline-block;
}

.globalsearch .searchbutton {
border: 0;
padding: 0;
width: 22px;
margin-top: -2px;
margin-{vb:stylevar left}: -2px;
}

[SoltanWorld]

The following error occurred when attempting to evaluate this template:
Unclosed Curly Brace Expression
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

You have paste something wrong, please copy and replace Navbar part in CSS (vbulletin-chrome.css ) with the code in post above (https://vborg.vbsupport.ru/showpost.php?p=2121609&postcount=8)


It looks nice but there's too many graphics in vB as is. Some analytic sites complain vB 4 has too much CSS, JavaScript, graphics affecting loading time.

You know it's just for userfriendly ,coze so many users mind about design and ease of use, also they don't like reading and following images is more interesting for them.

[sadiq6210]

Thanks brother =)

I have a customized templates
could you tell me please what is your modifications in template (vbulletin-chrome.css)

Installed + 5 stars

[betts02]

Was going to use this but you get no images, Would of been great if you would have put some images in this for us to use

Tagged for future use

[COL NIL SATIS]

tagged

[SoltanWorld]

Thanks brother =)

I have a customized templates
could you tell me please what is your modifications in template (vbulletin-chrome.css)

Installed + 5 stars


You're welcome bro, I have changed some sizes and take some related vars apart~ You know , some vars where related to each other like their height and width, so i have change it.



Was going to use this but you get no images, Would of been great if you would have put some images in this for us to use

Tagged for future use

I'll add some for you in these days dear :)

[vb4newb]

Thanks tagged

[horussjr]

you can download images from his site, just for reference but i ware not so inspired. this mod is quite impressive and is the biggest project i tried to edit (let's say) my style screwed up so i rolled back step by step. it's great but it so f****g hard:). verry impressive. congrats:)

[SoltanWorld]

you can download images from his site, just for reference but i ware not so inspired. this mod is quite impressive and is the biggest project i tried to edit (let's say) my style screwed up so i rolled back step by step. it's great but it so f****g hard:). verry impressive. congrats:)

Thanks,:) Yeah It's kind of hard, but you can do it just follow step by step,

First Read :

Manual Add Navbar Links [Plus Image Menu] (https://vborg.vbsupport.ru/showthread.php?t=246687)

Then install this~

[BioWaffen]

Great Mod Soltan!! Installed and thanks a lot!

[SoltanWorld]

Your welcome dear Thanks

[SoltanWorld]

Icon Set Added ~

[OldSchoolDSL]

Instructions did not seem clear.

Would like to see an automated version of this

[SoltanWorld]

I'll as soon as i finished it

[SoltanWorld]

Tested on 4.1.3 ! No Problem , it works.

[xcitezone]

will try :D