vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

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 - Another Forum Tabs (https://vborg.vbsupport.ru/showthread.php?t=209097)

vibedream 03-21-2009 10:00 PM
Another Forum Tabs
 
1 Attachment(s)
Another Forum Tabs
http://vibe.vn/photo/u1a205p2725/tab.png

Installtion

- Upload vibetab.gif to images/
- Edit template / Additional CSS Definitions add :

PHP Code:
#vibetab
{
    margin:5px 0 0 0px;
    height:29px;
    font-weight:bold;
}
#vibetab a
{
    color:white;
    background:url(../images/vibetab.gif) 0% 0% no-repeat;
    text-decoration: none;
    padding-left: 6px;
    margin:0;
    height:29px;
    outline:0;
}
#vibetab a span
{
    background: url(../images/vibetab.gif) 100% 0% no-repeat;
    padding: 9px 12px 0 4px;
    height:29px;
    cursor: pointer;
}
#vibetab a, #vibetab a span
{
    display: block;
    float: left;
}
#vibetab a#active_menutopnav
{
    color: black;
    background:url(../images/vibetab.gif) 0% 44% no-repeat;
}
#vibetab a#active_menutopnav span
{
    background: url(../images/vibetab.gif) 100% 50% no-repeat;
}
#vibetab a:hover
{
    color: white;
    background:url(../images/vibetab.gif) 0% 89% no-repeat;
}
#vibetab a:hover span
{
    background: url(../images/vibetab.gif) 100% 100% no-repeat;
}

#vibetab ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#vibetab li
{
    float: left;
    margin: 0;
} 
Add to template you want :

PHP Code:
    <div id="vibetab">
    <ul>
    <li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
    <li><a href="#"><span>Forum</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Mods</span></a></li>
    <li><a href="#"><span>Styles</span></a></li>
    <li><a href="#"><span>Graphic</span></a></li>
    <li><a href="#"><span>Page 1</span></a></li>
    <li><a href="#"><span>Page 2</span></a></li>
    <li><a href="#"><span>Page 3</span></a></li>
    </ul>
    </div> 

DanTHEGREAT 03-22-2009 12:06 PM
What does this mod actually do?

Sweeks 03-22-2009 12:23 PM
I think what it does is fairly obvious. It is a form of navigation.
________
THE CIGAR BOSS

ArnyVee 03-22-2009 01:06 PM
Is there a demo to see the functionality of the tabbed approach?

c.c. 03-22-2009 02:04 PM
Are the tabs below the logo at the top of the page? I've been trying to find this mod forever. An example as what I'm looking for is the tabs that vbulletin.org has on top of their page. does this mod do that????

i would like to add tabs on top of my page.


www.highdefjunkies.com

vibedream 03-22-2009 09:22 PM
Quote:
Originally Posted by c.c. (Post 1774197)
Are the tabs below the logo at the top of the page? I've been trying to find this mod forever. An example as what I'm looking for is the tabs that vbulletin.org has on top of their page. does this mod do that????

i would like to add tabs on top of my page.


www.highdefjunkies.com
http://vibe.vn/members/shine/albums/...2760-demos.png


header template find :
PHP Code:
<!--/ logo --> 
add :
PHP Code:
    <div id="vibetab">
    <ul>
    <li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
    <li><a href="#"><span>Forum</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Mods</span></a></li>
    <li><a href="#"><span>Styles</span></a></li>
    <li><a href="#"><span>Graphic</span></a></li>
    <li><a href="#"><span>Page 1</span></a></li>
    <li><a href="#"><span>Page 2</span></a></li>
    <li><a href="#"><span>Page 3</span></a></li>
    </ul>
    </div> 
If you want add to above navbar, navbar template find :
PHP Code:
<!-- / breadcrumb, login, pm info --> 
add bellow

PHP Code:
    <div id="vibetab">
    <ul>
    <li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
    <li><a href="#"><span>Forum</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Mods</span></a></li>
    <li><a href="#"><span>Styles</span></a></li>
    <li><a href="#"><span>Graphic</span></a></li>
    <li><a href="#"><span>Page 1</span></a></li>
    <li><a href="#"><span>Page 2</span></a></li>
    <li><a href="#"><span>Page 3</span></a></li>
    </ul>
    </div> 
Change ur link.

c.c. 03-22-2009 09:39 PM
That's what I'm looking for thanks man!

tipu sulthan 03-22-2009 09:39 PM
look like good

c.c. 03-22-2009 09:40 PM
Quote:
Originally Posted by c.c. (Post 1774609)
That's what I'm looking for thanks man!
I use VBadvanced, so do I need to make any changes with those templates?

vibedream 03-22-2009 10:21 PM
Quote:
Originally Posted by c.c. (Post 1774612)
I use VBadvanced, so do I need to make any changes with those templates?
No problem, or header or navbar

c.c. 03-23-2009 12:14 PM
How do you change the colors to fit your site. The green doesn't really mesh with my site.

Jasem 03-23-2009 01:46 PM
Good work, thank you......

Installed

vibedream 03-23-2009 04:11 PM
Quote:
Originally Posted by c.c. (Post 1774947)
How do you change the colors to fit your site. The green doesn't really mesh with my site.
You need change green to white like active .
PHP Code:
#vibetab a:hover
{
    color: white;
    background:url(../images/vibetab.gif) 0% 44% no-repeat;
} 

c.c. 03-23-2009 04:36 PM
Doesn't look that bad at all...

www.highdefjunkies.com

SBlueman 03-24-2009 06:19 AM
Is there a way to allow CSS to define the colors of the tab images instead of having to use the default .gif file? I have about 35 css defined skins on my site.

RobbieZ 03-24-2009 07:10 AM
I like it. :D

c.c. 03-24-2009 12:36 PM
Quote:
Originally Posted by SBlueman (Post 1775617)
Is there a way to allow CSS to define the colors of the tab images instead of having to use the default .gif file? I have about 35 css defined skins on my site.
That would be huge for me also. I tried to change the colors of the gif but couldn't get the colors rights.

SBlueman 03-28-2009 03:06 AM
Quote:
Originally Posted by SBlueman (Post 1775617)
Is there a way to allow CSS to define the colors of the tab images instead of having to use the default .gif file? I have about 35 css defined skins on my site.
Just wondering if the author or anyone else knew the answer to this.

Macs 03-28-2009 05:57 AM
this would be great if it could be done as a auto template for us not so hot on editing templates im sure many people are looking for a mod like this

powerful_rogue 03-28-2009 07:20 PM
Fantastic add on! Thank you!

Ive currently got this on top of the navbar - would there be an easy way to allign this in the center of the navbar?

forumsonsuz 03-28-2009 07:28 PM
thank you

blackwolf062 03-29-2009 01:50 PM
thanks installed works great.

for those who wanted different colours for buttons

although i only have one skin i change the button colours by using photo shop

SBlueman 03-29-2009 02:40 PM
right....but I have about 35 css defined skins on my site. Does that mean I need to have 35 .gif files and edit the mod in each skin to call up each different color?

Brandon Sheley 03-30-2009 12:53 AM
anyone know how I can kill the space under the tabs?

JohorBahru 03-31-2009 02:23 PM
how to set it aligned with the right side instead of left side??

Brandon Sheley 03-31-2009 02:31 PM
Quote:
Originally Posted by JohorBahru (Post 1781105)
how to set it aligned with the right side instead of left side??
edit the CSS, change "left" to "right"
that's what I did :up:

JohorBahru 03-31-2009 03:56 PM
Quote:
Originally Posted by Loco.M (Post 1781109)
edit the CSS, change "left" to "right"
that's what I did :up: but I would still like to move it to the left a few pixels
thank you :)

powerful_rogue 04-18-2009 11:09 AM
1 Attachment(s)
Seem to have a small problem with this in IE. Ive attatched a screenshot if anyone would be able to help!

Its the first tab, "Home" which dosent seem to display properly

oskqqqq 04-18-2009 01:31 PM
installed but my active tab doesnt change.. pls help

this is my forum

trickfly 04-18-2009 06:07 PM
any screens or demo ?

powerful_rogue 04-21-2009 02:31 PM
Quote:
Originally Posted by powerful_rogue (Post 1793849)
Seem to have a small problem with this in IE. Ive attatched a screenshot if anyone would be able to help!

Its the first tab, "Home" which dosent seem to display properly
Bump, Any help would be great. Shows fine in FF, just damn IE!

isatice 04-23-2009 10:26 AM
Quote:
Originally Posted by powerful_rogue (Post 1795992)
Bump, Any help would be great. Shows fine in FF, just damn IE!
try this :


Code:
#vibetab
{
    margin:5px 0 0 0px;
    height:29px;
    font-weight:bold;
}
#vibetab a
{
    color:white;
    background:url(../images/vibetab.gif) 0% 0% no-repeat;
    text-decoration: none;
    padding-left: 6px;
    margin:0;
    height:29px;
    outline:0;
}
#vibetab a span
{
    background: url(../images/vibetab.gif) 100% 0% no-repeat;
    padding: 9px 12px 0 4px;
    height:20px;
    cursor: pointer;
}
#vibetab a, #vibetab a span
{
    display: block;
    float: left;
}
#vibetab a#active_menutopnav
{
    color: black;
    background:url(../images/vibetab.gif) 0% 45% no-repeat;
}
#vibetab a#active_menutopnav span
{
    background: url(../images/vibetab.gif) 100% 45% no-repeat;
}
#vibetab a:hover
{
    color: white;
    background:url(../images/vibetab.gif) 0% 89% no-repeat;
}
#vibetab a:hover span
{
    background: url(../images/vibetab.gif) 100% 89% no-repeat;
}
#vibetab ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#vibetab li
{
    float: left;
    margin: 0;
}

mrtroybaker 04-28-2009 12:48 AM
Awsome man. Just great.
Is there a way to use an image? I tried to change the gif but nothing changed.

s2lo7 04-29-2009 02:20 PM
good

DanielN24 04-30-2009 01:49 AM
How would I make it so that when you click on it, it automatically loads without having to change to a new page..

Kinda like here

http://sportstwo.com/forums/
and
http://www.dailysportspages.com/forums/

powerful_rogue 05-05-2009 01:44 PM
Quote:
Originally Posted by isatice (Post 1797299)
try this :


Code:
#vibetab
{
    margin:5px 0 0 0px;
    height:29px;
    font-weight:bold;
}
#vibetab a
{
    color:white;
    background:url(../images/vibetab.gif) 0% 0% no-repeat;
    text-decoration: none;
    padding-left: 6px;
    margin:0;
    height:29px;
    outline:0;
}
#vibetab a span
{
    background: url(../images/vibetab.gif) 100% 0% no-repeat;
    padding: 9px 12px 0 4px;
    height:20px;
    cursor: pointer;
}
#vibetab a, #vibetab a span
{
    display: block;
    float: left;
}
#vibetab a#active_menutopnav
{
    color: black;
    background:url(../images/vibetab.gif) 0% 45% no-repeat;
}
#vibetab a#active_menutopnav span
{
    background: url(../images/vibetab.gif) 100% 45% no-repeat;
}
#vibetab a:hover
{
    color: white;
    background:url(../images/vibetab.gif) 0% 89% no-repeat;
}
#vibetab a:hover span
{
    background: url(../images/vibetab.gif) 100% 89% no-repeat;
}
#vibetab ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#vibetab li
{
    float: left;
    margin: 0;
}
Hi,

Really sorry about not replying soon, ive been away for a bit.

Ive tried using the code above, but for some reason the text in the first tab still looks out of place in IE. Looks brillaint in FF, just not IE!

Any other tips you may have would be greatly appreciated!

PHILIPS-08 05-10-2009 08:46 PM
I copy this code to navbar
Code:
    <div id="vibetab">
    <ul>
    <li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
    <li><a href="#"><span>Forum</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Mods</span></a></li>
    <li><a href="#"><span>Styles</span></a></li>
    <li><a href="#"><span>Graphic</span></a></li>
    <li><a href="#"><span>Page 1</span></a></li>
    <li><a href="#"><span>Page 2</span></a></li>
    <li><a href="#"><span>Page 3</span></a></li>
    </ul>
    </div>
after i save it i am viewing like this https://vborg.vbsupport.ru/external/2009/05/124.jpg

any one please help..

powerful_rogue 05-11-2009 01:13 PM
I had similar problem. Its to do with the image link in the css

EG -

Quote:
#vibetab
{
margin:5px 0 0 0px;
height:29px;
font-weight:bold;
}
#vibetab a
{
color:white;
background:url(../images/vibetab.gif) 0% 0% no-repeat;
text-decoration: none;
padding-left: 6px;
Go through and put a direct link in to the image and it should work.

franzis 05-12-2009 09:23 AM
Hello,

because the self-manufactured Tab drafts, so vibetab.gif always somewhat delayed, because I want to ask what the percentages are exactly the effect.

For example:
PHP Code:
#vibetab a#active_menutopnav
{
    color: black;
    background:url(../images/vibetab.gif) 0% 45% no-repeat;
}
#vibetab a#active_menutopnav span
{
    background: url(../images/vibetab.gif) 100% 45% no-repeat;
}
#vibetab a:hover
{
    color: white;
    background:url(../images/vibetab.gif) 0% 89% no-repeat;
} 
If now background: url(../images/vibetab.gif) 100% 45% no-repeat;
an amendment to background: url(../images/vibetab.gif) 100% 60% no-repeat;
is made, what happens there, the percentages with the image and its position to do?

I just want to understand and perfect this great mod to use, hence my question.

Apologies my English, I hope you can understand what I want ;)


LG Franzis

ubcforums 06-25-2009 04:16 PM
Looks cool...


All times are GMT. The time now is 11:57 AM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

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.01710 seconds
  • Memory Usage 1,902KB
  • 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
  • (3)bbcode_code_printable
  • (8)bbcode_php_printable
  • (12)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (40)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
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete