vb.org Archive - Tabs at top of this site

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=111)

- - Tabs at top of this site (https://vborg.vbsupport.ru/showthread.php?t=144683)

Tabs at top of this site

Does anyone have the code for adding the tabbed navigation that exists at the top of this forum?

I'd love to use that sort of navigation for the different sections of my forum.

you might want take a look at http://www.dynamicdrive.com/style/

not exactly wut u lookin for but will give u some ideas!

<a href="https://vborg.vbsupport.ru/showthread.php?t=143032" target="_blank">https://vborg.vbsupport.ru/showthread.php?t=143032</a>

Thanks, but that didnt really tell me how the tabs are added. I understand its in the header template, but does anyone have the instructions on how to write the code.

Just view the source code of the page for a better understanding... I'm not trying to talk down, but it's all done with simple HTML & CSS. :)

I was searching for this, and figured it out, it takes 1 template edit (navbar) and you have to add some code to the style CSS, then upload 2 images.

Actually, one image. That one image has both states of the button. Using CSS, you programmatically change the displayed pixels.

2 images if you want the button width to change with the text. That's what I understand anyway.

anyone have a step by step tutorial on how to create this for our styles???please!! :)

step one, pick one from here
http://exploding-boy.com/images/cssmenus/menus.html

Step 2, download the pack of menus there from here
http://www.exploding-boy.com/2005/12...ation-designs/ where it says "Download the entire menu set"

upload the images for the style you want to your images folder

Example = tableftC.gif and tabrightC.gif

Edit your styles & templates > style manager > YOUR SKIN > Main CSS
Scroll to the bottom to see "Additional CSS Definitions"
Paste the code for your css menu there.
example:

PHP Code:


		
			
 #tabsJ {

      float:right; /* left */

/*      width:100%; */

/*      background:#F4F4F4; */

      font-size:93%;

      line-height:normal;

/*    border-bottom:1px solid #24618E; */

      }

    #tabsJ ul {

    margin:0;

    padding:10px 0px 0 50px;

    list-style:none;

      }

    #tabsJ li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabsJ a {

      float:right; /* left */

      background:url("images/tableftJ.gif") no-repeat left top;

      margin:0;

      padding:0 0 0 5px;

      text-decoration:none;

      }

    #tabsJ a span {

      float:right; /* left */

      display:block;

      background:url("images/tabrightJ.gif") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#24618E;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabsJ a span {float:none;}

    /* End IE5-Mac hack */

    #tabsJ a:hover span {

      color:#FFF;

      }

    #tabsJ a:hover {

      background-position:0% -42px;

      }

    #tabsJ a:hover span {

      background-position:100% -42px;

      }

The go to your navbar template and find

Code:

        <if condition="$show['member']">

        

                <td class="alt2" valign="top" nowrap="nowrap">

ABOVE THAT PASTE

Code:

<div id="tabsJ">

  <ul>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=69" title="Buy and Sell with other members here."><span>Classifieds</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=133" title="Purchase products for your rig from our vendors!"><span>Vendors</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=4" title="Non Tech Forums"><span>Non Tech</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=1" title="Tech Forums"><span>Tech</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/arcade.php" title="Hang out in the Arcade!"><span>Arcade</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/" title="The main forum page!"><span>Home</span></a></li>

  </ul>

</div><br><br>

These are the basic instructions, you can use any tabs you'd like.

Quote:

Originally Posted by 4x4 Mecca (Post 1239477)

PHP Code:


		
			
 #tabsJ {

      float:right; /* left */

/*      width:100%; */

/*      background:#F4F4F4; */

      font-size:93%;

      line-height:normal;

/*    border-bottom:1px solid #24618E; */

      }

    #tabsJ ul {

    margin:0;

    padding:10px 0px 0 50px;

    list-style:none;

      }

    #tabsJ li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabsJ a {

      float:right; /* left */

      background:url("images/tableftJ.gif") no-repeat left top;

      margin:0;

      padding:0 0 0 5px;

      text-decoration:none;

      }

    #tabsJ a span {

      float:right; /* left */

      display:block;

      background:url("images/tabrightJ.gif") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#24618E;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabsJ a span {float:none;}

    /* End IE5-Mac hack */

    #tabsJ a:hover span {

      color:#FFF;

      }

    #tabsJ a:hover {

      background-position:0% -42px;

      }

    #tabsJ a:hover span {

      background-position:100% -42px;

      }

The go to your navbar template and find

Code:

        <if condition="$show['member']">

        

                <td class="alt2" valign="top" nowrap="nowrap">

ABOVE THAT PASTE

Code:

<div id="tabsJ">

  <ul>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=69" title="Buy and Sell with other members here."><span>Classifieds</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=133" title="Purchase products for your rig from our vendors!"><span>Vendors</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=4" title="Non Tech Forums"><span>Non Tech</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=1" title="Tech Forums"><span>Tech</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/arcade.php" title="Hang out in the Arcade!"><span>Arcade</span></a></li>

    <li><a href="http://www.YOURFORUM.com/forum/" title="The main forum page!"><span>Home</span></a></li>

  </ul>

</div><br><br>

These are the basic instructions, you can use any tabs you'd like.

Omgg!!! Thanks so much! im happy i have something to work on right now. lol. you should have this added on the 3.6 template section on vb.org.

If you can follow the directions and they work for you, then I will :) I don't think I wrote them very well.

<a href="http://www.caraudiojunkyard.com/forum" target="_blank">www.caraudiojunkyard.com/forum</a> i think i messed up somewhere. the tabs don't look like tabs for some reason.

they look alright to me, you can move them too if you want. Or change the image files colors.

We have some browser problems:

IE = tabs have a gap between the tabs and navbar
Opera = Looks great
Firefox = tabs are on top of the navbar

I get the same results from your forum too.

bump!! Can anyone help with the browser issues?

maybe we can mess with the location more then. They look fine in my IE 7 and firefox.. never tried opera

I found out it also depend on your resolution. How can we fix this problem?

http://www.caraudiojunkyard.com/forum/16976-post6.html

The resolution is only a problem because of the amount of tabs and the width of the text on them. I would design the tabs around a 800x600 res computer. If you wanted to get deep into it, you could make a profile field option for displaying every tab, that way they only see the ones they choose to see.

Quote:

Originally Posted by 4x4 Mecca (Post 1239973)

Yea i got a couple people with 800x600 having problems. Any other fixes? :(

Find another css menu online with smaller square type buttons, not the rounded ones? Theres no simple answers because you have so many buttons and some wide text ones.

Thanks for awesome tips Mecca.

Excellent tab setup here 4x4, thanks a lot for taking the time to explain this for us.

unfortunately, it doesn't appear to work with IE 8 Beta. Can someone check their install of this to see what it's doing?

Have you turned on the IE 7 Compatibility mode option inside the Admin CP?

Quote:

Originally Posted by Dismounted (Post 1708208)

Have you turned on the IE 7 Compatibility mode option inside the Admin CP?

Where is that?

vBulletin Options > Server Settings (IIRC)

To get the link to open in a new browser window, what you do is add the target="_blank" attribute to your link tag, like this in your Menu Links area

<li><a href="http://www.ukbusinesslive.co.uk/" target="_blank"><span>UK Business Live</span></a></li>

If you do that to the ones that you want to open in a new window, then you don't navigate away from your site ;)

:D

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01275 seconds Memory Usage 1,825KB 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 (4)bbcode_code_printable (2)bbcode_php_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (27)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
Messages: