The Arcive of Official vBulletin Modifications Site.

[AJAX] Tabbed Forum Home · **Released**: 04-09-2008

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 · #**1582** 09-01-2009, 12:18 AM

<li class="selected"><a href="tabforumhome.php?tabcat[]=42" rel="ajaxTFHcontentarea">Competitions</a></li>
<li><a href="tabforumhome.php?tabcat[]=42&tabcat[]=25" rel="ajaxTFHcontentarea">Games Discussion</a></li>
<li><a href="tabforumhome.php?tabcat[]=42&tabcat[]=25&tabcat[]=29" rel="ajaxTFHcontentarea">Gameplay</a></li>

Really dont know where i've gone wrong, followed your instructions completely, yet it doesnt work.. If you could help me out, that would be great.

<code>$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />

$headinclude
<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>

<link rel="stylesheet" type="text/css" href="/clientscript/tabs/ajaxtabs.css" />
<script type="text/javascript" src="/clientscript/tabs/ajaxtabs.js"> </script>

</head>
<body>
$header
$navbar

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

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1">
<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
</table>

<br />
</if>




<div id="ajaxTFH" class="TFHmenu2">
<ul>

<li class="selected"><a href="www.gearspro.com/public_html/forums/tabforumhome.php?tabcat[]=42" rel="ajaxTFHcontentarea">Competitions</a></li>
<li><a href="www.gearspro.com/public_html/forums/tabforumhome.php?tabcat[]=42&tabcat[]=25" rel="ajaxTFHcontentarea">Games Discussion</a></li>
<li><a href="www.gearspro.com/public_html/forums/tabforumhome.php?tabcat[]=42&tabcat[]=25&tabcat[]=29" rel="ajaxTFHcontentarea">Gameplay</a></li>

</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>




<br />
$ad_location[ad_forumhome_afterforums]
<br />


<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
</tr>
</thead>
$template_hook[forumhome_wgo_pos1]
<if condition="$show['loggedinusers']">

<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
<a href="online.php$session[sessionurl_q]">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
<tr>
<td class="alt2"><a href="online.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
<td class="alt1" width="100%">
<div class="smallfont">
<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
<div>$activeusers</div>
</div>
</td>
</tr>
</tbody>

</if>
$template_hook[forumhome_wgo_pos2]
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
<tr>
<td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
<td class="alt1" width="100%">
<div class="smallfont">
<div>
$vbphrase[threads]: $totalthreads,
$vbphrase[posts]: $totalposts,
$vbphrase[members]: $numbermembers<if condition="$show['activemembers']">,
<span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
</if>
</div>
<div><phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
$template_hook[forumhome_wgo_stats]
</div>
</td>
</tr>
</tbody>
$template_hook[forumhome_wgo_pos3]
<if condition="$show['birthdays']">

<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
$vbphrase[todays_birthdays]
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
<tr>
<td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&day=$today&sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
<td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
</tr>
</tbody>

</if>
$template_hook[forumhome_wgo_pos4]
<if condition="$show['upcomingevents']">
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
<if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
<tr>
<td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
<td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
</tr>
</tbody>
</if>
$template_hook[forumhome_wgo_pos5]
</table>
<br />



<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont">  $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont">  $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<if condition="$vboptions['showlocks']">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont">  $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</if>
</table>
</td>
<if condition="!$show['guest']">

<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>

</if>
</tr>
</table>


$footer
</body>
</html>

</code>

Thats the full code i have.

Regards, sam.

bobster65 · #**1583** 09-01-2009, 12:23 AM

Quote:

Originally Posted by gearspro

Really dont know where i've gone wrong, followed your instructions completely, yet it doesnt work.. If you could help me out, that would be great.

Thats the full code i have.

Regards, sam.

Try removing the / (In Red below in both paths) ...

Code:

<!-- Tabbed Forum Home Header Code -->
<link rel="stylesheet" type="text/css" href="/clientscript/tabs/ajaxtabs.css" />
<script type="text/javascript" src="/clientscript/tabs/ajaxtabs.js"> </script>
<!-- /Tabbed Forum Home Header Code -->

gearspro · #**1584** 09-01-2009, 12:27 AM

Quote:

Originally Posted by bobster65

Try removing the / (In Red below in both paths) ...

Code:

<!-- Tabbed Forum Home Header Code -->
<link rel="stylesheet" type="text/css" href="/clientscript/tabs/ajaxtabs.css" />
<script type="text/javascript" src="/clientscript/tabs/ajaxtabs.js"> </script>
<!-- /Tabbed Forum Home Header Code -->

Ok thanks for the extremely swift reply :O

Thanks for the advice, i got the tabs to show now. I was wondering where do i find the categories of for each tab? I thought you were referring to the forum ID, but obviously not, thanks alot.

Sam

gearspro · #**1585** 09-01-2009, 01:33 AM

Quote:

Originally Posted by bobster65

Try removing the / (In Red below in both paths) ...

Code:

<!-- Tabbed Forum Home Header Code -->
<link rel="stylesheet" type="text/css" href="/clientscript/tabs/ajaxtabs.css" />
<script type="text/javascript" src="/clientscript/tabs/ajaxtabs.js"> </script>
<!-- /Tabbed Forum Home Header Code -->

Ok i managed to get that working xD

But i have what i think to be a minor problem.

As you can see from the screen shot, it give me two forum bars which i dont think are supposed to be present and also there is a random white bar below. If you could help me out i'd be very greatfull, Already clicked installed

Thanks sam.

princeedward · #**1586** 09-01-2009, 09:09 AM

Quote:

Originally Posted by bobster65

There is a solution to get this working with Cyb's Sub Forum Manager .. just do a quick search on this thread.... I don't have it memorized, but its pretty easy to implement.

GREAT & THANKS!...got it now...so for more info about having problem and conflict with Cyb Sub forum Mod.

Solutions:

Go > ACP > Plugins & Products > Plugin Manager > Product : Cyb - Sub-Forum Manager >

Cyb - Sub-Forum Manager - CT

Cyb - Sub-Forum Manager 1

Find:

if ($vbulletin->options['cybsfa_enable'] AND (THIS_SCRIPT=='index' OR THIS_SCRIPT=='forumdisplay'))

Change To:

if ($vbulletin->options['cybsfa_enable'] AND (THIS_SCRIPT=='index' OR THIS_SCRIPT=='forumdisplay' OR THIS_SCRIPT=='tabforumhome'))

Save:

Great & Enjoy Both Wonderful Mod

:up:

bobster65 · #**1587** 09-01-2009, 12:51 PM

Quote:

Originally Posted by gearspro

Ok i managed to get that working xD

But i have what i think to be a minor problem.

As you can see from the screen shot, it give me two forum bars which i dont think are supposed to be present and also there is a random white bar below. If you could help me out i'd be very greatfull, Already clicked installed

Thanks sam.

Ya, with a custom style, you are going to have to do a little tweaking to this. The white bar on the bottom can be fixed be changing the background color in this DIV on the FORUMHOME template from white to match your style.

Code:

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

To fix the dupe output bar, it looks like you put the default vB main code into the FORUMHOMETAB template instead of your custom styles main code...

Megatr0n · #**1588** 09-01-2009, 12:52 PM

Bob, did you get my PM?

gearspro · #**1589** 09-01-2009, 04:05 PM

Quote:

Originally Posted by bobster65

Ya, with a custom style, you are going to have to do a little tweaking to this. The white bar on the bottom can be fixed be changing the background color in this DIV on the FORUMHOME template from white to match your style.

Code:

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

To fix the dupe output bar, it looks like you put the default vB main code into the FORUMHOMETAB template instead of your custom styles main code...

Ok thanks for all your help, i got it to work

. Installed.

gearspro · #**1590** 09-01-2009, 06:08 PM

Could you tell me the name of the file that you must edit to change the color of the tabs please?

princeedward · #**1591** 09-01-2009, 06:46 PM

Quote:

Originally Posted by gearspro

Could you tell me the name of the file that you must edit to change the color of the tabs please?

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:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.16358 seconds Memory Usage 2,382KB Queries Executed 27 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (5)bbcode_code (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (4)pagenav_pagelinkrel (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (4)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!