Basic Breakdown
Here's a basic explanation as to how the code works. This should help you to create new tabs and what can be edited in the code to your preferences.
The Tabs: Let's take a look back at the code you just added. In
Step 4 you added a bunch of lines like this one. These are your tabs, the parts that people will actually click on to change the content view. In this example we're looking at the code for Tab 2.
Code:
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]"> </a></span></li>
The code in red is your TITLE. It's what will show in the Tool Tip when someone mouseovers one of the tabs. Change this to your liking. I group my tabs by categories like Contact Info, TCG Info, General Info, etc. Do what cha' like.
The code in blue just a non-breaking space added in so people have something to click on. Users will see a background image, but what they'll actually be clicking is this non-breaking space. Change this space if you want to use text for your tabs instead of images. Otherwise just leave it be. (See
FAQ)
The Containers: Now lets take a look at your containers. These are the DIVs that will display your content when a new tab is clicked. Each one is marked <!-- TAB [#] CONTENT --> and correspond to each of the tabs mentioned in the block of code above.
Code:
<!--TAB 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">
<div class="info">Tab 2 Content:Block A</div>
<div class="info">Tab 2 Content:Block A</div>
<div class="info">Tab 2 Content:Block A</div>
<div class="info">Tab 2 Content:Block A</div>
</div>
The code in blue, the DIV, is your container, and is needed for the tabs to work. This part you would not change.
Everything on the inside is replaceable code and can be customize to look however you want. Examples of code snippets you can move into each of these tabs can be found a little further down in this post.
Creating New Tabs
Let's take a look at the
Step 4 code again. Here's the code for Tab 2 again, as well as it's corresponding container.
Code:
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]"> </a></span></li>
Code:
<!-- TAB 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">
<div class="info">Tab 2 Content:Block A</div>
<div class="info">Tab 2 Content:Block B</div>
<div class="info">Tab 2 Content:Block C</div>
<div class="info">Tab 2 Content:Block D</div>
</div>
The green code in both blocks here is what tells Tab 2 to show container 2's content. The rel of the tab is the same as the id of the container. They're both tab2$post[postid].
So when creating additional tabs, pick up where the numbers left off on the last tab and start again. I had you install 5 tabs, so if your using all 5 and want to add another, the
rel for your new tab and
id for your new container would both be
tab6$post[postid]. The next tab and container you add would be
tab7$post[postid]. Then the next
tab8$post[postid] and so on and so forth. You get the idea.
More Options
NOTE: This has since been set to false by default. Users have been reporting some login issues when this is set to true. So use at your own discretion.
This line of code sets the persistence of a clicked tab each time a user returns to that page during the same browser session. Set to
true, and the last clicked tab will always display that tab on reload. Set to
false, and it will show the tab with the ID
selected each time. Note that each tab is unique, and having this set to
true won't make much of a difference to your users view of the forum. The only tab that will ever persist is the one he/she clicked on, on a specific post in a specific thread, and only there. And only during the same browser session.
Put a number inside the parenthesis to determine how many
milliseconds you want to pass between each time the tabs automatically toggle themselves. I have not tried this option yet, and I can imagine that it would be very annoying. But I figured, why not let you try it.
Code:
<if condition="$variable[variable]"></if>
Code:
<if condition="$variable[variable]"><else /></if>
vBulletin IF Conditionals can be used to show/hide whole tabs, or the specific content of tabs based on a number of parameters: Usergroup Permissions, Forum IDs, User IDs, Thread IDs, Post IDs, etc. Just wrap a conditional around a whole tab and then it's container, or wrap the content of the container in any number of fashions. To learn more about what conditionals are available here are two good resources:
Default Postbit Legacy Code Bits
Here's a few of the things that come standard in vBulletin that you might want to move to the various
DIV containers.
Online Status:
Code:
<div class="info">$post[onlinestatus] </div>
Posts:
Code:
<div class="info">$vbphrase[posts]: $post[posts]</div>
Age:
Code:
<if condition="$post['age']"><div class="info">$vbphrase[age]: $post[age]</div></if>
Join Date:
Code:
<if condition="$post['joindate']"><div class="info">$vbphrase[join_date]: $post[joindate]</div></if>
Biography:
Code:
<if condition="$post[field1]"><div class="info"><b>Biography:</b> $post[field1]</div></if>
Interests:
Code:
<if condition="$post[field3]"><div class="info"><b>Interests:</b> $post[field3]</div></if>
Occupation:
Code:
<if condition="$post[field4]"><div class="info"><b>Occupation:</b> $post[field4]</div></if>
Infractions:
Code:
<if condition="$show['infraction']"><div class="info">$vbphrase[infractions]: $post[warnings]/$post[infractions] ($post[ipoints])</div></if>
Reputation:
Code:
<if condition="$show['infraction']"><div class="info">$vbphrase[infractions]: $post[warnings]/$post[infractions] ($post[ipoints])</div></if>
<if condition="$show['reputation']"><div class="info"><span id="repdisplay_$post[postid]_$post[userid]">$post[reputationdisplay]</span></div></if>
<if condition="$show['reppower']"><div class="info">$vbphrase[reppower]: <span id="reppower_$post[postid]_$post[userid]">$post[reppower]</span></div></if>
Instant Messengers:
Code:
<if condition="$post[icqicon] or $post[aimicon] or $post[msnicon] or $post[yahooicon] or $post[skypeicon]"><div class="info">$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div></if>
Common Hack Postbit Legacy Code Bits
Here's a few code bits that you'll find in some of the more common vBulletin modifications that you might have installed that you'd like to move to the DIV containers.
vBCredits:
Code:
<if condition="$show['credits_post']">
<div class="info">
$vbphrase[credits]: <span id="cdt_$post[postid]_$post[userid]">$post[credits]</span> <if condition="$show['credits_donate']">[<a href="credits.php?$session[sessionurl]do=manage&u=$post[userid]#donate">$vbphrase[donate]</a>]</if> <if condition="$show['credits_check']">[<a href="credits.php?$session[sessionurl]do=banking&u=$post[userid]">$vbphrase[check]</a>]</if>
</div>
</if>
Countries/Region Flags (Replace 8 and 9 with whatever fields your using):
Code:
<!-- FLAGS START -->
<if condition="$post['field8'] OR $post['field9']">
<div class="info">
<if condition="$post[field8]">
<img src="images/flags/$post[field8].gif" alt="$post[field8]" /></if>
<if condition="$post[field9]">
<img src="images/region/$post[field9].gif" alt="$post[field9]" /></if>
</div>
</if>
<!-- / FLAG END -->
ibProArcade (With some slight additions by me):
Code:
<div class="info">
<if condition="$crowns">
$post[crowns]$post[champtext]
<else />
$post[username] has not championed any arcade games. </if>
</div>
Made Up Postbit Legacy Codes:
And here's at least one I just went ahead and made up for my forum:
Send User a PM/Email/Friend Request:
Code:
<div class="info">
<if condition="$show['pmlink'] OR $show['emaillink'] OR $post['userid'] AND $show['member']">
Send $post[username]:<br /></if>
<if condition="$show['pmlink']">
<a href="private.php?$session[sessionurl]do=newpm&u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">a Private Message</phrase></a><br />
</if>
<if condition="$show['emaillink']">
<a href="sendmessage.php?$session[sessionurl]do=mailmember&u=$post[userid]" rel="nofollow">an Email</a><br />
</if>
<if condition="$post['userid'] AND $show['member']">
<a href="profile.php?$session[sessionurl]do=addlist&userlist=buddy&u=$post[userid]">a Friend Request</a>
</if></div>
If you have more examples that I can post, possible some I overlooked or mods I don't have installed, please feel free to post them and I'll add them to this post.
More Information