Tabbed Forum Home v2.0.0 Beta 1 - YUI Based Tabs
Description
This modification allows the creation of a "Tabbed" Forum Home Page to have categories displayed within tab containers (similar to what the new profile system looks like in vB 3.7+). This new version also allows custom modules to be written and added to your tabs, side by side with any of the forum tabs.
v2.0, unlike 1.01 and 1.5.0, utilizes Yahoo's YUI (Yahoo User Interface Library) to create and display the tabs. vBulletin already uses parts of the YUI library to create some features within vBulletin.
The first implementation of Tabbed Forum Home was a non-AJAX version based on reading several requests. The second implementation was an AJAX version that utilized a different AJAX library than the current implementation, but was still very useful.
Support and Bug Tracking
Support and Bug Tracking can be found in this Forum.
Install Instructions
Install instructions can be found in this thread and/or post 2&3 of this thread
Screen Shots
You can find screenshots within this post.
Installing v2.0.x is much simpler than any previous version of TFH to install, first, you want to remove the following files and revert changes from previous versions to the templates. Note: You may want to keep the tab's data for reference later.
Step 1: Make Reverts
The first step is to revert your forum to not include any tabs, this will be a clean slate for TFH and improve the quality of the installation instructions. Listed below is template edits, file edits, and uploaded files for you to remove and change back to the original. For full reverts needed, please look at the install docs for version 1.0x located in the download package.
Now that you have reverted changes from previous versions, the installation of v2.0 comes next.
Step 2: File Uploads
You want to upload the following files to your server into the corresponding directory on your server. These files are found in the "UPLOAD" folder of the package. Note: The Uploads folder has a syntax of sorting files into sub-folders. These folders correspond to the default names for folders in a vBulletin installation. The files directly found within the "UPLOAD" folder signify the forum root.
Upload the following files:
Step 3: Product Import
To do the bulk of the installation, all you need to do is import the file called product_bobster_tfh.xml by following entering the ACP and following this set of links:
ACP -> Plugins & Products -> Manage Products -> [Add/Import Product]
Once you import the product, it will add a template called "FORUMHOMETAB" to all your styles. This template includes the default template data located within the FORUMHOME template's <!-- main --> comments.
Step 4: Template Edits
Template: FORUMHOME
Find:
Add Before that line:
If you have a custom FORUMHOME template, follow Option 2 instead of Option 1.
OPTION 1:
Find:
Replace with:
OPTION 2 - This is for boards with custom FORUMHOME templates.
Find (This is the default template, yours will vary.):
Copy your custom modifications and replace the contents of the template "FORUMHOMETAB" with your custom modifications - nothing will be lost from TFH as the template FORUMHOMETAB is just a copy of the default code within <!-- main --> and <!-- /main -->.
After you have copied your code, replace the code you copied above (in the FORUMHOME template) with:
Template: forumhome_forumbit_level1_nopost, forumhome_forumbit_level1_post
Add this code to the beginning of the template:
Add this code to the end of the template:
Template: forumhome_forumbit_level1_nopost
Find:
Replace with:
Find:
Replace with:
Step 5: Adding Tabs & Modules
Now that you have completed the file uploads, template edits, and product import, you are ready to add tabs and modules.
Adding A Tab
To add a tab, refresh your ACP and you should see a "Tabs" group in your ACP. Expand this group and click on "Manage Tabs. Click on "[Add Tab]", and fill out the form.
The "Tab Name" is what will be displayed within the tab. "Forums" is the forums you want displayed in the tab. Separate items using a comma (",") and no spaces! "Limit tabs to..." is the usergroup permission set up, usage is explained on the form. "Cache Data" tells YUI if it should fetch the data once and cache it so it doesn't reload the data every time a user clicks on the tab.
Clicking "Add Tab" will add the tab to your forum home listing.
Adding a Module
To add a module you click on the "Manage Modules" link in the "Tabs" group. Click on the "Add Module" and fill out the form, it is basically the same as tabs except for the fact that you must specify a file name. The "Enable Module" option will specify whether or not you want the module to display. Disabled modules are not deleted, they just will not show on the forum home with the rest of your tabs.
OR Click on this for Install instructions can be found in this thread and/or post 2&3 of this thread
[YUI] Tabbed Forum Home - vBulletin.org Forum
Description
This modification allows the creation of a "Tabbed" Forum Home Page to have categories displayed within tab containers (similar to what the new profile system looks like in vB 3.7+). This new version also allows custom modules to be written and added to your tabs, side by side with any of the forum tabs.
v2.0, unlike 1.01 and 1.5.0, utilizes Yahoo's YUI (Yahoo User Interface Library) to create and display the tabs. vBulletin already uses parts of the YUI library to create some features within vBulletin.
The first implementation of Tabbed Forum Home was a non-AJAX version based on reading several requests. The second implementation was an AJAX version that utilized a different AJAX library than the current implementation, but was still very useful.
Support and Bug Tracking
Support and Bug Tracking can be found in this Forum.
Install Instructions
Install instructions can be found in this thread and/or post 2&3 of this thread
Screen Shots
You can find screenshots within this post.
Installing v2.0.x is much simpler than any previous version of TFH to install, first, you want to remove the following files and revert changes from previous versions to the templates. Note: You may want to keep the tab's data for reference later.
Step 1: Make Reverts
The first step is to revert your forum to not include any tabs, this will be a clean slate for TFH and improve the quality of the installation instructions. Listed below is template edits, file edits, and uploaded files for you to remove and change back to the original. For full reverts needed, please look at the install docs for version 1.0x located in the download package.
- 1.0x
- FORUMHOME - template edits
- index.php - file edits; the easiest way to revert this is to download the vBulletin package that corresponds to your version and upload index.php overwriting your changes.
- /forum_root/tabs/* - added files, remove directory and files within.
- /index_tab.php - An edited copy of index.php if is still there, remove it.
- /index_*.php - the backup file the install docs instructed you to change, you may either remove this or rename it back to index.php. This may not correspond to your current version, so your best bet would be the step described in #2.
- 1.5.0 Beta
- clientscript/tabs/ajaxtabs.css - added file, delete.
- clientscript/tabs/ajaxtabs.js - added file, delete.
- clientscript/tabs/loading.gif - added file, delete.
- /tabforumhome.php - added file, delete.
- FORUMHOME - template edits, see install doc for v1.5.0 for full changes.
- forumhome_forumbit_level1_post - template edits, see install doc for v1.5.0 for full changes.
- forumhome_forumbit_level1_nopost - template edits, see install doc for v1.5.0 for full changes.
- FORUMHOMETAB - remove the template; clicking [Revert] on the custom template should remove this
Now that you have reverted changes from previous versions, the installation of v2.0 comes next.
Step 2: File Uploads
You want to upload the following files to your server into the corresponding directory on your server. These files are found in the "UPLOAD" folder of the package. Note: The Uploads folder has a syntax of sorting files into sub-folders. These folders correspond to the default names for folders in a vBulletin installation. The files directly found within the "UPLOAD" folder signify the forum root.
Upload the following files:
- /tabindex.php
- /tab_blog.php - Note: This is used by the default vBulletin Blog Module. This requires vBulletin Blog to be installed and activated to work.
- /tab_blog_entry.php - Note: This is not used by the default vBulletin Blog Module. This requires vBulletin Blog to be installed and activated to work. To set the blog module to use this file, use the "Edit Module Functionality" to set the file name to this file.
- /tab_pt.php - Note: This file is not currently being shipped with Beta 1 - it will ship with Beta 2! This file will be used for the default Project Tools module and requires vBulletin Project Tools to be installed and activated to work.
- /clientscript/yui/tabview/* - Upload the directory tabview and all files inside of it.
- /clientscript/yui/elements/* - Upload the directory elements and all files inside of it.
- /clientscript/yui/fonts/* - Upload the directory fonts and all files inside of it.
- /clientscript/yui/utilities/* - Upload the directory utilities and all files inside of it.
- /includes/xml/cpnav_tfh.xml
- /admincp/tfh.php
- /admincp/tfh_fixes.php
- /admincp/tfh_impex.php
- /admincp/tfh_modules.php
Step 3: Product Import
To do the bulk of the installation, all you need to do is import the file called product_bobster_tfh.xml by following entering the ACP and following this set of links:
ACP -> Plugins & Products -> Manage Products -> [Add/Import Product]
Once you import the product, it will add a template called "FORUMHOMETAB" to all your styles. This template includes the default template data located within the FORUMHOME template's <!-- main --> comments.
Step 4: Template Edits
Template: FORUMHOME
Find:
HTML:
</head>
HTML:
<!-- Tabbed Forum Home Header Code -->
<!-- Dependencies -->
<!-- TFH Skin CSS for TabView -->
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/tabview.css" />
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/skin-tfh.css" />
<!-- JavaScript Dependencies for Tabview: -->
<script type="text/javascript" src="clientscript/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="clientscript/yui/element/element-beta-min.js"></script>
<!-- Source file for TabView -->
<script type="text/javascript" src="clientscript/yui/tabview/tabview-min.js"></script>
<!-- Source file for Dispatcher -->
<script type="text/javascript" src="clientscript/yui/tabview/dispatcher.js"></script>
<!-- /Tabbed Forum Home Header Code -->
OPTION 1:
Find:
HTML:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[align=left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->
HTML:
<!-- main -->
<!-- Tabbed Forum Home -->
<div id="forumhome_container">
</div>
<script type="text/javascript">
$tfh
</script>
<!-- /Tabbed Forum Home -->
<!-- /main -->
Find (This is the default template, yours will vary.):
HTML:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[align=left]">$vbphrase[forum]</td>
<td class="thead">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->
After you have copied your code, replace the code you copied above (in the FORUMHOME template) with:
HTML:
<!-- main -->
<!-- Tabbed Forum Home -->
<div id="forumhome_container">
</div>
<script type="text/javascript">
$tfh
</script>
<!-- /Tabbed Forum Home -->
<!-- /main -->
Add this code to the beginning of the template:
HTML:
<if condition="(THIS_SCRIPT == 'indexTAB' AND in_array($forum['forumid'], $GLOBALS[tabcats]) OR in_array('all',$GLOBALS[tabcats])) OR THIS_SCRIPT == 'forumdisplay'">
HTML:
</if>
Find:
HTML:
<a style="float:$stylevar[align=right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
HTML:
<a style="float:$stylevar[align=right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid$GLOBALS[tabID]')"><img id="collapseimg_forumbit_$forumid$GLOBALS[tabID]" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
HTML:
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
HTML:
<tbody id="collapseobj_forumbit_$forumid$GLOBALS[tabID]" style="{$collapseobj_forumid}">
Now that you have completed the file uploads, template edits, and product import, you are ready to add tabs and modules.
Adding A Tab
To add a tab, refresh your ACP and you should see a "Tabs" group in your ACP. Expand this group and click on "Manage Tabs. Click on "[Add Tab]", and fill out the form.
The "Tab Name" is what will be displayed within the tab. "Forums" is the forums you want displayed in the tab. Separate items using a comma (",") and no spaces! "Limit tabs to..." is the usergroup permission set up, usage is explained on the form. "Cache Data" tells YUI if it should fetch the data once and cache it so it doesn't reload the data every time a user clicks on the tab.
Clicking "Add Tab" will add the tab to your forum home listing.
Adding a Module
To add a module you click on the "Manage Modules" link in the "Tabs" group. Click on the "Add Module" and fill out the form, it is basically the same as tabs except for the fact that you must specify a file name. The "Enable Module" option will specify whether or not you want the module to display. Disabled modules are not deleted, they just will not show on the forum home with the rest of your tabs.
OR Click on this for Install instructions can be found in this thread and/or post 2&3 of this thread
[YUI] Tabbed Forum Home - vBulletin.org Forum