PDA

View Full Version : Forum Home Enhancements - Another Forum Tabs


vibedream
22 Mar 2009, 13:43
Another Forum Tabs
http://vibe.vn/photo/u1a205p2725/tab.png

Installtion

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

#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 :

<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
22 Mar 2009, 14:06
What does this mod actually do?

Sweeks
22 Mar 2009, 14:23
I think what it does is fairly obvious. It is a form of navigation.
________
THE CIGAR BOSS (http://thecigarboss.com/)

ArnyVee
22 Mar 2009, 15:06
Is there a demo to see the functionality of the tabbed approach?

c.c.
22 Mar 2009, 16:04
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
22 Mar 2009, 23:22
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/skinsshare/2760-demos.png


header template find :
<!--/ logo -->
add :
<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 :
<!-- / breadcrumb, login, pm info -->

add bellow

<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.
22 Mar 2009, 23:39
That's what I'm looking for thanks man!

tipu sulthan
22 Mar 2009, 23:39
look like good

c.c.
22 Mar 2009, 23:40
That's what I'm looking for thanks man!

I use VBadvanced, so do I need to make any changes with those templates?

vibedream
23 Mar 2009, 00:21
I use VBadvanced, so do I need to make any changes with those templates?

No problem, or header or navbar

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

Jasem
23 Mar 2009, 15:46
Good work, thank you......

Installed

vibedream
23 Mar 2009, 18:11
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 .
#vibetab a:hover
{
color: white;
background:url(../images/vibetab.gif) 0% 44% no-repeat;
}

c.c.
23 Mar 2009, 18:36
Doesn't look that bad at all...

www.highdefjunkies.com

SBlueman
24 Mar 2009, 08:19
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
24 Mar 2009, 09:10
I like it. :D

c.c.
24 Mar 2009, 14:36
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
28 Mar 2009, 05:06
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
28 Mar 2009, 07:57
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
28 Mar 2009, 21:20
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
28 Mar 2009, 21:28
thank you

blackwolf062
29 Mar 2009, 15:50
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
29 Mar 2009, 16:40
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
30 Mar 2009, 02:53
anyone know how I can kill the space under the tabs (http://forum.vbulletinsetup.com/index.php?styleid=20)?

JohorBahru
31 Mar 2009, 16:23
how to set it aligned with the right side instead of left side??

Brandon Sheley
31 Mar 2009, 16:31
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
31 Mar 2009, 17:56
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
18 Apr 2009, 13:09
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
18 Apr 2009, 15:31
installed but my active tab doesnt change.. pls help

this is my forum (http://www.kankaforum.gen.tr)

trickfly
18 Apr 2009, 20:07
any screens or demo ?

powerful_rogue
21 Apr 2009, 16:31
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
23 Apr 2009, 12:26
Bump, Any help would be great. Shows fine in FF, just damn IE!

try this :


#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
28 Apr 2009, 02:48
Awsome man. Just great.
Is there a way to use an image? I tried to change the gif but nothing changed.

s2lo7
29 Apr 2009, 16:20
good

DanielN24
30 Apr 2009, 03:49
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 May 2009, 15:44
try this :


#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
10 May 2009, 22:46
I copy this code to navbar <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://www.vbulletin.org/forum/external/2009/05/124.jpg

any one please help..

powerful_rogue
11 May 2009, 15:13
I had similar problem. Its to do with the image link in the css

EG -

#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
12 May 2009, 11:23
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:
#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
25 Jun 2009, 18:16
Looks cool...

belindazhu
29 Jun 2009, 17:00
i met a problem.
My forum is fixed in width as 980px, but when I open my forum, the tags is floated on left, not in the same verticle line with body. how to resolve it?

https://www.vbulletin.org/forum/

deadlySniper
29 Jun 2009, 17:02
This is great, thanks. But I have a different one that's just text :D

DNG
01 Jul 2009, 11:36
nice,, thanks

Mellymonster
01 Sep 2009, 18:26
Is there away to have a tab that only staff can see and members cannot see?

bobster65
01 Sep 2009, 18:33
Is there away to have a tab that only staff can see and members cannot see?

Ya, just wrap the <li> that you want "hidden" with a template conditional.. just replace 5,6 with the user group IDs that you want to be able to SEE the Tab


<if condition="is_member_of($vbulletin->userinfo, 5,6)">
<li><a href="#"><span>Page 3</span></a></li>
</if>

Mellymonster
01 Sep 2009, 18:47
Oh thank you so much for the quick response.

Mellymonster
03 Sep 2009, 03:21
For some reason, in IE this is what it looks like... I am not a regular IE user, but a member brought it to my attention

https://www.vbulletin.org/forum/external/2009/09/23.png

1320Nation
14 Sep 2009, 10:43
Is there anyway to set this mod up so that when a tab is clicked on it opens up a new window so it doesn't pull the viewer away from our website?

Hi-Jack
16 Sep 2009, 20:20
Hi guys, i don't want this tab to show on my portal, only the forums. When placing it in the FORUMHOME template section it only shows up there and not on the forumdisplay... Se where should i add the code for the tabs?

Limode
17 Sep 2009, 13:15
Hi guys, i don't want this tab to show on my portal, only the forums. When placing it in the FORUMHOME template section it only shows up there and not on the forumdisplay... Se where should i add the code for the tabs?

Easy, real this : http://www.vbulletin.com/docs/html/template_conditionals
<if condition="THIS_SCRIPT != 'your portal' ''>
<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>

RedHacker
17 Sep 2009, 21:33
Can create Threads but not show in etg Forum 1 but i the Forum 2 Tab ....?

RedHacker
18 Sep 2009, 07:11
When check tab not show white for understand who tab you are.....

crazymilk
18 Sep 2009, 11:02
Great mod ty

crazymilk
18 Sep 2009, 11:12
How would i add dropdown menu to this?

yotsume
19 Sep 2009, 07:21
Question: How can we change the color of the active tab that we have click on? I would also like to show that tab a bit raised up.

Can both of these effects be done?

RedHacker
19 Sep 2009, 16:41
Question: How can we change the color of the active tab that we have click on? I would also like to show that tab a bit raised up.

Can both of these effects be done?

Yes, how can vibedream ...?

1320Nation
19 Sep 2009, 21:40
Is there anyway to set this mod up so that when a tab is clicked on it opens up a new window so it doesn't pull the viewer away from our website?

Is it not possible to have the tabs open a new browser?

RedHacker
19 Sep 2009, 23:30
Is it not possible to have the tabs open a new browser?

target="_blank"

yotsume
20 Sep 2009, 03:02
UNINSTALLED!

I am going with the bomb of menu systems here instead:

UKBL ~ Quality Drop Down Menu System
http://www.vbulletin.org/forum/showthread.php?t=203521

RedHacker
23 Sep 2009, 10:41
This modification supported................................................?

Limode
23 Sep 2009, 16:31
Question: How can we change the color of the active tab that we have click on? I would also like to show that tab a bit raised up.

Can both of these effects be done?

You need use condition.

RedHacker
23 Sep 2009, 19:07
You need use condition.

How.....?

RedHacker
26 Sep 2009, 13:11
Please how to know who tab show when doing click....?

RedHacker
26 Sep 2009, 15:08
How to disable color white backkground.....?

Limode
26 Sep 2009, 19:57
How to disable color white backkground.....?

Design new images.

RedHacker
26 Sep 2009, 22:24
How to find foor change colors....?

FRANKTHETANK 2
30 Sep 2009, 22:10
i cant get images. aka tabs to show. ive tried cmod and everything and i added full path to CSS, still nothen? help please

decca87
12 Oct 2009, 06:29
same here my directory is public html/forum/images/vibetab.gif no matter what i try no images even if i try the default /images/vibetab.gif :(

RedHacker
12 Oct 2009, 06:39
I think not support from author

decca87
12 Oct 2009, 19:50
he maybe on holiday he hasnt been online since september he has answered others im sure he will answer us we just have to be patient :)

Numenorean7
12 Oct 2009, 22:59
These tabs are great!

Thanks a lot!

RedHacker
12 Oct 2009, 23:02
These tabs are great!

Thanks a lot!

If had white background

GSeybold
14 Oct 2009, 00:51
Sorry to bother but I need help with this mod. Where does the cascade styling sheet go and where does the html page go? :o Sorry> Tech knob here:D

jacko_162
22 Oct 2009, 14:43
it shows fine in FF but IE shows it as a bullet point list?

i tried changing;
../images/vibetab.gif

to

http://www.myforumaddress.com/images/vibetab.gif

and it still shows this way. the code looks straight and i dont see why it doesnt work in IE

bluej
09 Dec 2009, 08:40
very nice mod, thank you :)

DrIpac
14 Dec 2009, 15:42
i met a problem.
My forum is fixed in width as 980px, but when I open my forum, the tags is floated on left, not in the same verticle line with body. how to resolve it?

http://www.jiangsuexpat.com/attachment.php?attachmentid=279&thumb=1&d=1246291137

same problem :confused:

COL NIL SATIS
16 Dec 2009, 16:40
works great..thank you..installed

ShackMaster
13 Jan 2010, 06:37
Sorry... my goof... spoke too soon.

Is there a way to get the drop down menus to work with the tabs?

farazfaraz
12 Jul 2010, 19:57
Demo?
Scrren Shot?