The Arcive of Official vBulletin Modifications Site.

[SW] Ultimate Image Navbar · **Released**: 11-12-2010

[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

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]

***Change Log :***

12/21/2010 : Icon Set Added

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

SoltanWorld · #2 11-13-2010, 06:58 PM

First Post Reserved~

WEBDosser · #3 11-13-2010, 07:00 PM

interesting

STORMS · #4 11-13-2010, 08:33 PM

Would this work on 4.0.7?

leclownos · #5 11-13-2010, 09:29 PM

Merci pour ce hack

mgcom · #6 11-13-2010, 11:11 PM

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 · #7 11-14-2010, 01:33 AM

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 · #8 11-14-2010, 03:04 AM

Quote:

Originally Posted by STORMS

Would this work on 4.0.7?

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

HTML Code:

/*************************************************/
/* 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 · #9 11-14-2010, 03:11 AM

Quote:

Originally Posted by 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.

You have paste something wrong, please copy and replace Navbar part in CSS (vbulletin-chrome.css ) with the code in post above

Quote:

Originally Posted by 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.

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 · #10 11-14-2010, 12:31 PM

Thanks brother =)

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

Installed + 5 stars

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.07018 seconds Memory Usage 2,340KB Queries Executed 25 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)bbcode_html (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (9)postbit (4)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!