vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Add-On Releases - [SW] Ultimate Image Navbar (https://vborg.vbsupport.ru/showthread.php?t=253626)

SoltanWorld 11-12-2010 10:00 PM
[SW] Ultimate Image Navbar
 
1 Attachment(s)
[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 11-13-2010 06:58 PM
First Post Reserved~

WEBDosser 11-13-2010 07:00 PM
interesting

STORMS 11-13-2010 08:33 PM
Would this work on 4.0.7?

leclownos 11-13-2010 09:29 PM
Merci pour ce hack

mgcom 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 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 11-14-2010 03:04 AM
Quote:
Originally Posted by STORMS (Post 2121540)
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 11-14-2010 03:11 AM
Quote:
Originally Posted by mgcom (Post 2121568)
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 (Post 2121598)
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 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

betts02 11-14-2010 12:53 PM
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 11-14-2010 02:39 PM
tagged

SoltanWorld 11-14-2010 05:25 PM
Quote:
Originally Posted by sadiq6210 (Post 2121730)
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.



Quote:
Originally Posted by betts02 (Post 2121732)
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 11-14-2010 11:16 PM
Thanks tagged

horussjr 11-17-2010 06:13 PM
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 11-17-2010 06:27 PM
Quote:
Originally Posted by horussjr (Post 2122911)
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]

Then install this~

BioWaffen 11-29-2010 08:06 AM
Great Mod Soltan!! Installed and thanks a lot!

SoltanWorld 11-30-2010 04:45 PM
Your welcome dear Thanks

SoltanWorld 12-21-2010 05:25 PM
Icon Set Added ~

OldSchoolDSL 12-24-2010 05:17 AM
Instructions did not seem clear.

Would like to see an automated version of this

SoltanWorld 01-29-2011 07:42 PM
I'll as soon as i finished it

SoltanWorld 05-10-2011 07:42 AM
Tested on 4.1.3 ! No Problem , it works.

xcitezone 05-12-2011 07:25 AM
will try :D


All times are GMT. The time now is 10:43 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01177 seconds
  • Memory Usage 1,815KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_html_printable
  • (6)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (23)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete