vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)
-   -   Forum Home Enhancements - Orange Navbar TAB (https://vborg.vbsupport.ru/showthread.php?t=213712)

Limode 05-13-2009 09:00 PM
Orange Navbar TAB
 
1 Attachment(s)
This is a navbar tab base CSS
Demo see screenshot

Install :
Upload images to /images/ folder
Additional CSS Definitions Add :

Code:
ul.newsnav {
        float:left;
        clear:both;
        margin:0;
        padding:0;
        width:840px;
}

ul.newsnav li {
        float:left;
        height:27px;
        list-style-type:none;
        display:inline;
        font-size:12px;
        margin-right:1px;
        padding-top:12px;
}

ul.newsnav li.inorange {
        height:27px;
        width:auto;
        padding:0 4px 0 0;
        background:url(images/tabright.png) bottom right no-repeat;
        text-transform:uppercase;
        color:#fff;
        margin-top:12px;
}

ul.newsnav li.inorange span {
        float:left;
        height:21px;
        width:auto;
        padding:6px 15px 0 20px;
        background:url(images/tableft.png) bottom left no-repeat;
}

ul.newsnav li a {
        float:left;
        height:27px;
        width:auto;
        padding:0 4px 0 0;
        background:url(images/tabright.png) top right no-repeat;
        display:block;
        text-transform:uppercase;
        color:#2b6d9f;
        text-decoration:none;
}

ul.newsnav li a span {
        float:left;
        height:21px;
        width:auto;
        padding:6px 16px 0 20px;
        background:url(images/tableft.png) top left no-repeat;
        cursor:pointer;
        display:block;
}

ul.newsnav li a:hover {
        background-position:bottom right;
        color:#fff;
}

ul.newsnav li a:hover span {
        background-position:bottom left;
        color:#fff;
}
Add to navbar template or any where you need.

Navigation / Breadcrumb Templates / navbar
Very above find <br /> and add under

Code:
<!-- New Navbar -->
<div align="center">
<ul class="newsnav">
<li class="inorange"><span>Home</span></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>People</span></a></li>
<li><a href="#"><span>Social</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Orange TAB</span></a></li>
</ul>
</div>
<!-- / New Navbar -->

marshal_ramdev 05-14-2009 06:19 PM
Looks nice :) thanks

TWTCommish 05-14-2009 06:47 PM
Nice. :) Is this freely available for any sort of use, by the way?

pein87 05-15-2009 02:15 PM
nice work and its css based which is awesome.

Saviour 05-23-2009 05:37 PM
Installed, but haven't marked as installed...only because when you click the orange tab you create...it does not remain orange when you go to the page you created for that tab.

lm3a.net 05-25-2009 07:37 AM
thank u dear,

abouahmed 05-25-2009 07:47 PM
nice work

Brandon Sheley 05-25-2009 08:34 PM
how is this different from this version?
https://vborg.vbsupport.ru/showthread.php?t=209097

Saviour 05-30-2009 09:57 PM
Any answer for changing the active tab?

RichieBoy67 05-31-2009 12:43 PM
I am just wondering if anyone has installed this yet. I would like to see it operational on a live site rather than a screenshot...

Thanks,
Rich
webdevoman

Raptor 07-01-2009 07:53 AM
it works on all browsers but breaks on safari

Gipskopf 08-20-2011 01:21 PM
1 Attachment(s)
Hello
In Firefox everything is displayed correctly.
But not in Internet explorer. There, the tabs are displayed side by side but not on each other.

Sometimes I hang a picture on how it looks in internet explorer.


Can you help me?

Can watch it live in my test forum.
http://an.diespritzer.de

Oh yes, you have to choose one style down under some circumstances.

Gipskopf 08-21-2011 11:54 AM
hop

Gipskopf 08-23-2011 08:37 AM
hi

fixed version for all Browser. IE9 - FF - Chrome and VB3.8

For Header


PHP Code:
<!-- New Navbar -->
<div style="float:right;padding-right:5%">
    <ul class="newsnav">
        <li class="inorange"><span>Lackshop</span></li>
        <li><a href="#"><span>News</span></a></li>
        <li><a href="#"><span>People</span></a></li>
        <li><a href="#"><span>Social</span></a></li>
        <li><a href="#"><span>About us</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
        <li><a href="#"><span>Orange TAB</span></a></li>
    </ul>
</div>
<!-- / New Navbar --> 
For Css.

PHP Code:
ul.newsnav {
    clear:both;
    margin:0;
    padding:0;
    width:840px;
}

ul.newsnav li {
    float:right;
    height:27px;
    list-style-type:none;
    display:inline;
    font-size:12px;
    margin-right:1px;
    padding-top:12px;
}

ul.newsnav li.inorange {
    float:right;
    height:27px;
    display:inline;
    width:auto;
    padding:0 4px 0 0;
    background:url(images/tabright.png) bottom right no-repeat;
    text-transform:uppercase;
    color:#fff;
    margin-top:12px;
}

ul.newsnav li.inorange span {
    height:21px;
    width:auto;
    padding:6px 16px 0 20px;
    background:url(images/tableft.png) bottom left no-repeat;
    cursor:pointer;
    display:block;
}

ul.newsnav li a {
    height:27px;
    width:auto;
    padding:0 4px 0 0;
    background:url(images/tabright.png) top right no-repeat;
    display:block;
    text-transform:uppercase;
    color:#2b6d9f;
    text-decoration:none;
}

ul.newsnav li a span {
    height:21px;
    width:auto;
    padding:6px 16px 0 20px;
    background:url(images/tableft.png) top left no-repeat;
    cursor:pointer;
    display:block;
}

ul.newsnav li a:hover {
    background-position:bottom right;
    color:#fff;
}

ul.newsnav li a:hover span {
    background-position:bottom left;
    color:#fff;
} 


All times are GMT. The time now is 09:04 PM.

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.02798 seconds
  • Memory Usage 1,784KB
  • 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
  • (2)bbcode_code_printable
  • (2)bbcode_php_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (14)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