PDA

View Full Version : Forum Home Enhancements - Orange Navbar TAB


Limode
14 May 2009, 20:10
This is a navbar tab base CSS
Demo see screenshot

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

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

<!-- 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
14 May 2009, 20:19
Looks nice :) thanks

TWTCommish
14 May 2009, 20:47
Nice. :) Is this freely available for any sort of use, by the way?

pein87
15 May 2009, 16:15
nice work and its css based which is awesome.

Saviour
23 May 2009, 19:37
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
25 May 2009, 09:37
thank u dear,

abouahmed
25 May 2009, 21:47
nice work

Brandon Sheley
25 May 2009, 22:34
how is this different from this version?
http://www.vbulletin.org/forum/showthread.php?t=209097

Saviour
30 May 2009, 23:57
Any answer for changing the active tab?

RichieBoy67
31 May 2009, 14:43
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
01 Jul 2009, 09:53
it works on all browsers but breaks on safari

Gipskopf
20 Aug 2011, 15:21
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
21 Aug 2011, 13:54
hop

Gipskopf
23 Aug 2011, 10:37
hi

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

For Header


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

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;
}