Forum Home Enhancements - [AJAX] Tabbed Forum Home

Tabbed Forum Home version 1.01

[AJAX] Tabbed Forum Home version 1.5.0 (BETA)

NOTE: Works with both 3.7x and 3.6x

Description: This MOD is for creating a "Tabbed" Forum Home Page to have Categories displayed within Tab containers (similar to what the new Profile System looks like on vb3.7). Please do not confuse this with the Tab Menu System here at vbulletin.org. They are totally different systems. These Tabs actually switch the content without leaving the main forums page.

I wrote the initial Non AJAX version based on reading many requests from members asking about how namepros created their custom tabbed forum home page. The first implementation I did was a request by bbwforums.net (which you can visit to see a working example). I have shared this version with many members already and decided to release it since it seems to be something that a lot of members are interested in.

UPDATE: I have released a BETA [AJAX] version for those that what something a little more robust and easier to install/configure. This Beta version will never go into production tho as version 2.0 will utilize the YUI AJAX Tabview Toolset. It IS stable tho and is currently running on a few live sites.

NOTE: Keep in mind, I wrote this with the assumption that you are fairly well versed and comfortable with editing files/templates and following the flow of things. If there is something you don't understand, PLEASE let me know so that I can help you understand it. This IS NOT a product that a novice can just plug and play and it takes a little bit of time to setup, but its well worth it in the end (if you want a custom unique look to your forum home page)... the next version (Don't ask when, cause its just on the drawing board) will be a product with ACP controls for easy setup

The attached Zip File(s) contain the Files and Instructions necessary to install each version.

DEMO: www.bbwforums.net or www.namepros.com
[Moderator Edit: The first URL has been un-linked as there has been reported malware on that domain. The mod author may edit this notice once the situation has been cleaned.]

Screen Shots: None, visit one or both of the above links as seeing them in action is better than some static image(s)..

Bobster

Change Log

version 1.01 -
tabcontent.js ver 2.2 to support remote links
updated install instructions (both in txt and rtf format)

version 1.5.0 -
BETA [AJAX] version

July 8, 2008 - Added xml file for WOL
Sep 2, 2008 - Updated xml file for WOL

[gearspro]

Originally Posted by princeedward

if i'm not wrong you have to edit your ajaxtabs.css file... the one inside tabs folder

either edit first the original and upload it again to your host server or edit direct to your host panel the one you already uploaded....just look around and change or play around to those...

HTML Color Codes in there... eg: #2E9AFE;

you can find nice and easy color here...http://html-color-codes.info/

hope i help you here...goodluck and best regards...

:up:

Ohh yeah i understand, thanks alot. Nice to see you again former mechodownload staff person

[gearspro]

Bobster, i have a question for you.

Is it possible to remove/change the colour the requesting box which appears when it is looking for the forum data? The only reason i ask is because, my forum colors are pretty dark, being reds,greys and blacks, and having the white stands out alot. Thanks alot, for your time and effort. Much appreciated.

[bobster65]

Originally Posted by gearspro

Bobster, i have a question for you.

Is it possible to remove/change the colour the requesting box which appears when it is looking for the forum data? The only reason i ask is because, my forum colors are pretty dark, being reds,greys and blacks, and having the white stands out alot. Thanks alot, for your time and effort. Much appreciated.

ya, just open the CSS File and look for #FFFFFF in regards to any elements like backgrounds and change it to a darker color to match your style..

[gearspro]

Originally Posted by bobster65

ya, just open the CSS File and look for #FFFFFF in regards to any elements like backgrounds and change it to a darker color to match your style..

Ok thanks alot man.

[JVCode]

Been trying to update the colour of the letters of my tabs to white, but it's not having any of it? I know how to edit the colours and what not, but it's just not updating the colour of the font... any ideas?

[Michael.A]

on IE there is a spacing


how can i take that out??

[bobster65]

Originally Posted by JVCode

Been trying to update the colour of the letters of my tabs to white, but it's not having any of it? I know how to edit the colours and what not, but it's just not updating the colour of the font... any ideas?

Everything that controls the Font Colors is in the CSS. Don't forget when editing and reuploading the CSS file to do a Hard Refresh to reload CSS (in case its cached)..

Originally Posted by MAD--DOG

on IE there is a spacing
How can i take that out??

Try removing the code below (in RED) from the FORUMHOME template...

<!-- main -->
<!-- Tabbed Forum Home -->

<div id="ajaxTFH" class="TFHmenu2">
	<ul>
		<li class="selected"><a href="tabforumhome.php?tabcat[]=1" rel="ajaxTFHcontentarea">TAB 1 NAME</a></li>
		<li><a href="tabforumhome.php?tabcat[]=1&tabcat[]=2" rel="ajaxTFHcontentarea">TAB 2 NAME</a></li>
		<li><a href="tabforumhome.php?tabcat[]=1&tabcat[]=2&tabcat[]=3" rel="ajaxTFHcontentarea">TAB 3 NAME</a></li>
	</ul>
</div>

<br style="clear: left" />

<div class="TFHmenu2line"></div>

<div id="ajaxTFHcontentarea" style="border:0px solid gray; width:100%; height: 100%; background-color: white; padding: 0px"></div>

<script type="text/javascript">
	var mytabs=new ddajaxtabs("ajaxTFH", "ajaxTFHcontentarea")
		mytabs.setpersist(true)
		mytabs.setselectedClassTarget("link") 
		mytabs.init()
</script>

<!-- /Tabbed Forum Home  -->
<!-- /main -->

[kmohamed]

what up bro ?

this is one of my fav mods .. thanks a lot

i have 2 question ?

1. Google doesn't cash the forums title ? is this going to affect my site in any way ? am thinking of using the (Tab Forum Home 1.01) ?! because Google will cash that >>
2. is it possible that u make the tabs' color default with any style? i have different colors in one style!!

thanks i am waiting for the final release so bad

[JVCode]

Originally Posted by bobster65

Everything that controls the Font Colors is in the CSS. Don't forget when editing and reuploading the CSS file to do a Hard Refresh to reload CSS (in case its cached)..

I've done as described... but it's still not giving me the desired result.. I'll paste what my ajaxtabs.CSS file has.

/* ######### CSS for Tabbed Forum Home ######### */

.TFHmenu2{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.TFHmenu2 ul{
margin:0;
margin-left: 0px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.TFHmenu2 li{
display: inline;
margin: 0 0 0 0;
padding: 0;
/*text-transform:uppercase;*/
}

.TFHmenu2 a{
float: left;
display: block;
font: 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background: #57BCFF;
border-top: 5px solid white;
}

.TFHmenu2 a:hover{
font: 11px Arial;
background-color: #70FFA9;
color: White;
}

.TFHmenu2 a.selected{
font: bold 13px Arial;
background-color: #57BCFF;
color: white;
border-color: #57BCFF;
}

.TFHmenu2line{
clear: both;
padding: 0;
width: 100%;
height: 2px;
line-height: 2px;
background: #57BCFF;
}

[wAnBoA]

------