Tabbed Forum Home v2.0.0 Beta 1 - YUI Based Tabs

N

NAZIA

New Member
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.
  • 1.0x
    1. FORUMHOME - template edits
    2. 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.
    3. /forum_root/tabs/* - added files, remove directory and files within.
    4. /index_tab.php - An edited copy of index.php if is still there, remove it.
    5. /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
    1. clientscript/tabs/ajaxtabs.css - added file, delete.
    2. clientscript/tabs/ajaxtabs.js - added file, delete.
    3. clientscript/tabs/loading.gif - added file, delete.
    4. /tabforumhome.php - added file, delete.
    5. FORUMHOME - template edits, see install doc for v1.5.0 for full changes.
    6. forumhome_forumbit_level1_post - template edits, see install doc for v1.5.0 for full changes.
    7. forumhome_forumbit_level1_nopost - template edits, see install doc for v1.5.0 for full changes.
    8. 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>
Add Before that line:
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 -->
If you have a custom FORUMHOME template, follow Option 2 instead of Option 1.

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">&nbsp;</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']">&nbsp; &nbsp;
            <a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
        </strong></div></td>
    </tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->
Replace with:
HTML: 
     <!-- main -->

<!-- Tabbed Forum Home -->
<div id="forumhome_container">
</div>

<script type="text/javascript">
        $tfh
</script>
<!-- /Tabbed Forum Home  -->
    
<!-- /main -->
OPTION 2 - This is for boards with custom FORUMHOME templates.
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">&nbsp;</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']">&nbsp; &nbsp;
            <a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
        </strong></div></td>
    </tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->
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:

HTML: 
    <!-- main -->

<!-- Tabbed Forum Home -->
<div id="forumhome_container">
</div>

<script type="text/javascript">
        $tfh
</script>
<!-- /Tabbed Forum Home  -->
    
<!-- /main -->
Template: forumhome_forumbit_level1_nopost, forumhome_forumbit_level1_post

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'">
Add this code to the end of the template:

HTML: 
    </if>
Template: forumhome_forumbit_level1_nopost

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>
Replace with:

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>
Find:
HTML: 
     <tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
Replace with:

HTML: 
<tbody id="collapseobj_forumbit_$forumid$GLOBALS[tabID]" style="{$collapseobj_forumid}">
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
 
S

snardley

New Member
HERE IS A FIX ENJOY

Step #1
Ok do not or revert whatever patch king posted on his link to his site the trying of passing variable to template which you can not do in this case and circumstances. Basically you should have everything installed how they said to do and the files in zip without changing a thing.

Step #2
Now the correct IF statement to enter is below. So change the if statement they have and where to add it to the below one.

NEW CORRECT IF STATEMENT:
Code: 
<if condition="(THIS_SCRIPT == 'indexTAB' AND (in_array($forum['forumid'], $_REQUEST['tabcat']) OR in_array('all', $_REQUEST['tabcat']))) OR (THIS_SCRIPT == 'forumdisplay')">
Step #3
Fix for All forums module: For some reason they put -1 instead of all for the tabcat value. So to fix is real easy. There was no check within IF statement for -1 but there was for all.

Module File info BEFORE:
Code: 
tabindex.php?tabcat[]=-1
Module File info AFTER:
Code: 
tabindex.php?tabcat[]=all
Step #4
Fix for data arrays within modules must be URL strict not safe.

Example before:
Code: 
tabindex.php?tabcat[]=1&amp;tabcat[]=47&amp;tabcat[]=58&amp;tabcat[]=70&amp;tabcat[]=78&amp;langid=1

Example after:
Code: 
tabindex.php?tabcat[]=1&tabcat[]=47&tabcat[]=58&tabcat[]=70&tabcat[]=78&langid=1


OPEN:
tfh_modules.php (admincp file)

FIND TWO INSTANCES OF:
Code: 
'file' => TYPE_NOHTML,

REPLACE WITH:
Code: 
'file' => TYPE_HTML,

Step #5 (OPTIONAL)
Also highly recommended for up to date YUI libraries and much quicker load and single batch calls follow the below instructions. Basically replace the add js code into header that is posted in instructions with the below.

FORUM HOME TEMPLATE CHANGE:

Code: 
<!-- 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 -->


REPLACE WITH:
Code: 
<!-- Tabbed Forum Home Header Code -->	
<!-- Dependencies -->
<!-- TFH Skin CSS for TabView -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/tabview/assets/skins/sam/tabview.css">
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/skin-tfh.css" />

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/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 -->
 
K

kenblat

New Member
confirm data arrays error messages fixed!

everything look fine on my testing server, but it broke the unique CSS from seperate forum... how can i keep the origin div style as before mod the TAB
 
G

Gantz

New Member
Anyone still keeping TABS on this? heh heh..

But really this would be a nice addition to my forums.
 
J

jeanvd

New Member
WTF... not working!!!?

my site with firefox:

"Miscoding content

The page you are trying to view can not be displayed because
uses a compression format invalid or not supported.."

works with vb 3.8.1?

:( Help.
 
M

Maz

New Member
Sorted the tcat class prob (when installed the mod the tcat class goes weird)

All you have to do is open "root-/clientscript/yui/tabview/assets/skin-tfh.css"

and remove
/* kill inheritance */
.yui-navset .yui-content div div {border:0; padding:0;}
Click to expand...

All done :)

*Also if you wanna change the tab colours etc. you can also edit them in that file.
 
You must log in or register to reply here.
Top