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

[bobster65]

Originally Posted by Sharapova

Any chance you could help me with that?

I was looking for something similar to:

http://www.bbwforums.net/

With the margin set up like that too.

Default Colour: #000000
When Clicked: blue/gradients/gradient_tcat.gif

Would very very much appreciate it. If you were looking for a very small fee I could give that too.

Find This chunk of code in the FORUMHOME template ...

<div id="ajaxTFH" class="TFHmenu2">
	<ul>
		<li class="selected"><a href="tabforumhome.php?tabcat[]=93&tabcat[]=97" rel="ajaxTFHcontentarea">Dream Teams</a></li>

        <li><a href="tabforumhome.php?tabcat[]=109" rel="ajaxTFHcontentarea">Sports</a></li>

     <li><a href="tabforumhome.php?tabcat[]=4&tabcat[]=3" rel="ajaxTFHcontentarea">FFL Coach</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>

Replace that with this ....

<ul id="ajaxTFH" class="shadetabs">
<li><a href="tabforumhome.php?tabcat[]=93&tabcat[]=97" rel="ajaxTFHcontentarea" class="selected>Dream Teams</a>
<li><a href="tabforumhome.php?tabcat[]=109" rel="ajaxTFHcontentarea">Sports</a></li>
<li><a href="tabforumhome.php?tabcat[]=4&tabcat[]=3" rel="ajaxTFHcontentarea">FFL Coach</a></li>
</ul>

<div id="ajaxTFHcontentarea" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 10px">
</div>

Replace your current CSS with this CSS and make sure to edit the paths below in red to reflect the location of those images

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #FFFFFF;
background: #5C7099 url(http://www.bbwforums.net/innocence/gradients/gradient_thead.gif) repeat-x top left;
}

.shadetabs li a:visited{
color: #FFFFFF;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #FFFFFF;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(http://www.bbwforums.net/innocence/gradients/gradient_tcat.gif);



border-bottom-color: #0088ba;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

[Sharapova]

Thank you so much, will try now

[Sharapova]

Slight problem, I'm missing a tab now.

I figured that it was cause you didn't put the </li> at the end after it didn't work and still doesn't show. The Sports tab now shows the Dream Team Forums

[bobster65]

Originally Posted by Sharapova

Slight problem, I'm missing a tab now.

I figured that it was cause you didn't put the </li> at the end after it didn't work and still doesn't show. The Sports tab now shows the Dream Team Forums

ya, I forgot the </li> and the " after selected ... replace with this one

<ul id="ajaxTFH" class="shadetabs">
<li><a href="tabforumhome.php?tabcat[]=93&tabcat[]=97" rel="ajaxTFHcontentarea" class="selected">Dream Teams</a></li>
<li><a href="tabforumhome.php?tabcat[]=109" rel="ajaxTFHcontentarea">Sports</a></li>
<li><a href="tabforumhome.php?tabcat[]=4&tabcat[]=3" rel="ajaxTFHcontentarea">FFL Coach</a></li>
</ul>

<div id="ajaxTFHcontentarea" style="border:1px solid gray; width:100%; margin-bottom: 1em; padding: 10px">
</div>

[Sharapova]

No real problems left.

Thanks for everything and enjoy your day.

[bobster65]

Originally Posted by Sharapova

No real problems left.

Thanks for everything and enjoy your day.

Cool Beans don't forget to mark installed

[King Kovifor]

Here is a Plugins XML file that will fix the unknown location bug.

Installation
Upload the attached file using the ACP -> Plugins & Products -> Download / Upload page.

[CodyMuir]

Hey, i can't seem to get it to match my forum color.

I don't know why lol i've looked through a lot of posts and not many people seem to have the same error.
http://clandwd.com
Can you please help!

Thanks, Cody.

[bobster65]

Originally Posted by CodyMuir

Hey, i can't seem to get it to match my forum color.

I don't know why lol i've looked through a lot of posts and not many people seem to have the same error.
http://clandwd.com
Can you please help!

Thanks, Cody.

you'll need to edit the CSS file and change the color settings to match your style. Its pretty simple

[bobster65]

*UPDATE*

added XML File for [AJAX] version 1.5 WOL (Who's Online) to the first post...