DJ's Dynamic Tab Content for Postbit_Legacy

[trulylowcarb]

:eek: Well, I finally checked out all the examples and no one's actually does that (cycles theough the tabs). I guess I got confused about what to expect because of the animated screenshot.

Or, is there in fact a way to get it to cycle through the tabs automatically? Isn't that what the mytabs.init() code is for? If so, it's not working for me when I add a number there.

The slowness seemed to resolve itself, so I am going for *installed* now, regardless. Thanks for the great instructions and useful mod. I just need to figure out now hot to use labelled tabs if they aren't going to cycle, or my members will never 'get it'.

[Digital Jedi]

:eek: Well, I finally checked out all the examples and no one's actually does that (cycles theough the tabs). I guess I got confused about what to expect because of the animated screenshot.

Or, is there in fact a way to get it to cycle through the tabs automatically? Isn't that what the mytabs.init() code is for? If so, it's not working for me when I add a number there.

The slowness seemed to resolve itself, so I am going for *installed* now, regardless. Thanks for the great instructions and useful mod. I just need to figure out now hot to use labelled tabs if they aren't going to cycle, or my members will never 'get it'.
That's what that line is for. How many seconds did you put in the parenthesis?

[trulylowcarb]

I tried several different settings, if I remember correctly... both single (9) and double digits (15). Didn't seem to change anything. The rest of the mod works great for me.

[Digital Jedi]

I tried several different settings, if I remember correctly... both single (9) and double digits (15). Didn't seem to change anything. The rest of the mod works great for me.
I wasn't explicit enough when I typed that part of the post, but I should have made it clear that you need to put in the time in the number of milliseconds you want to pass between tabs. Yours was probably working, but at 9 milliseconds, no one could tell. Try something like 3000.

[trulylowcarb]

hahahahahahahahaaaaaaa - that explains it, alright! BIG difference between seconds and milliseconds.

But now I also see why no one seems to actually use the cycle variable! Like you say in the directions ..... pretty annoying! But only because of the size differences between tabs.

Guess I need to figure out the proper max size based on the longest tab content, which for me and for many others probably is the Bio, and then restrict the total postbit height, so the table size doesn't change along with the tab content - at the moment, it is unbearable as-is. <off to play with the template again>
Thanks, Digital Jedi!

[trulylowcarb]

Aaaaaah............ now it's PERFECT!!!!!

*nominated for MOTM*

[Digital Jedi]

Thank you.

[itsheinz]

Sir is this applicable in 3.8.1?

[Bowromir]

I would like to know too! This looks totally awesome! Woooow!

[Digital Jedi]

vB version is irrelevant. It's not dependent on anything that they change regularly, and was originally designed for any website.

[Bowromir]

Yeah that's waht I thought.. anyways.. this is awesome.. If I get the thing to work, I'll make a small donation asap!

[Digital Jedi]

Thank you.

[GrendelKhan{TSU]

omg been looking for something like this FOREVER!!

bookmarked... but soooo doing it. :) thx! :D

[SEW810]

well, i'll test it.
Anyone using this MOD + vbexperience?.

Regards

[vash911]

Is it possible to have independent image for each dot? or are they all stuck as 1 type of dot color?

[Feanor_87]

I'm wondering the same as the poster above me

Great MOD btw! Definetly on of my favorites and a must have for every forum.

[Tacama]

well, i'll test it.
Anyone using this MOD + vbexperience?.

Regards

Yup... working smoothly in 3.82 with vbexperience.

As soon as i finish making all the changes i need on my forum i'll post an image.

Great work Digital Jedi :up:

[dancue]

Any way to have it auto switch between tabs? Like you picture in the first post does?

[dancue]

disregard the above.

Any way to go through the cycle of tabs only once?

What about rollover instead of click?

[Digital Jedi]

Is it possible to have independent image for each dot? or are they all stuck as 1 type of dot color?

I'm wondering the same as the poster above me

Great MOD btw! Definetly on of my favorites and a must have for every forum.
This could probably be accomplished by altering the CSS. You'd have to create a unique class for each individual tab and then attribute the different images to those classes. Would probably be a fair amount of work to get going though.


disregard the above.

Any way to go through the cycle of tabs only once?

What about rollover instead of click?
Not without editing the JavaScript directly. I'm not sure what would need to be changed off the top of my head. Hopefully I can get around this around the same time I do the AME updates.

[dancue]

Cool.

Anyone know how to display vbookie personal stats instead of dispating user cash. I'd like to display what's displayed in the stats section of vbookie

[Digital Jedi]

Cool.

Anyone know how to display vbookie personal stats instead of dispating user cash. I'd like to display what's displayed in the stats section of vbookie
I've not used vBookie, but find out how the postbit info is displayed and refer to my FAQ on the first page. Depending on how it's displayed (either through a template hook or using variables) you should be able to use the info there to get it to display the way you want.

[Digital Jedi]

This could probably be accomplished by altering the CSS. You'd have to create a unique class for each individual tab and then attribute the different images to those classes. Would probably be a fair amount of work to get going though.


And this is what happens when you answer questions not having slept in 24 hours. This is actually covered in the FAQ that I wrote. Just put the URL to each image you want where the non-breaking spaces (&nbsp;) are in the <a></a> tags, remembering to remove the background image in the CSS file. This will not be able to do multiple mouseover/selected images this way though.

[dancue]

Not without editing the JavaScript directly. I'm not sure what would need to be changed off the top of my head. Hopefully I can get around this around the same time I do the AME updates.

Where you referring to the mouseover, or going through the cycle only once.

I could live with only one now if you can remember...(now that you've had some sleep...jk lol)

[Digital Jedi]

Where you referring to the mouseover, or going through the cycle only once.

I could live with only one now if you can remember...(now that you've had some sleep...jk lol)
For the cycle it would probably be a JavaScript edit. For the mouseover, I should have said you can do that by editing the CSS file.

[dancue]

How can I do the mouseover? What do I need to edit?

[dancue]

Guess I need to figure out the proper max size based on the longest tab content, which for me and for many others probably is the Bio, and then restrict the total postbit height, so the table size doesn't change along with the tab content - at the moment, it is unbearable as-is. <off to play with the template again>
Thanks, Digital Jedi!

Where would I edit the height of the postbit? So that it stays fixed...the length of the longest tab?

[tipoboy]

Where would I edit the height of the postbit? So that it stays fixed...the length of the longest tab?

probably in the postbit_legacy template, if you want it xhtml compliant however you'd probably have to define a class in the table and use custom CSS elements to define the height :)

[dancue]

I know the title says Postbit_legacy, but can this be done for the postbit as well?

I haven't had any success.

[tipoboy]

I know the title says Postbit_legacy, but can this be done for the postbit as well?

I haven't had any success.

yea could be, would require a small amount of html knowledge, in fact i would think it would be quite easy to adapt for the postbit template

[Digital Jedi]

I know the title says Postbit_legacy, but can this be done for the postbit as well?

I haven't had any success.
Look for Boosted Panda's posts in this thread and look for his postbit modification where he implements it for the postbit.

[dancue]

sorry, I should have read through the thread...

Thanks for your help!

[dancue]

I should have explained myself better. Can I have this working in postbit as well as postbit_legacy. My users have the option of selecting vertical or horizontal postbit view.

[Digital Jedi]

I should have explained myself better. Can I have this working in postbit as well as postbit_legacy. My users have the option of selecting vertical or horizontal postbit view.
Yes, being able to switch wouldn't matter. But you need to take a look at Boosted Panda's Better Postbit Template (https://vborg.vbsupport.ru/showthread.php?t=194552) to make it work in the postbit. The reason being is that it sets a fixed height for the postbit.

[dancue]

Okay, I've managed to add this to the postbit and am not able to get the 6th tab to show the content I'm inputing. Instead it's giving me the "Tab 6 content..."

In fact, I don't understand what's going on with this. If I have the Dynamic tabs running on both the postbit and postbit legacy they will not show correctly on either.

[Digital Jedi]

Would help if I could see your site and/or your postbit code.

[dancue]

Okay, what I did was start from scratch. I did one tab at a time for each the postbit and postbit_legacy.

It all seems to work now, except the code for the contact me info I'd like to add.

Here it is:
<div class="info" align="center">
<if condition="$show['pmlink'] OR $show['emaillink'] OR $post['userid'] AND $show['member']">
Contact $post[username]:<br /></if>

<if condition="$show['pmlink']><fieldset class="fieldset"><legend>PM</legend>
<a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]"><img src="images/buttons/pmthisuser.png" alt="Send $post[username] a Private Message" style="border:0" /></a><br />
</fieldset></if>

<if condition="$show['emaillink']"><fieldset class="fieldset"><legend>E-Mail</legend>
<a href="sendmessage.php?$session[sessionurl]do=mailmember&amp;u=$post[userid]" rel="nofollow"><img src="images/buttons/emailuser.png" alt="Send $post[username] an E-Mail" style="border:0" /></a><br />
</fieldset></if>

<if condition="$post['userid'] AND $show['member']"><fieldset class="fieldset"><legend>Befriend</legend>
<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]"><img src="images/buttons/Befriend.png" alt="Send $post[username] a Friendship Request" style="border:0" /></a>
</fieldset></if>

<if condition="$post['userid'] AND $show['member']"><fieldset class="fieldset"><legend>Profile Message</legend>
<a href="http://www.unifiedchamp.com/ucforum/members/$post[username]"><img src="images/buttons/visitormessage.png" alt="Leave $post[username] a Profile Message" style="border:0" /></a>
</fieldset></if>

</div>

[Digital Jedi]

This line is the problem. Your missing a closing tag and a quotation mark. Highlighted in red.

<if condition="$show['pmlink']"><fieldset class="fieldset"><legend>PM</legend>
<a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]"><img src="images/buttons/pmthisuser.png" alt="Send $post[username] a Private Message" style="border:0" /></phrase></a><br />
</fieldset></if>

[DobieGillis?]

fantastic Mod, nominated.

[dancue]

This line is the problem. Your missing a closing tag and a quotation mark. Highlighted in red.

<if condition="$show['pmlink']"><fieldset class="fieldset"><legend>PM</legend>
<a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]"><img src="images/buttons/pmthisuser.png" alt="Send $post[username] a Private Message" style="border:0" /></phrase></a><br />
</fieldset></if>


I lie to you not...I've spent many, many hours trying different things. Didn't even bother checking all of the closing tags...

Thank you. Works now... :D

The only thing I can't understand is the text not wrapping within the the <div class="info"> tags. It wraps within the postbit_legacy, but the postbit looks like the picture below.

[Digital Jedi]

fantastic Mod, nominated.
Thank you.

I lie to you not...I've spent many, many hours trying different things. Didn't even bother checking all of the closing tags...

Thank you. Works now... :D

The only thing I can't understand is the text not wrapping within the the <div class="info"> tags. It wraps within the postbit_legacy, but the postbit looks like the picture below.
Check the div tag that's holding that text and check to see if you have a a nowrap tag in it. Take it out if you do and see if that helps.

[dancue]

None of them have "nowrap" within them.

Here is the complete code:
<div class="smallfont">
<div class="postbittop" align="left">
<!-- BEGIN POSTBIT TABS -->
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="General"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="Statistics"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="UCMoney"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="Fun Stats"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="Personal Details"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
<li><span title="Contact Information"><a href="#" rel="tab6$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div>

<div class="smallfont">

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">

<if condition="$post['joindate']"><div class="info">$vbphrase[join_date]: $post[joindate]</div></if>
<if condition="$post['field2']"><div class="info">$vbphrase[location_perm]: $post[field2]</div></if>
<if condition="$post['age']"><div class="info">$vbphrase[age]: $post[age]</div></if>
<div class="info">$vbphrase[posts]: $post[posts]</div>
<if condition="$post['entries'] > 0">
<div class="info">$template_hook[postbit_userinfo_right_after_posts] </div>
</if>
<!-- FLAGS START -->
<if condition="$post['field5'] OR $post['field6']">
<div class="info">
<if condition="$post[field5]">
<img src="images/flags/$post[field5].gif" alt="$post[field5]" /></if>

<if condition="$post[field6]">
<img src="images/region/$post[field6].gif" alt="$post[field6]" /></if>
</div>
</if>
<!-- / FLAG END -->



</div>


<!-- TAB 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">

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

<if condition="$post[userid]">
<div class="info">$vbphrase[post_thanks_thanks]: $post[post_thanks_user_amount_formatted]
<br/>
<if condition="$post[post_thanks_thanked_times] == 1">
$vbphrase[post_thanks_time_post]
<else />
<if condition="$post[post_thanks_thanked_posts] == 1">
<phrase 1="$post[post_thanks_thanked_times_formatted]">$vbphrase[post_thanks_times_post]</phrase>
<else />
<phrase 1="$post[post_thanks_thanked_times_formatted]" 2="$post[post_thanks_thanked_posts_formatted]">$vbphrase[post_thanks_times_posts]</phrase>
</if>
</if>
</div>
</if>

<if condition="$post[userid]">
<div class="info">$vbphrase[post_groan_groans]: $post[post_groan_user_amount_formatted]
<br/>
<if condition="$post[post_groan_times] == 1">
$vbphrase[post_groan_time_post]
<else />
<if condition="$post[post_groan_posts] == 1">
<phrase 1="$post[post_groan_times_formatted]">$vbphrase[post_groan_times_post]</phrase>
<else />
<phrase 1="$post[post_groan_times_formatted]" 2="$post[post_groan_posts_formatted]">$vbphrase[post_groan_times_posts]</phrase>
</if>
</if>
</div>
</if>


</div>


<!-- TAB 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">


<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']"><br>[<a href="credits.php?$session[sessionurl]do=manage&amp;u=$post[userid]#donate">$vbphrase[donate]</a>]</if> <if condition="$show['credits_check']">[<a href="credits.php?$session[sessionurl]do=banking&amp;u=$post[userid]">$vbphrase[check]</a>]</br></if>
</div>
</if>
$template_hook[postbit_userinfo_right]

</div>


<!-- TAB 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">


<div class="info">$system_totals_bits</div>

<div class="info">
<if condition="$crowns">
$post[crowns]$post[champtext]
<else />
$post[username] has not championed any arcade games. </if>
</div>

</div>


<!-- TAB 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">

<if condition="$post[field29]"><div class="info"><b>Favorite Boxer:</b><br/> $post[field29]</div></if>
<if condition="$post[field30]"><div class="info"><b>Favorite Fight:</b><br/> $post[field30]</div></if>
<if condition="$post[field25]"><div class="info"><b>Who I'd Like to Meet:</b><br/> $post[field25]</div></if>
<if condition="$post[field39]"><div class="info"><b>Fight That Should've Happened:</b><br/> $post[field39]</div></if>
<if condition="$post[field40]"><div class="info"><b>Fight That Should Happen:</b><br/> $post[field40]</div></if>


</div>


<!-- TAB 6 CONTENT -->
<div id="tab6$post[postid]" class="tabcontent">

<div class="info" align="center">
<if condition="$show['pmlink'] OR $show['emaillink'] OR $post['userid'] AND $show['member']">
Contact $post[username]:<br /></if>

<if condition="$show['pmlink']"><fieldset class="fieldset"><legend>PM</legend>
<a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]"><img src="images/buttons/pmthisuser.png" alt="Send $post[username] a Private Message" style="border:0" /></phrase></a><br />
</fieldset></if>

<if condition="$show['emaillink']"><fieldset class="fieldset"><legend>E-Mail</legend>
<a href="sendmessage.php?$session[sessionurl]do=mailmember&amp;u=$post[userid]" rel="nofollow"><img src="images/buttons/emailuser.png" alt="Send $post[username] an E-Mail" style="border:0" /></a><br />
</fieldset></if>

<if condition="$post['userid'] AND $show['member']"><fieldset class="fieldset"><legend>Befriend</legend>
<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]"><img src="images/buttons/Befriend.png" alt="Send $post[username] a Friendship Request" style="border:0" /></a>
</fieldset></if>

<if condition="$post['userid'] AND $show['member']"><fieldset class="fieldset"><legend>Profile Message</legend>
<a href="http://www.unifiedchamp.com/ucforum/members/$post[username]"><img src="images/buttons/visitormessage.png" alt="Leave $post[username] a Profile Message" style="border:0" /></a>
</fieldset></if>

</div>

<if condition="$post[icqicon] or $post[aimicon] or $post[msnicon] or $post[yahooicon] or $post[skypeicon]"><div class="info" align="center">$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div></if>

<div class="info" align="center">
<a href="member.php?$session[sessionurl]u=$post[userid]" title="View Public Profile">
<img src="images/buttons/folder_user.png" alt="View $post[username]'s Profile" style="border:0" /></a>
&nbsp;
<a href="album.php?u=$post[userid]" title="View $post[username]'s Album" rel="nofollow">
<img src="images/buttons/add_album.png" alt="View $post[username]'s Photo Album" style="border:0" /></a>
&nbsp;
<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]" title="Add $post[username]'s to Your Contacts" rel="nofollow">
<img src="images/buttons/heart_add.png" alt="Add $post[username]'s to Your Contacts" style="border:0" /></a>
&nbsp;
<a href="group.php?$session[sessionurl]u=$post[userid]" title="Social Groups">
<img src="images/buttons/social.png" alt="View Social Groups" style="border:0" /></a>
</div>

</div>


</div>


<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>

<!-- END POSTBIT TABS -->
</div></div>

Thanks for all your help so far!

[Digital Jedi]

Check the various classes in that code and see if there's a nowrap in there. First ones I'd check are the ones in my CSS file, like tabcontent ( I don't think it's there, but just in case), also check the info and smallfont classes and any above level classes that could be affecting blocks down the line.

[dancue]

nothing

It all is the way it should be.

I have the same exact code for both postbit templates and the postbit_legacy is wrapping the text.

[tipoboy]

Works great with 3.8 alsoo added a 6th tab thats only viewable to my mods and admin that contains Ban/unban links

thanks DJ

[Digital Jedi]

nothing

It all is the way it should be.

I have the same exact code for both postbit templates and the postbit_legacy is wrapping the text.
We're just not finding it. I would need to see you forum page so I could look at the source code.

Works great with 3.8 alsoo added a 6th tab thats only viewable to my mods and admin that contains Ban/unban links

thanks DJ
That was something I was meaning to mention how to do in this thread. How to use the permission conditionals. I probably need to do that on my own forum as well.

[tipoboy]

here's the code i used for the 6th admin and super/mod tab

In the <!-- begin postbit tabs --> section add:

<if condition="$show['modcplink']">
<li><span title="Admin Tab"><a href="#" rel="tab6$post[postid]">&nbsp;</a></span></li>
</if>


wherever you want your tab to show, i added it after the 5th tab and therefor called it tab 6

below the </div> of tab 5 content add:

<!-- TAB 6 CONTENT -->
<div id="tab6$post[postid]" class="tabcontent">
<div>
<if condition="($bbuserinfo[usergroupid]==6 || $bbuserinfo[usergroupid]==7 || $bbuserinfo[usergroupid]==5)">
<span onmouseover="this.style.cursor='hand';" onClick="window.open('modcp/banning.php?do=banuser&userid=$post[userid]','ban','width=500,height=375,scrollbars=yes')"><a>Ban $post[username]</a></span>
</if>
</div>
<div>
<if condition="($bbuserinfo[usergroupid]==6 || $bbuserinfo[usergroupid]==7 || $bbuserinfo[usergroupid]==5)">
<span onmouseover="this.style.cursor='hand';" onClick="window.open('modcp/banning.php?do=liftban&userid=$post[userid]','liftban','width=500,height=375,scrollbars=yes')"><a>Lift Ban on $post[username]</a></span>
</if>
</div>
</div>


and voila a 6th tab for your mods and admin containing the ban and unban links that open in a pop up with cudos to https://vborg.vbsupport.ru/showthread.php?t=93057 for the idea :D

[DobieGillis?]

here's the code i used for the 6th admin and super/mod tab

In the <!-- begin postbit tabs --> section add:

<if condition="$show['modcplink']">
<li><span title="Admin Tab"><a href="#" rel="tab6$post[postid]">&nbsp;</a></span></li>
</if>


wherever you want your tab to show, i added it after the 5th tab and therefor called it tab 6

below the </div> of tab 5 content add:

<!-- TAB 6 CONTENT -->
<div id="tab6$post[postid]" class="tabcontent">
<div>
<if condition="($bbuserinfo[usergroupid]==6 || $bbuserinfo[usergroupid]==7 || $bbuserinfo[usergroupid]==5)">
<span onmouseover="this.style.cursor='hand';" onClick="window.open('modcp/banning.php?do=banuser&userid=$post[userid]','ban','width=500,height=375,scrollbars=yes')"><a>Ban $post[username]</a></span>
</if>
</div>
<div>
<if condition="($bbuserinfo[usergroupid]==6 || $bbuserinfo[usergroupid]==7 || $bbuserinfo[usergroupid]==5)">
<span onmouseover="this.style.cursor='hand';" onClick="window.open('modcp/banning.php?do=liftban&userid=$post[userid]','liftban','width=500,height=375,scrollbars=yes')"><a>Lift Ban on $post[username]</a></span>
</if>
</div>
</div>


and voila a 6th tab for your mods and admin containing the ban and unban links that open in a pop up with cudos to https://vborg.vbsupport.ru/showthread.php?t=93057 for the idea :D

you're such a mensch! :)

[tipoboy]

you're such a mensch! :)

what the hell is a mensch lol :D

[Tacama]

Finally finished adjusting everything.

This is the final result:
http://img4.glowfoto.com/images/2009/06/02-1745279211T.jpg (http://www.glowfoto.com/viewimage.php?img=02-174527L&y=2009&m=06&t=jpg&rand=9211&srv=img4)
Thanks again.

[dieKetzer]

really looking forward to patching this in tonight!

[BlueNinjaGo]

First off, I haven't finished configuring this to my site yet, but I foresee no problems except for ones I create... lol...

So i just want to say.... AWESOME JOB!!

MOTM for sure!

I'm not sure if I'm more impressed by the mod or the author! The instructions were very well written... and although I didn't need every little thing spelled out, some people do, and I think it's great that you took the time to write instructions anyone can follow.

So, overall, thank you! Excellent... 10/10... nominated.... Thanks!

[TheLastSuperman]

First off, I haven't finished configuring this to my site yet, but I foresee no problems except for ones I create... lol...

So i just want to say.... AWESOME JOB!!

MOTM for sure!

I'm not sure if I'm more impressed by the mod or the author! The instructions were very well written... and although I didn't need every little thing spelled out, some people do, and I think it's great that you took the time to write instructions anyone can follow.

So, overall, thank you! Excellent... 10/10... nominated.... Thanks!

I'm ALWAYS impressed by both BlueNinjaGo :D

[BlueNinjaGo]

What about rollover instead of click?

That would be awesome.

[dancue]

I lie to you not...I've spent many, many hours trying different things. Didn't even bother checking all of the closing tags...

Thank you. Works now... :D

The only thing I can't understand is the text not wrapping within the the <div class="info"> tags. It wraps within the postbit_legacy, but the postbit looks like the picture below.

Figured it out. I placed the tabs within td's.

[Mobo]

I've tried installing this mod twice and can not get it to work correctly. I've uploaded the postbit_tabs folder to my /forums directory and also uploaded the tabcontent.js file to that same folder (after removing the .htm on the end of it from download). Then I did the two template edits.

Whenever I click on a tab, the page jumps up to the top of the page. I saw this listed in the FAQ, but I've verified that I have the folder in my forum root and it is still doing it.

Any thoughts?

[TheLastSuperman]

I've tried installing this mod twice and can not get it to work correctly. I've uploaded the postbit_tabs folder to my /forums directory and also uploaded the tabcontent.js file to that same folder (after removing the .htm on the end of it from download). Then I did the two template edits.

Whenever I click on a tab, the page jumps up to the top of the page. I saw this listed in the FAQ, but I've verified that I have the folder in my forum root and it is still doing it.

Any thoughts?

Double-check all the files i.e. the .css and or .js files as some people need or don't need the / before the folder and or file names...

Example: /foldername/tabcontent.css

You might need it to read: foldername/tabcontent.css

See if it is that simple, if not we need more info and screenshots or something to help us help you ;) (Also, you do run postbit_legacy via vB Options correct? If not your editing the wrong template and yes it can be done in postbit just find the right spot and left/center/right align the tabs to suit.

S-MAN

[Digital Jedi]

I've tried installing this mod twice and can not get it to work correctly. I've uploaded the postbit_tabs folder to my /forums directory and also uploaded the tabcontent.js file to that same folder (after removing the .htm on the end of it from download). Then I did the two template edits.

Whenever I click on a tab, the page jumps up to the top of the page. I saw this listed in the FAQ, but I've verified that I have the folder in my forum root and it is still doing it.

Any thoughts?
Linking me to your threads would help as well, so I could get a look at the Source Code and see if anything is wrong there.

[Mobo]

Thanks for the quick reply. I'll check into that stuff when I get back on Monday.

[Mobo]

Alright, I just opened up the .js file and it with garbbage <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /dynamicindex17/tabcontent/tabcontent.js
on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
<hr>
<address>Apache/2.2.10 (Unix) mod_ssl/2.2.10 OpenSSL/0.9.7a mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 PHP/5.2.6 Server at www.dynamicdrive.com Port 80</address>
</body></html>

So, I downloaded it again and placed it on my site. Now it is working correctly. I just need to figure out how to arrange my postbit stuff and get those nice boxes you all have around yours. If you are interested, take a look at this thread (http://www.wingsofwar.org/forums/showthread.php?t=52).

[Digital Jedi]

The boxes are added by using the info class that comes with a lot of forum skins. Some skins use different names so people just change the class names on the inner DIV containers to whatever it is they use. Your skin might not have one, but you can create one using CSS to look pretty much however you want. I use a box with 2 pixels width on the right and bottom and one pixel width on the left and top to create the illusion of a shadow.

[Mobo]

Thanks, I'll look into the classes my style uses and see about creating one if needed.


Wondering if I could get a little help. I've gotten most of my bit stuff worked out the way I want them. I have having problems with moving the Albums link/icon (https://vborg.vbsupport.ru/showthread.php?t=198477)to one of the tabs and the same thing with the awards (https://vborg.vbsupport.ru/showthread.php?t=196244).

They both use a hook location and php code in the actual plugin.

[Digital Jedi]

Thanks, I'll look into the classes my style uses and see about creating one if needed.


Wondering if I could get a little help. I've gotten most of my bit stuff worked out the way I want them. I have having problems with moving the Albums link/icon (https://vborg.vbsupport.ru/showthread.php?t=198477)to one of the tabs and the same thing with the awards (https://vborg.vbsupport.ru/showthread.php?t=196244).

They both use a hook location and php code in the actual plugin.
Check the FAQ on the first page of this thread, as I'm sure you should be able to use one of those solutions.

[Mobo]

I've been trying to figure it out from that FAQ. For the album like, I traced down this code...

if (!empty($post['hasalbum']))
{

$template_hook['postbit_userinfo_right'] .= '<div><a href="album.php?' . $vbulletin->session->vars['sessionurl'] . 'u=' . $post['userid'] . '" rel="nofollow"><img src="images/buttons/add_album.png" border="0" alt="Member Photo Albums"></a></div>';

}



There is no call to a template, and I can't find any HTML for it. When I place that into a tab, I get this error in vB before the template will save...

The following error occurred when attempting to evaluate this template:

Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /hermes/web05/b980/pow.mobowow/htdocs/forums/includes/adminfunctions_template.php(3939) : eval()'d code on line 132

This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

[Digital Jedi]

There is not a template being used in that instance. The HTML is there after the template hook.

<div><a href="album.php?' . $vbulletin->session->vars['sessionurl'] . 'u=' . $post['userid'] . '" rel="nofollow"><img src="images/buttons/add_album.png" border="0" alt="Member Photo Albums"></a></div>

You don't copy the entirety of the plugin in any case, as a template won't parse PHP. HTML inside of a plugin or PHP file will be specially formatted to prevent errors. You can tell what it is by the use of traditional HTML tags being used, such as the <div> tag in this case. You just need to strip out the PHP stuff, like the single quotes, the decimal points and spaces. Probably something like this:

<div><a href="album.php?$session[sessionurl]u=$post['userid']" rel="nofollow"><img src="images/buttons/add_album.png" border="0" alt="Member Photo Albums"></a></div>

Note that I also changed the PHP variable to the kind that vB templates typically use.

[Mobo]

Sorry, I did only add the part in the <div> section. I will try and strip out the PHP code stuff from my various plugins I need.

Thanks for the help and support.

[Mobo]

Okay, I got every thing sorted and it is working great. Every thing is in the tabs I want and I even got the .info class to work.

Now I'm having a very odd issues. For some of the users (they are not in the same usergroups) the text does not appear the same as other users in some of the tabs (not all tabs). Also, for these same users, my Reputation icon that is assigned to tab one only, shows up at the top of all the other tabs.

If you would like to have a look, see posts 18-20 on this thread (http://www.wingsofwar.org/forums/showthread.php?t=18). User Jmac, post #19 is one of the members having this odd issue. Post #18 and #20 do not have this issue.

Just encase you want it, here is my code for the tabs...

<!-- BEGIN POSTBIT TABS -->
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="User Info"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="Game Info"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="Files Info"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="Medals"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="Contact"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div>

<div class="smallfont" align= "left" >

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent" >

<div class="info">$vbphrase[posts]: $post[posts]</div>

<div class="info"><if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if></div>

<if condition="$post['field7']"><div class="info">Group: $post[field7]</if></div>

<if condition="$show['reputation']"><if condition="$show['reppower']">$vbphrase[reppower]: <span id="reppower_$post[postid]_$post[userid]">$post[reppower]</span> </if><div><span id="repdisplay_$post[postid]_$post[userid]">$post[reputationdisplay]</span></div></if>



</div>
<!-- TAB 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">

<if condition="$post[field6]"><div class="info">Favorite Plane: $post[field6]</div></if>
<if condition="$post[field21]"><div class="info">Side: $post[field21]</div></if>
<if condition="$post[field22]"><div class="info">War: $post[field22]</div></if>
</div>

<!-- TAB 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">

<if condition="$post[downloads]>0"><div class="info">{$vbphrase['ecdownloads_downloads']}: $post[downloads]</div></if>
<if condition="$post[uploads]>0"><div class="info"><a href="member.php?$session[sessionurl]u=$post[userid]&tab=dl2modification">{$vbphrase['ecdownloads_uploads']}: $post[uploads]</a></div></if>

<div class="info"><a href="album.php?u=$post[userid]" title="View $post[username]'s Album" rel="nofollow"><img src="images/buttons/add_album.png" alt="Member's Picture Albums" border="0"/></a> </div>
</div>

<!-- TAB 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">

<if condition="$post[showuserawards]"><div class="info">$post[userawards]</div></if>

</div>

<!-- TAB 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">

<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&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">a Private Message</a><br />
</if>
<if condition="$post['userid'] AND $show['member']">
<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]">a Friend Request</a>
</if></div>
<br />
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div>

</div>

</div>


<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>

<!-- END POSTBIT TABS -->

Sorry to be such a bother!

[Digital Jedi]

Okay, I got every thing sorted and it is working great. Every thing is in the tabs I want and I even got the .info class to work.

Now I'm having a very odd issues. For some of the users (they are not in the same usergroups) the text does not appear the same as other users in some of the tabs (not all tabs). Also, for these same users, my Reputation icon that is assigned to tab one only, shows up at the top of all the other tabs.

If you would like to have a look, see posts 18-20 on this thread (http://www.wingsofwar.org/forums/showthread.php?t=18). User Jmac, post #19 is one of the members having this odd issue. Post #18 and #20 do not have this issue.

Just encase you want it, here is my code for the tabs...

<!-- BEGIN POSTBIT TABS -->
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="User Info"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="Game Info"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="Files Info"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="Medals"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="Contact"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div>

<div class="smallfont" align= "left" >

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent" >

<div class="info">$vbphrase[posts]: $post[posts]</div>

<div class="info"><if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if></div>

<if condition="$post['field7']"><div class="info">Group: $post[field7]</if></div>

<if condition="$show['reputation']"><if condition="$show['reppower']">$vbphrase[reppower]: <span id="reppower_$post[postid]_$post[userid]">$post[reppower]</span> </if><div><span id="repdisplay_$post[postid]_$post[userid]">$post[reputationdisplay]</span></div></if>



</div>
<!-- TAB 2 CONTENT -->
<div id="tab2$post[postid]" class="tabcontent">

<if condition="$post[field6]"><div class="info">Favorite Plane: $post[field6]</div></if>
<if condition="$post[field21]"><div class="info">Side: $post[field21]</div></if>
<if condition="$post[field22]"><div class="info">War: $post[field22]</div></if>
</div>

<!-- TAB 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">

<if condition="$post[downloads]>0"><div class="info">{$vbphrase['ecdownloads_downloads']}: $post[downloads]</div></if>
<if condition="$post[uploads]>0"><div class="info"><a href="member.php?$session[sessionurl]u=$post[userid]&tab=dl2modification">{$vbphrase['ecdownloads_uploads']}: $post[uploads]</a></div></if>

<div class="info"><a href="album.php?u=$post[userid]" title="View $post[username]'s Album" rel="nofollow"><img src="images/buttons/add_album.png" alt="Member's Picture Albums" border="0"/></a> </div>
</div>

<!-- TAB 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">

<if condition="$post[showuserawards]"><div class="info">$post[userawards]</div></if>

</div>

<!-- TAB 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">

<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&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">a Private Message</a><br />
</if>
<if condition="$post['userid'] AND $show['member']">
<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]">a Friend Request</a>
</if></div>
<br />
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div>

</div>

</div>


<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>

<!-- END POSTBIT TABS -->

Sorry to be such a bother!
In Tab 1, you have a couple of improperly nested tags that's no doubt causing a cascade effect.

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent" >

<div class="info">$vbphrase[posts]: $post[posts]</div>

<div class="info"><if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if></div>

<if condition="$post['field7']"><div class="info">Group: $post[field7]</if></div>

<if condition="$show['reputation']"><if condition="$show['reppower']">$vbphrase[reppower]: <span id="reppower_$post[postid]_$post[userid]">$post[reppower]</span> </if><div><span id="repdisplay_$post[postid]_$post[userid]">$post[reputationdisplay]</span></div></if>



</div>


Also, and this is probably an error in my documentation, but it appears that the Private Message link is missing it's closing </phrase> tag. There should be one before the </a>:

<!-- TAB 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">

<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&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">a Private Message</phrase></a><br />
</if>
<if condition="$post['userid'] AND $show['member']">
<a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]">a Friend Request</a>
</if></div>
<br />
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div>

</div>

[MissKalunji]

I can't seem to see what change in the new version?

[Mobo]

Thank you! I've got it all sorted out now!

[Digital Jedi]

I can't seem to see what change in the new version?
I explained what changed in the notification I sent everyone. It's a minor edit and it's in big bold letters in the post above.

Thank you! I've got it all sorted out now!
Just let us know if you run into any other issues.

[tagknife]

Hmm When i click on the diffrent Tabs the Page Refreshs And goes to the top any help?

[Digital Jedi]

Likely this is one of the problems addressed in the FAQ. Check the location of your JavaScript file.

[TheChaosFactor]

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.

<if condition="$post['age']"><div class="info">$vbphrase[age]: $post[age]</div>
<else />
<div class="info"><b>Age:</b> N/A</div>

</if>

For displaying users age. Users can remove the else statement to have it come up blank if the field is not filled in.

The else statement could also be added to any other conditional for showing profile fields as well

Also for the homepage field:

<if condition="$post['homepage']"><div class="info">Homepage: $post[homepage]</div>
<else />
<div class="info"><b>Homepage:</b> N/A</div>

</if>

I was curious though if there was a way to make that come up as a clickable link instead of standard text. I tried wrapping an html link tag around $post[homepage] That just made the field come up with the text "Homepage:", but no link or text

Great mod, I love this one. A lot of my members wanted the arcade icons, but some of them have 50-70 and I didn't want to stretch my pages unreasonably. This has really helped with that.

Edit: Installed and nominated.

[TheChaosFactor]

Hmm When i click on the diffrent Tabs the Page Refreshs And goes to the top any help?

Likely this is one of the problems addressed in the FAQ. Check the location of your JavaScript file.

Also check the javascript file itself. When I right clicked I didn't have an option for download, so I saved the link. It came down as a .js, but I was having this same problem. So I open it up and find the 404 error inside instead of the javascript.

If this is the case for you you can go to the site referenced as the "other" place to get the file, find the actual script, copy/paste it into the file you dl'ed, and reupload it to the appropriate directory. Worked for me.

[Digital Jedi]

Also for the homepage field:

<if condition="$post['homepage']"><div class="info">Homepage: $post[homepage]</div>
<else />
<div class="info"><b>Homepage:</b> N/A</div>

</if>

I was curious though if there was a way to make that come up as a clickable link instead of standard text. I tried wrapping an html link tag around $post[homepage] That just made the field come up with the text "Homepage:", but no link or text
It would need to be some variation of what's in the drop down menu under the Username. Something like:

<if condition="$show['homepage']">
<div class="info"><b>Homepage:</b> <a href="$post[homepage]">$post[homepage]</a></div>
</if>

Maybe even put in a target="_blank" to open it in a new window.

They, of course, would need to make sure to put the complete URL in, including the http://. You'll notice that on vB.org that happens sometimes, and people forget to put the http://, so it tries finding the page relative to vbulletin.org.

Great mod, I love this one. A lot of my members wanted the arcade icons, but some of them have 50-70 and I didn't want to stretch my pages unreasonably. This has really helped with that.

Edit: Installed and nominated.
You can also give the DIV container a max-height and set scrolling to yes, and you'll have a fixed size container that wouldn't stretch the page. Maybe even look into some of the JavaScipts on Dynamic Drive and use one of their custom scrolling containers.


Also check the javascript file itself. When I right clicked I didn't have an option for download, so I saved the link. It came down as a .js, but I was having this same problem. So I open it up and find the 404 error inside instead of the javascript.

If this is the case for you you can go to the site referenced as the "other" place to get the file, find the actual script, copy/paste it into the file you dl'ed, and reupload it to the appropriate directory. Worked for me.
It seems to be doing that for some people and not for others. I noticed it did it in FF and not in IE for me a couple of times. I guess I'll have to throw that in the FAQ too.

[TheChaosFactor]

What about putting the contact/buddy list in one of the tabs? I've been experimenting with this for a day now, but can't seem to figure out how it would be done.

[skylab]

Works perfectly!! Thanks! /installed
One small question, the links to the buttons are underlined and I can't seem to find where it's coming from in the css. example is here http://www.nightlifevibe.com/forums/showthread.php?t=2394

[skylab]

I'd imagine this would work on vb4. Trying now but haven't had much luck as of yet

[TheLastSuperman]

I'd imagine this would work on vb4. Trying now but haven't had much luck as of yet

Yes it will ;)

My mod found here https://vborg.vbsupport.ru/showthread.php?p=1914931#post1914931 is nearly identical to DJ's except it's for sig's :D

DJ just needs to change a few snippets of code to get this working ;) you can view my mod for an indication.

Mike

[Drocr]

How can I center the dots? :( I want my postbit to be centered so far all I can get centered is the avatar, usertitle, userbars, and info. I want the User name and the images center... anyone know how? :(

[TheLastSuperman]

How can I center the dots? :( I want my postbit to be centered so far all I can get centered is the avatar, usertitle, userbars, and info. I want the User name and the images center... anyone know how? :(

Wrap the code with:

<div align="center">
Your Code Goes Here You wish to be centered!
</div>

That will work for nearly anything, avoid using <center></center> ;)

[Drocr]

Sweet that worked for everything but the images;O

Did I put it in the wrong place?

<div align="center">
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul></div>

[TheLastSuperman]

Sweet that worked for everything but the images;O

Did I put it in the wrong place?

<div align="center">
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul></div>

If you want everything aligned wrap DJ's entire code with it!

You had:

<div align="center">
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul></div> Where's the last </div> at here? If it is not there always remember start div then end div i.e. <div>code</div> no matter if you tell it how to align or not!



Mike

[Drocr]

<!-- BEGIN POSTBIT TABS -->
<div align="center"><div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div></div>

<div class="smallfont">

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">

There we go, thats all the code ;o
I didnt put it all so you couldnt see that I added the Div after the </ul> code. But i changed it this time to after his </div> but still no affect.

[TheLastSuperman]

<!-- BEGIN POSTBIT TABS -->
<div align="center"><div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div></div>

<div class="smallfont">

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">

There we go, thats all the code ;o
I didnt put it all so you couldnt see that I added the Div after the </ul> code. But i changed it this time to after his </div> but still no affect.

No not unless you just want to center the dots if you want to center what each one displays put the end </div> at the end of the tab content codes ;)

[Drocr]

I want to center the dots, not what is in each section of the dots :O

[TheLastSuperman]

I want to center the dots, not what is in each section of the dots :O

Try changing it to this ;):

<div id="postbittabs$post[postid]" class="djdot"><div align="center">

The two end </div>'s should not matter but the top ones it's like order of operations in math I just overlooked that in your post last night.

Mike

[jkun666]

Try changing it to this ;):

<div id="postbittabs$post[postid]" class="djdot"><div align="center">

The two end </div>'s should not matter but the top ones it's like order of operations in math I just overlooked that in your post last night.

Mike

Hi. I'm trying to center the dots also and I've tried suggestions posted in this thread and it doesn't seem to be working.

[TheLastSuperman]

Hi. I'm trying to center the dots also and I've tried suggestions posted in this thread and it doesn't seem to be working.

It does for me.. check the demo ;) BUT put the <div align="center"> in front of all his code not how I originally posted oops.

https://vborg.vbsupport.ru/showthread.php?t=216978

[jkun666]

Ah, I think something else is causing the problem.

I've followed the steps from the original post exactly but when I click the buttons nothing happens :confused:

Edit: It appears when I try to right-click > save the .js from OP it gives me a permissions error and I had to go to the link directly.

[TheLastSuperman]

Ah, I think something else is causing the problem.

I've followed the steps from the original post exactly but when I click the buttons nothing happens :confused:

Edit: It appears when I try to right-click > save the .js from OP it gives me a permissions error and I had to go to the link directly.

So your good to go now?

[jkun666]

So your good to go now?

Still can't get the align to work :p

I'll keep trying!

is this correct?

<div align="center">
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />
</div>
</div>

[tipoboy]

just installed again, trying to get the center align to work will post back on results...

[TheLastSuperman]

just installed again, trying to get the center align to work will post back on results...

DUH Guys duh... I forgot that I modified my .css file with this so open it up and look for anything dealing with alignment then change it to center instead of left or right etc.

Sorry I sent some of you in circles... I know laugh @ me not with me this time ok? ;)

Mike

[tipoboy]

DUH Guys duh... I forgot that I modified my .css file with this so open it up and look for anything dealing with alignment then change it to center instead of left or right etc.

Sorry I sent some of you in circles... I know laugh @ me not with me this time ok? ;)

Mike

i've already tried that and its still left aligned...

[TheLastSuperman]

i've already tried that and its still left aligned...

Default or custom style?

[tipoboy]

Default or custom style?

custom style but anyways i got it centered, here's how:

firstly as has been said before you cant just change all the alignments to center in the .CSS file because float: center; isnt a valid CSS attribute.

so to center it you have to add 2 lines off CSS, which are:

margin-right: auto;
margin-left: auto;

add those to the: .djdot { css code like so:

instead of:


.djdot{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}


it looks like:


.djdot{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
margin-right: auto;
margin-left: auto;
}


tested in IE ut wont center for FF will continue working on it later on....

[Digital Jedi]

I believe, earlier in the thread, we had the same discussion, and if I remember correctly, you had to adjust a higher level element. Something in vB default postbit, if I'm not mistaken.

[tipoboy]

I believe, earlier in the thread, we had the same discussion, and if I remember correctly, you had to adjust a higher level element. Something in vB default postbit, if I'm not mistaken.

DJ everything in my postbit_legacy is centered apart from the dots. I've tried several methods of trying to get it to align correctly including all the example's here.

The code i posted centers the dots in IE but when viewing in FF the dots are still left aligned.

Any suggestions?

TIA dave :D

[grey_goose]

I love this mod, but when you click on a 'dot', the screen 'jumps' to the top of the post rather than just dropping the bottom. How to fix this behavior?

[grey_goose]

*facepalm*

I misnumbered a "tabX$post[postid]" :)

[Digital Jedi]

DJ everything in my postbit_legacy is centered apart from the dots. I've tried several methods of trying to get it to align correctly including all the example's here.

The code i posted centers the dots in IE but when viewing in FF the dots are still left aligned.

Any suggestions?

TIA dave :D
The last time we got the dots to center for another user I had him add a style tag to the opening DIV container. It was a last resort at that time:

<div id="postbittabs$post[postid]" class="djdot" style="text-align:center;">

[tipoboy]

The last time we got the dots to center for another user I had him add a style tag to the opening DIV container. It was a last resort at that time:

<div id="postbittabs$post[postid]" class="djdot" style="text-align:center;">

thanks for the reply, i did try that DJ yet its still not centering in FF for some strange reason, here's screeny's to see:

IE8:

https://vborg.vbsupport.ru/

FF screeny:

https://vborg.vbsupport.ru/

any suggestions as to why this would be?

here's what i've done with my CSS file too:

.djdot{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
margin: auto;
}
.djdot ul{
padding: 0;
}
.djdot ul li{
display: inline;
background: url(djdotbg.png) center center;
background-repeat: no-repeat;
float: left;
}
.djdot ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
background: url(djdotbg.png) center center;
background-repeat: no-repeat;
margin: auto;
}
.djdot ul li a:visited{
color: white;
background: url(djdotbg.png) center center;
background-repeat: no-repeat;
}
.djdot ul li a.selected{
color: white;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: url(djdotbg2.png) center center;
background-repeat: no-repeat;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}

/* removing the active/focus dotted border */
#djdot_c {
list-style-type:none;
padding:0;
width:36em;
height:5em;
margin:0 auto;
}
#djdot_c li {
display:block;
width:7em;
height:2em;
float:left;
margin-right:0.2em;
}
#djdot_c a {
display:block;
width:7em;
height:2em;
position:relative;
text-decoration:none;
}
#djdot_c a em {
font-style:normal;
color:#000;
display:block;
width:7em;
height:1.5em;
border-bottom:0.5em solid #000;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#djdot_c a:hover {
color:#c00;
}
#djdot_c a:hover em {
border-bottom:0.5em solid #c00;
}

#djdot_c a:active, #djdot_c a:focus {
/* reduce the link size to zero when the link is in the
active/focus state.
This literally removes the dotted border which is ONLY applied
to the link itself and not any containing elements WHEN THOSE
ELEMENTS HAVE A POSITION ABSOLUTE! */
width:0; height:0;
outline:0; /* for browsers that understand */
}
/* adding the active/focus state */
#djdot_d {
list-style-type:none;
padding:0;
width:36em;
height:5em;
margin:0 auto;
}
#djdot_d li {
display:block;
width:7em;
height:2em;
float:left;
margin-right:0.2em;
}
#djdot_d a {
display:block;
width:7em;
height:2em;
position:relative;
text-decoration:none;
}
#djdot_d a em {
display:block;
font-style:normal;
width:7em;
height:1.5em;
color:#000;
border-bottom:0.5em solid #000;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#djdot_d a:hover {
color:#c00;
}
#djdot_d a:hover em {
border-bottom:0.5em solid #c00;
}
#djdot_d a:active, #djdot_d a:focus {
width:0;
height:0;
outline:0; /* for browsers that understand */
}
#djdot_d a:active em, #djdot_d a:focus em {
/* change the em bottom border and text to blue on
active/focus thus giving a suitable alternative to
the dotted border */
border-bottom:0.5em solid #00c;
color:#00c;
outline:0; /* for browsers that understand */
}

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

[Digital Jedi]

thanks for the reply, i did try that DJ yet its still not centering in FF for some strange reason, here's screeny's to see:

IE8:

http://www.crueluniverse.net/pictures/iescreeny.png

FF screeny:

http://www.crueluniverse.net/pictures/ffscreeny.png

any suggestions as to why this would be?

here's what i've done with my CSS file too:

.djdot{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
margin: auto;
}
.djdot ul{
padding: 0;
}
.djdot ul li{
display: inline;
background: url(djdotbg.png) center center;
background-repeat: no-repeat;
float: left;
}
.djdot ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
background: url(djdotbg.png) center center;
background-repeat: no-repeat;
margin: auto;
}
.djdot ul li a:visited{
color: white;
background: url(djdotbg.png) center center;
background-repeat: no-repeat;
}
.djdot ul li a.selected{
color: white;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: url(djdotbg2.png) center center;
background-repeat: no-repeat;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}

/* removing the active/focus dotted border */
#djdot_c {
list-style-type:none;
padding:0;
width:36em;
height:5em;
margin:0 auto;
}
#djdot_c li {
display:block;
width:7em;
height:2em;
float:left;
margin-right:0.2em;
}
#djdot_c a {
display:block;
width:7em;
height:2em;
position:relative;
text-decoration:none;
}
#djdot_c a em {
font-style:normal;
color:#000;
display:block;
width:7em;
height:1.5em;
border-bottom:0.5em solid #000;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#djdot_c a:hover {
color:#c00;
}
#djdot_c a:hover em {
border-bottom:0.5em solid #c00;
}

#djdot_c a:active, #djdot_c a:focus {
/* reduce the link size to zero when the link is in the
active/focus state.
This literally removes the dotted border which is ONLY applied
to the link itself and not any containing elements WHEN THOSE
ELEMENTS HAVE A POSITION ABSOLUTE! */
width:0; height:0;
outline:0; /* for browsers that understand */
}
/* adding the active/focus state */
#djdot_d {
list-style-type:none;
padding:0;
width:36em;
height:5em;
margin:0 auto;
}
#djdot_d li {
display:block;
width:7em;
height:2em;
float:left;
margin-right:0.2em;
}
#djdot_d a {
display:block;
width:7em;
height:2em;
position:relative;
text-decoration:none;
}
#djdot_d a em {
display:block;
font-style:normal;
width:7em;
height:1.5em;
color:#000;
border-bottom:0.5em solid #000;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
#djdot_d a:hover {
color:#c00;
}
#djdot_d a:hover em {
border-bottom:0.5em solid #c00;
}
#djdot_d a:active, #djdot_d a:focus {
width:0;
height:0;
outline:0; /* for browsers that understand */
}
#djdot_d a:active em, #djdot_d a:focus em {
/* change the em bottom border and text to blue on
active/focus thus giving a suitable alternative to
the dotted border */
border-bottom:0.5em solid #00c;
color:#00c;
outline:0; /* for browsers that understand */
}

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

Try adding margin-right:auto; margin-left:auto to the style I showed you.

[Verionia]

Anything for 4.0 ?

[Digital Jedi]

Anything for 4.0 ?
If there was, I would release it in the 4.0 section. I don't have 4.0, so I don't know what phrases have changed. Until then, I have no idea what tweaks would need to be made.

[Thelonius Beck]

Excellent!

It's just what I needed for my new style. I'm even (for once) using the stock images, as they fit perfectly with the skin.

Thanks.

[Thelonius Beck]

Ahh OK. I found an issue.

For some reason, in Internet Explorer I get the dots, but they don't work. They don't even act like a link when I hover over them. All fine in FF, Opera, Safari & Chrome.

Anybody else have this issue?

***Edit: I found it. There is a conflict with the image reflection Javascript I'm using when browsing with IE. Will post work around if/when I find one. For now I'm just conditioning out the reflection for IE users.

[Dakotadr]

Hello I have a quick question hopefully. I uploaded the mod and did everything that I was suppose to the problem i'm having id how do you block off the sections like in the screen shots. I want the diffrent sections to be in a box of their own......

[Digital Jedi]

Hello I have a quick question hopefully. I uploaded the mod and did everything that I was suppose to the problem i'm having id how do you block off the sections like in the screen shots. I want the diffrent sections to be in a box of their own......

There's a detailed explanation of how to do that in post 2. If your forum doesn't have an info class, you'd need to create one of your own. I'll post the sample CSS here in a minute.

[Digital Jedi]

Updated the Post 5 FAQ to explain how to add the boxes' CCS class if your style doesn't already have it.

[Dakotadr]

Thanks works greeeeeet

[Digital Jedi]

vB4 version is available here: https://vborg.vbsupport.ru/showthread.php?t=237867

[blauauge]

Installed with a big Thank you!

[Ash Ketchum]

I was wondering if I wanted to say perhaps put vBexperience in it, where would I go to fin d the code?

[Digital Jedi]

I was wondering if I wanted to say perhaps put vBexperience in it, where would I go to fin d the code?
vBExperience, I believe, uses the template hooks. Take a look at my FAQ in post 5 to see how to do that.

[Ash Ketchum]

vBExperience, I believe, uses the template hooks. Take a look at my FAQ in post 5 to see how to do that.

Took me a while to understand it. But you helped me nonetheless.

Thanks. :)

I apperciate it!

[Ash Ketchum]

Hello...How would I go into putting iShop into one of the tabs?

[Digital Jedi]

Hello...How would I go into putting iShop into one of the tabs?
I don't have iShop installed, but I imagine it would use one of the described methods in the FAQ. You'd have to consult the iShop install instructions to be sure.

[goran424]

Great mod but realized it is not for my forum.

Can anyone help me and explain how to uninstall?

[Digital Jedi]

As this is a template edit, all you would do is undo the edits, or revert your templates.

[skylab]

Got it working great however having some issues trying to get Arcade icons to show for vb4.

[profanitytalker]

Hi Dj, first of all thank you so much for this hack. It works like a charm. I was just wonder if you know how to make the buttons each a different image and not all the same?

[Digital Jedi]

Got it working great however having some issues trying to get Arcade icons to show for vb4.
What problems are you having, exactly?


Hi Dj, first of all thank you so much for this hack. It works like a charm. I was just wonder if you know how to make the buttons each a different image and not all the same?
You would need to replace the &nbsp; in the postbit_legacy code with the actual image URLs you wanted. Note that this won't let you use the change in image when an image is clicked, so you'd have to search for a seperate JavaScript to make that happen.

[Amazing2]

Can you explaine this, how to get my own img in the tab menu? ( for dummys pls ^^ )

Is this the right way?
<li><span title="Showroom"><a href="#" rel="tab4$post[postid]"><img src="postbit_tabs/showroom.png/></a></span></li>

In the css i only delete die backround codes, right? o0

I?m sorry, its not my day :D

[Digital Jedi]

Can you explaine this, how to get my own img in the tab menu? ( for dummys pls ^^ )

Is this the right way?
<li><span title="Showroom"><a href="#" rel="tab4$post[postid]"><img src="postbit_tabs/showroom.png/></a></span></li>

In the css i only delete die backround codes, right? o0

I?m sorry, its not my day :D
Yes, that's the correct way. You just need to correct the errors in your <img> tag and it should work fine.

[MonkYZ]

Hi Digital Jedi ! As always you have done one of the best mods for vBulletin !

Can you tell me please why my website doesn't show Age, no matter what i do ?
Also, how can i add an entry to show how many blog entries users have ?
And the last one (for now :) ), how can i add an entry for the level only from VBExperience ?

Thank you in advance and keep up the good work !

[MonkYZ]

Ah, i have more (please don't be mad on me :) ). Actually, i will list all the functions below... if you can help me with them i will be really happy :D

- vBExperience Level
- vBExperience Awards
- vBExperience Achievements
- User Profile Picture
- The Social Groups the user is in
- Find More Posts by user
- Find all threads started by user
- Birthday (as i can't display age at all)

THANK YOUUUU !

[Digital Jedi]

Hi Digital Jedi ! As always you have done one of the best mods for vBulletin !

Can you tell me please why my website doesn't show Age, no matter what i do ?
Also, how can i add an entry to show how many blog entries users have ?
And the last one (for now :) ), how can i add an entry for the level only from VBExperience ?

Thank you in advance and keep up the good work !
Let me see your template code, at least, just the area where the blocks are. If the variables are in there, they should be displaying.


Ah, i have more (please don't be mad on me :) ). Actually, i will list all the functions below... if you can help me with them i will be really happy :D

- vBExperience Level
- vBExperience Awards
- vBExperience Achievements
- User Profile Picture
- The Social Groups the user is in
- Find More Posts by user
- Find all threads started by user
- Birthday (as i can't display age at all)

THANK YOUUUU !
vBExperience I had to settle for putting the template hooks in the tabs. You can also migrate the code from the templates, and if I remember correctly, you just turn those items off in Experience, and it should display wherever you pates the code. Been a while since I tried those.

I don't think you'll be able to get the profile picture on the postbit. You might need to see if it's ever been done before.

The rest, I'll have to get back to you on. Not a lot of time for me today. But those all should have variables you just put in the postbit. You can find the code to More Posts in the same template, for example.

[kevinkun]

Hello, having some small difficulties with my postbit;; it'd be great if you could tell me what I did wrong...

i've uploaded the files onto my forum root directory.. not the images directory & I've made sure to follow every step.

here is my postbit_legacy code

$template_hook[postbit_start]
<table id="post$post[postid]" class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center">
<tr>
<if condition="$show['announcement']">
<td class="thead" style="font-weight:normal; border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]" colspan="2">
<img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" />
<phrase 1="$post[startdate]" 2="$post[enddate]">$vbphrase[x_until_y]</phrase>
</td>
<else />
<td class="thead" style="font-weight:normal; border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[right]: 0px" $post[scrolltothis]>
<!-- status icon and date -->
<a name="post$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" /></a>
$post[postdate]<if condition="!$show['detailedtime']">, $post[posttime]</if>
$post[firstnewinsert]
<!-- / status icon and date -->
</td>
<td class="thead" style="font-weight:normal; border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[left]: 0px" align="$stylevar[right]">
&nbsp;
<if condition="$show['postcount']">#<a href="showpost.php?$session[sessionurl]p=$post[postid]&amp;postcount=$post[postcount]" target="new" rel="nofollow" id="postcount$post[postid]" name="$post[postcount]"><strong>$post[postcount]</strong></a></if>
<if condition="$show['inlinemod']">
<input type="checkbox" name="plist[$postid]" id="plist_$postid" style="vertical-align:middle; padding:0px; margin:0px 0px 0px 5px" value="$post[checkbox_value]" />
</if>
</td>
</if>
</tr>
<tr valign="top">
<td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">

<div id="postmenu_$post[postid]">
<if condition="$show['profile']">
<center>$post[onlinestatus] <a class="bigusername"href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a></center>
<script type="text/javascript"> vbmenu_register("postmenu_$post[postid]", true); </script>
<else />
$post[musername]
</if>
</div>

<if condition="$post['usertitle']"><div class="smallfont"><center>$post[usertitle]</center></div></if>
<if condition="$post['rank']"><div class="smallfont"><center>$post[rank]</center></div></if>
$template_hook[postbit_userinfo_left]

<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;<br /><center><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></center>
</div>
</if>
<!-- BEGIN POSTBIT TABS -->
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div>

<div class="smallfont">

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">

<div class="info">Tab 1 Content:Block A</div>
<div class="info">Tab 1 Content:Block B</div>
<div class="info">Tab 1 Content:Block C</div>

</div>

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

<!-- TAB 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">

<div class="info">Tab 3 Content:Block A</div>
<div class="info">Tab 3 Content:Block B</div>
<div class="info">Tab 3 Content:Block C</div>
<div class="info">Tab 3 Content:Block D</div>
<div class="info">Tab 3 Content:Block E</div>
<div class="info">Tab 3 Content:Block F</div>

</div>

<!-- TAB 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">

<div class="info">Tab 4 Content:Block A</div>
<div class="info">Tab 4 Content:Block B</div>
<div class="info">Tab 4 Content:Block C</div>

</div>

<!-- TAB 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">

<div class="info">Tab 5 Content:Block A</div>
<div class="info">Tab 5 Content:Block B</div>
<div class="info">Tab 5 Content:Block C</div>
<div class="info">Tab 5 Content:Block D</div>
<div class="info">Tab 5 Content:Block E</div>
<div class="info">Tab 5 Content:Block F</div>
<div class="info">Tab 5 Content:Block G</div>
<div class="info">Tab 5 Content:Block H</div>
<div class="info">Tab 5 Content:Block I</div>

</div>

</div>


<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>

<!-- END POSTBIT TABS -->
<div class="smallfont">
&nbsp;<br />
<if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
<if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if>
<if condition="$post['age']"><div>$vbphrase[age]: $post[age]</div></if>
<div>
$vbphrase[posts]: $post[posts]
</div>
$template_hook[postbit_userinfo_right_after_posts]
<if condition="$show['infraction']"><div>$vbphrase[infractions]: $post[warnings]/$post[infractions] ($post[ipoints])</div></if>
<if condition="$show['reputation']"><if condition="$show['reppower']">$vbphrase[reppower]: <span id="reppower_$post[postid]_$post[userid]">$post[reppower]</span> </if><div><span id="repdisplay_$post[postid]_$post[userid]">$post[reputationdisplay]</span></div></if>
$template_hook[postbit_userinfo_right]
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div>

</td>
<if condition="$show['moderated']">
<td class="alt2" id="td_post_$post[postid]" style="border-$stylevar[right]: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]">
<else />
<td class="alt1" id="td_post_$post[postid]" style="border-$stylevar[right]: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]">
</if>
$template_hook[postbit_messagearea_start]
<if condition="$show['messageicon'] OR $post['title']">
<!-- icon and title -->
<div class="smallfont">
<if condition="$show['messageicon']"><img class="inlineimg" src="$post[iconpath]" alt="$post[icontitle]" border="0" /></if>
<if condition="$post['title']"><strong>$post[title]</strong></if>
</div>
<hr size="1" style="color:$stylevar[tborder_bgcolor]; background-color:$stylevar[tborder_bgcolor]" />
<!-- / icon and title -->
</if>

<!-- message -->
<div id="post_message_$post[postid]">
$ad_location[ad_showthread_firstpost_start]
$post[message]
</div>
<!-- / message -->

<if condition="$show['attachments']">
<!-- attachments -->
<div style="padding:$stylevar[cellpadding]px">

<if condition="$show['thumbnailattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_thumbnails]</legend>
<div style="padding:$stylevar[formspacer]px">
$post[thumbnailattachments]
</div>
</fieldset>
</if>

<if condition="$show['imageattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_images]</legend>
<div style="padding:$stylevar[formspacer]px">
$post[imageattachments]
</div>
</fieldset>
</if>

<if condition="$show['imageattachmentlink']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_images]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[imageattachmentlinks]
</table>
</fieldset>
</if>

<if condition="$show['otherattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_files]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[otherattachments]
</table>
</fieldset>
</if>

<if condition="$show['moderatedattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attachments_pending_approval]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[moderatedattachments]
</table>
</fieldset>
</if>

</div>
<!-- / attachments -->
</if>

$template_hook[postbit_signature_start]
$ad_location[ad_showthread_firstpost_sig]

<if condition="$post['signature']">
<!-- sig -->
<div>
__________________<br />
$post[signature]
</div>
<!-- / sig -->
</if>

$template_hook[postbit_signature_end]

<if condition="$show['postedited']">
<!-- edit note -->
<div class="smallfont">
<hr size="1" style="color:$stylevar[tborder_bgcolor]; background-color:$stylevar[tborder_bgcolor]" />
<em>
<if condition="$show['postedithistory']">
<phrase 1="$post[edit_username]" 2="$post[edit_date]" 3="$post[edit_time]" 4="posthistory.php?$session[sessionurl]p=$post[postid]">$vbphrase[last_edited_link_by_x_on_y_at_z_postid]</phrase>
<else />
<phrase 1="$post[edit_username]" 2="$post[edit_date]" 3="$post[edit_time]">$vbphrase[last_edited_by_x_on_y_at_z]</phrase>
</if>
<if condition="$post['edit_reason']">
$vbphrase[reason]: $post[edit_reason]
</if>
</em>
</div>
<!-- / edit note -->
</if>

</td>
</tr>
<tr>
<td class="alt2" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px">
<if condition="$show['reputationlink']">
<span id="reputationmenu_$post[postid]"><a href="reputation.php?$session[sessionurl]p=$post[postid]" rel="nofollow" id="reputation_$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_button]/reputation.gif" alt="<phrase 1="$post[username]">$vbphrase[add_to_xs_reputation]</phrase>" border="0" /></a></span>
<if condition="$show['popups']"><script type="text/javascript"> vbrep_register("$post[postid]")</script></if>
</if>
<if condition="$show['infractionlink']"><a href="infraction.php?$session[sessionurl]do=report&amp;p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/infraction.gif" alt="<phrase 1="$post[username]">$vbphrase[add_infraction_for_x]</phrase>" border="0" /></a></if>
<if condition="$show['reportlink']"><a href="report.php?$session[sessionurl]p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/report.gif" alt="$vbphrase[report_bad_post]" border="0" /></a></if>
$post[iplogged]
&nbsp;
</td>
<if condition="$show['moderated']">
<td class="alt2" align="$stylevar[right]" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[left]: 0px; border-top: 0px">
<else />
<td class="alt1" align="$stylevar[right]" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[left]: 0px; border-top: 0px">
</if>
<!-- controls -->
<if condition="$post['editlink']">
<img style="display: none" id="progress_$postid" src="$stylevar[imgdir_misc]/progress.gif" alt="$vbphrase[loading_editor_please_wait]" />
<a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
</if>
<if condition="$post['forwardlink']">
<a href="$post[forwardlink]"><img src="$stylevar[imgdir_button]/forward.gif" alt="$vbphrase[forward_message]" border="0" /></a>
</if>
<if condition="$post['replylink']">
<a href="$post[replylink]" rel="nofollow"><img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
</if>
<if condition="$show['multiquote_post']">
<a href="$post[replylink]" rel="nofollow" onclick="return false"><img src="$stylevar[imgdir_button]/multiquote_<if condition="$show['multiquote_selected']">on<else />off</if>.gif" alt="$vbphrase[multi_quote_this_message]" border="0" id="mq_$post[postid]" /></a>
</if>
<if condition="$show['quickreply'] AND !$show['threadedmode']">
<a href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a>
</if>
<if condition="$show['moderated']">
<img src="$stylevar[imgdir_misc]/moderated.gif" alt="$vbphrase[moderated_post]" border="0" />
</if>
<if condition="$show['spam']">
<img src="$stylevar[imgdir_misc]/spam_detected.png" alt="$vbphrase[spam_post]" border="0" />
</if>
<if condition="$show['deletedpost']">
<if condition="$show['managepost']">
<a href="postings.php?$session[sessionurl]do=managepost&amp;p=$post[postid]"><img src="$stylevar[imgdir_misc]/trashcan.gif" alt="$vbphrase[manage]" border="0" /></a>
<else />
<img src="$stylevar[imgdir_misc]/trashcan.gif" alt="$vbphrase[deleted_post]" border="0" />
</if>
</if>
<if condition="$show['redcard']">
<a href="infraction.php?$session[sessionurl]do=view&amp;p=$post[postid]"><img src="$stylevar[imgdir_button]/redcard.gif" alt="$vbphrase[received_infraction]" border="0" /></a>
<else />
<if condition="$show['yellowcard']">
<a href="infraction.php?$session[sessionurl]do=view&amp;p=$post[postid]"><img src="$stylevar[imgdir_button]/yellowcard.gif" alt="$vbphrase[received_warning]" border="0" /></a>
</if>
</if>
$template_hook[postbit_controls]
<!-- / controls -->
</td>
</tr>
</table>
$template_hook[postbit_end]

<!-- post $post[postid] popup menu -->
<div class="vbmenu_popup" id="postmenu_$post[postid]_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">$post[username]</td>
</tr>
<if condition="$show['profile']">
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$post[userid]">$vbphrase[view_public_profile]</a></td></tr>
</if>
<if condition="$show['pmlink']">
<tr><td class="vbmenu_option"><a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[send_private_message_to_x]</phrase></a></td></tr>
</if>
<if condition="$show['emaillink']">
<tr><td class="vbmenu_option"><a href="sendmessage.php?$session[sessionurl]do=mailmember&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[send_email_to_x]</phrase></a></td></tr>
</if>
<if condition="$show['homepage']">
<tr><td class="vbmenu_option"><a href="$post[homepage]"><phrase 1="$post[username]">$vbphrase[visit_xs_homepage]</phrase></a></td></tr>
</if>
<if condition="$show['search']">
<tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=finduser&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[find_more_posts_by_x]</phrase></a></td></tr>
</if>
<if condition="$post['userid'] AND $show['member']">
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]"><phrase 1="$post[username]">$vbphrase[add_x_to_contacts]</phrase></a></td></tr>
</if>
$template_hook[postbit_user_popup]
</table>
</div>
<!-- / post $post[postid] popup menu -->

Thanks!

[Digital Jedi]

Hello, having some small difficulties with my postbit;; it'd be great if you could tell me what I did wrong...

i've uploaded the files onto my forum root directory.. not the images directory & I've made sure to follow every step.

here is my postbit_legacy code

$template_hook[postbit_start]
<table id="post$post[postid]" class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center">
<tr>
<if condition="$show['announcement']">
<td class="thead" style="font-weight:normal; border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]" colspan="2">
<img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" />
<phrase 1="$post[startdate]" 2="$post[enddate]">$vbphrase[x_until_y]</phrase>
</td>
<else />
<td class="thead" style="font-weight:normal; border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[right]: 0px" $post[scrolltothis]>
<!-- status icon and date -->
<a name="post$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" /></a>
$post[postdate]<if condition="!$show['detailedtime']">, $post[posttime]</if>
$post[firstnewinsert]
<!-- / status icon and date -->
</td>
<td class="thead" style="font-weight:normal; border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[left]: 0px" align="$stylevar[right]">
&nbsp;
<if condition="$show['postcount']">#<a href="showpost.php?$session[sessionurl]p=$post[postid]&amp;postcount=$post[postcount]" target="new" rel="nofollow" id="postcount$post[postid]" name="$post[postcount]"><strong>$post[postcount]</strong></a></if>
<if condition="$show['inlinemod']">
<input type="checkbox" name="plist[$postid]" id="plist_$postid" style="vertical-align:middle; padding:0px; margin:0px 0px 0px 5px" value="$post[checkbox_value]" />
</if>
</td>
</if>
</tr>
<tr valign="top">
<td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">

<div id="postmenu_$post[postid]">
<if condition="$show['profile']">
<center>$post[onlinestatus] <a class="bigusername"href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a></center>
<script type="text/javascript"> vbmenu_register("postmenu_$post[postid]", true); </script>
<else />
$post[musername]
</if>
</div>

<if condition="$post['usertitle']"><div class="smallfont"><center>$post[usertitle]</center></div></if>
<if condition="$post['rank']"><div class="smallfont"><center>$post[rank]</center></div></if>
$template_hook[postbit_userinfo_left]

<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;<br /><center><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></center>
</div>
</if>
<!-- BEGIN POSTBIT TABS -->
<div id="postbittabs$post[postid]" class="djdot">

<ul>
<li><span title="View Tab 1"><a href="#" rel="tab1$post[postid]" id="selected$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4$post[postid]">&nbsp;</a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5$post[postid]">&nbsp;</a></span></li>
</ul>

<br style="clear: left" />

</div>

<div class="smallfont">

<!--TAB 1 CONTENT -->
<div id="tab1$post[postid]" class="tabcontent">

<div class="info">Tab 1 Content:Block A</div>
<div class="info">Tab 1 Content:Block B</div>
<div class="info">Tab 1 Content:Block C</div>

</div>

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

<!-- TAB 3 CONTENT -->
<div id="tab3$post[postid]" class="tabcontent">

<div class="info">Tab 3 Content:Block A</div>
<div class="info">Tab 3 Content:Block B</div>
<div class="info">Tab 3 Content:Block C</div>
<div class="info">Tab 3 Content:Block D</div>
<div class="info">Tab 3 Content:Block E</div>
<div class="info">Tab 3 Content:Block F</div>

</div>

<!-- TAB 4 CONTENT -->
<div id="tab4$post[postid]" class="tabcontent">

<div class="info">Tab 4 Content:Block A</div>
<div class="info">Tab 4 Content:Block B</div>
<div class="info">Tab 4 Content:Block C</div>

</div>

<!-- TAB 5 CONTENT -->
<div id="tab5$post[postid]" class="tabcontent">

<div class="info">Tab 5 Content:Block A</div>
<div class="info">Tab 5 Content:Block B</div>
<div class="info">Tab 5 Content:Block C</div>
<div class="info">Tab 5 Content:Block D</div>
<div class="info">Tab 5 Content:Block E</div>
<div class="info">Tab 5 Content:Block F</div>
<div class="info">Tab 5 Content:Block G</div>
<div class="info">Tab 5 Content:Block H</div>
<div class="info">Tab 5 Content:Block I</div>

</div>

</div>


<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabs$post[postid]")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>

<!-- END POSTBIT TABS -->
<div class="smallfont">
&nbsp;<br />
<if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
<if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if>
<if condition="$post['age']"><div>$vbphrase[age]: $post[age]</div></if>
<div>
$vbphrase[posts]: $post[posts]
</div>
$template_hook[postbit_userinfo_right_after_posts]
<if condition="$show['infraction']"><div>$vbphrase[infractions]: $post[warnings]/$post[infractions] ($post[ipoints])</div></if>
<if condition="$show['reputation']"><if condition="$show['reppower']">$vbphrase[reppower]: <span id="reppower_$post[postid]_$post[userid]">$post[reppower]</span> </if><div><span id="repdisplay_$post[postid]_$post[userid]">$post[reputationdisplay]</span></div></if>
$template_hook[postbit_userinfo_right]
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div>

</td>
<if condition="$show['moderated']">
<td class="alt2" id="td_post_$post[postid]" style="border-$stylevar[right]: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]">
<else />
<td class="alt1" id="td_post_$post[postid]" style="border-$stylevar[right]: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]">
</if>
$template_hook[postbit_messagearea_start]
<if condition="$show['messageicon'] OR $post['title']">
<!-- icon and title -->
<div class="smallfont">
<if condition="$show['messageicon']"><img class="inlineimg" src="$post[iconpath]" alt="$post[icontitle]" border="0" /></if>
<if condition="$post['title']"><strong>$post[title]</strong></if>
</div>
<hr size="1" style="color:$stylevar[tborder_bgcolor]; background-color:$stylevar[tborder_bgcolor]" />
<!-- / icon and title -->
</if>

<!-- message -->
<div id="post_message_$post[postid]">
$ad_location[ad_showthread_firstpost_start]
$post[message]
</div>
<!-- / message -->

<if condition="$show['attachments']">
<!-- attachments -->
<div style="padding:$stylevar[cellpadding]px">

<if condition="$show['thumbnailattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_thumbnails]</legend>
<div style="padding:$stylevar[formspacer]px">
$post[thumbnailattachments]
</div>
</fieldset>
</if>

<if condition="$show['imageattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_images]</legend>
<div style="padding:$stylevar[formspacer]px">
$post[imageattachments]
</div>
</fieldset>
</if>

<if condition="$show['imageattachmentlink']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_images]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[imageattachmentlinks]
</table>
</fieldset>
</if>

<if condition="$show['otherattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_files]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[otherattachments]
</table>
</fieldset>
</if>

<if condition="$show['moderatedattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attachments_pending_approval]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[moderatedattachments]
</table>
</fieldset>
</if>

</div>
<!-- / attachments -->
</if>

$template_hook[postbit_signature_start]
$ad_location[ad_showthread_firstpost_sig]

<if condition="$post['signature']">
<!-- sig -->
<div>
__________________<br />
$post[signature]
</div>
<!-- / sig -->
</if>

$template_hook[postbit_signature_end]

<if condition="$show['postedited']">
<!-- edit note -->
<div class="smallfont">
<hr size="1" style="color:$stylevar[tborder_bgcolor]; background-color:$stylevar[tborder_bgcolor]" />
<em>
<if condition="$show['postedithistory']">
<phrase 1="$post[edit_username]" 2="$post[edit_date]" 3="$post[edit_time]" 4="posthistory.php?$session[sessionurl]p=$post[postid]">$vbphrase[last_edited_link_by_x_on_y_at_z_postid]</phrase>
<else />
<phrase 1="$post[edit_username]" 2="$post[edit_date]" 3="$post[edit_time]">$vbphrase[last_edited_by_x_on_y_at_z]</phrase>
</if>
<if condition="$post['edit_reason']">
$vbphrase[reason]: $post[edit_reason]
</if>
</em>
</div>
<!-- / edit note -->
</if>

</td>
</tr>
<tr>
<td class="alt2" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px">
<if condition="$show['reputationlink']">
<span id="reputationmenu_$post[postid]"><a href="reputation.php?$session[sessionurl]p=$post[postid]" rel="nofollow" id="reputation_$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_button]/reputation.gif" alt="<phrase 1="$post[username]">$vbphrase[add_to_xs_reputation]</phrase>" border="0" /></a></span>
<if condition="$show['popups']"><script type="text/javascript"> vbrep_register("$post[postid]")</script></if>
</if>
<if condition="$show['infractionlink']"><a href="infraction.php?$session[sessionurl]do=report&amp;p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/infraction.gif" alt="<phrase 1="$post[username]">$vbphrase[add_infraction_for_x]</phrase>" border="0" /></a></if>
<if condition="$show['reportlink']"><a href="report.php?$session[sessionurl]p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/report.gif" alt="$vbphrase[report_bad_post]" border="0" /></a></if>
$post[iplogged]
&nbsp;
</td>
<if condition="$show['moderated']">
<td class="alt2" align="$stylevar[right]" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[left]: 0px; border-top: 0px">
<else />
<td class="alt1" align="$stylevar[right]" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-$stylevar[left]: 0px; border-top: 0px">
</if>
<!-- controls -->
<if condition="$post['editlink']">
<img style="display: none" id="progress_$postid" src="$stylevar[imgdir_misc]/progress.gif" alt="$vbphrase[loading_editor_please_wait]" />
<a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
</if>
<if condition="$post['forwardlink']">
<a href="$post[forwardlink]"><img src="$stylevar[imgdir_button]/forward.gif" alt="$vbphrase[forward_message]" border="0" /></a>
</if>
<if condition="$post['replylink']">
<a href="$post[replylink]" rel="nofollow"><img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
</if>
<if condition="$show['multiquote_post']">
<a href="$post[replylink]" rel="nofollow" onclick="return false"><img src="$stylevar[imgdir_button]/multiquote_<if condition="$show['multiquote_selected']">on<else />off</if>.gif" alt="$vbphrase[multi_quote_this_message]" border="0" id="mq_$post[postid]" /></a>
</if>
<if condition="$show['quickreply'] AND !$show['threadedmode']">
<a href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a>
</if>
<if condition="$show['moderated']">
<img src="$stylevar[imgdir_misc]/moderated.gif" alt="$vbphrase[moderated_post]" border="0" />
</if>
<if condition="$show['spam']">
<img src="$stylevar[imgdir_misc]/spam_detected.png" alt="$vbphrase[spam_post]" border="0" />
</if>
<if condition="$show['deletedpost']">
<if condition="$show['managepost']">
<a href="postings.php?$session[sessionurl]do=managepost&amp;p=$post[postid]"><img src="$stylevar[imgdir_misc]/trashcan.gif" alt="$vbphrase[manage]" border="0" /></a>
<else />
<img src="$stylevar[imgdir_misc]/trashcan.gif" alt="$vbphrase[deleted_post]" border="0" />
</if>
</if>
<if condition="$show['redcard']">
<a href="infraction.php?$session[sessionurl]do=view&amp;p=$post[postid]"><img src="$stylevar[imgdir_button]/redcard.gif" alt="$vbphrase[received_infraction]" border="0" /></a>
<else />
<if condition="$show['yellowcard']">
<a href="infraction.php?$session[sessionurl]do=view&amp;p=$post[postid]"><img src="$stylevar[imgdir_button]/yellowcard.gif" alt="$vbphrase[received_warning]" border="0" /></a>
</if>
</if>
$template_hook[postbit_controls]
<!-- / controls -->
</td>
</tr>
</table>
$template_hook[postbit_end]

<!-- post $post[postid] popup menu -->
<div class="vbmenu_popup" id="postmenu_$post[postid]_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">$post[username]</td>
</tr>
<if condition="$show['profile']">
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$post[userid]">$vbphrase[view_public_profile]</a></td></tr>
</if>
<if condition="$show['pmlink']">
<tr><td class="vbmenu_option"><a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[send_private_message_to_x]</phrase></a></td></tr>
</if>
<if condition="$show['emaillink']">
<tr><td class="vbmenu_option"><a href="sendmessage.php?$session[sessionurl]do=mailmember&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[send_email_to_x]</phrase></a></td></tr>
</if>
<if condition="$show['homepage']">
<tr><td class="vbmenu_option"><a href="$post[homepage]"><phrase 1="$post[username]">$vbphrase[visit_xs_homepage]</phrase></a></td></tr>
</if>
<if condition="$show['search']">
<tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=finduser&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[find_more_posts_by_x]</phrase></a></td></tr>
</if>
<if condition="$post['userid'] AND $show['member']">
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]"><phrase 1="$post[username]">$vbphrase[add_x_to_contacts]</phrase></a></td></tr>
</if>
$template_hook[postbit_user_popup]
</table>
</div>
<!-- / post $post[postid] popup menu -->

Thanks!
Did you remember to add the code from Step 3 to your headinclude?

[kevinkun]

Did you remember to add the code from Step 3 to your headinclude?
Thank you very much.
but it still doesn't work.

I've rechecked my tabcontent.css & tabcontent.js to make sure they were in the same folder, but still no change..

[Digital Jedi]

Thank you very much.
but it still doesn't work.

I've rechecked my tabcontent.css & tabcontent.js to make sure they were in the same folder, but still no change..
What is your forum address where you have this setup? I can tell you why it isn't working from looking at the source code.

[SorentoUltimate]

Perfect AddOn !!!

Known Bugs
There is one minor issue with the tabs that only occurs when using the AJAX quick reply and inline editing. Actually it's two issues, but I've only seen one or the other on my live site vs. my demo board. In one instance, the entire content of all your tabs displays all at once when posting/editing using AJAX. This is not a huge deal, as the only person who sees it do that is the person doing the posting/editing. And it will return to normal anytime he reloads or refreshes the page. The other instance is when after posting/editing through AJAX, no tab content appears, except the dot tabs. This is also not a huge deal as the same thing will happen here too; only the poster sees it and it will look normal anytime he returns or reloads the page. I think it's a minor trade off for the sleek look it gives your forum the rest of the time.any news about it?
any one found a solution?

[Digital Jedi]

Perfect AddOn !!!

any news about it?
any one found a solution?
As far as I know, there's no way around this due to JavaScript limitations.

[mikem164]

Looks like nice work. I have 6 skins, is there an easy way I can tell a template to keep this change on ALL TEMPLATES? I really don't want to do it on just one, and I can see after the 2nd one I'm gonna want to stab my eye if I go any further... eh?
Thanks for any advice

[Alien123]

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.


<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</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.


<!--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.
<li><span title="View Tab 2"><a href="#" rel="tab2$post[postid]">&nbsp;</a></span></li>


<!-- 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
mytabs.setpersist(false)
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.


mytabs.init()
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.

<if condition="$variable[variable]"></if>
<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:

Vbulletin Conditionals (http://www.vbulletin.com/forum/showthread.php?t=200894) | vBulletin Template Conditionals List (http://forum.vbulletinsetup.com/f18/vbulletin-template-conditionals-list-2185.html)




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:<div class="info">$post[onlinestatus] </div>


Posts:<div class="info">$vbphrase[posts]: $post[posts]</div>


Age: <if condition="$post['age']"><div class="info">$vbphrase[age]: $post[age]</div></if>


Join Date: <if condition="$post['joindate']"><div class="info">$vbphrase[join_date]: $post[joindate]</div></if>


Biography: <if condition="$post[field1]"><div class="info"><b>Biography:</b> $post[field1]</div></if>


Interests: <if condition="$post[field3]"><div class="info"><b>Interests:</b> $post[field3]</div></if>


Occupation: <if condition="$post[field4]"><div class="info"><b>Occupation:</b> $post[field4]</div></if>


Infractions:<if condition="$show['infraction']"><div class="info">$vbphrase[infractions]: $post[warnings]/$post[infractions] ($post[ipoints])</div></if>


Reputation:<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">$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:<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>



[U]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: <if condition="$show['credits_post']">
<div class="info">
$vbphrase[credits]: <span id="cdt_$post[postid]_$post">$post[credits]</span> <if condition="$show['credits_donate']">[<a href="credits.php?$session[sessionurl]do=manage&amp;u=$post[userid]#donate">$vbphrase[donate]</a>]</if> <if condition="$show['credits_check']">[<a href="credits.php?$session[sessionurl]do=banking&amp;u=$post[userid]">$vbphrase[check]</a>]</if>
</div>
</if>


Countries/Region Flags (Replace 8 and 9 with whatever fields your using): <!-- 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):<div class="info">
<if condition="$crowns">
$post[crowns]$post[champtext]
<else />
$post[username] has not championed any arcade games. </if>
</div>



[U]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:<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&amp;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&amp;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&amp;userlist=buddy&amp;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.

you think you could post the code you used? in yours

[leqo]

http://onlinehile.org/repy.png

reply ajax bug :S how to fix?

[Bubble #5]

This is a great idea. Should be default in vB.

Seems to work in 4.2.1.

Does anyone know how to center the dots in Postbit?

I tried "align="center" in the div but that didn't work.

UPDATE:

For anyone who is looking for how to do this, here is the information...

Change the CSS for djdot ul to the following;

.djdot ul{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* width: 80%; width of menu*/
}