vBulletin LTS

How To Place Profile Info In Fieldset Style Boxes In postbit_legacy

by peterska2 24 Jun 2006

This tutorial explains how to box profile information into individual fieldsets using two different methods in postbit_legacy.

I recommend using either one or the other of these effects as using them together will have a negative impact on the resulting postbit_legacy layout.

While this tutorial deals soley with the posts and join date part of the template, it gives easy to follow steps to use this on all your postbit information.

Fieldsets With Legends (no conditionals)

In your postbit_legacy template find

Code:

<div>
$vbphrase[posts]: $post[posts]
</div>

and replace with

Code:

<div>
<fieldset>
<legend>$vbphrase[posts]</legend>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="smallfont" align="center">$post[posts]</td>
</tr>
</table>
</fieldset>
</div>

There are a number of important details in this replacement code, so now we will look at each of them in turn.

Firstly, we have retained the

Code:

<div>

as this is used to place each piece of information on a new line. If this is omitted, then the layout will be compromised.

Next we have the

Code:

<fieldset>

This tells us that we are creating a fieldset box and everything until this is exited will be included within the box.

This is followed by

Code:

<legend>$vbphrase[posts]</legend>

This creates the title for the box which is emedded into the box border. You can place anything that you wish to use as the title for the box between the legend tags.

Now we move onto the content. In order to populate the box, we must first create a table to place the contents in. To do this we use the following code:

Code:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="smallfont" align="center">

This tells us that we are creating a content table to fill the width of the fieldset box, with no border, no cellspacing and no cellpadding. We do not need to use cellspacing or cellpadding as the fieldset has padding included automatically. You will also notice that there is no class specified apart from smallfont. This is because we want it to use the same class as that section of the postbit (usually alt2). The smallfont class is used to ensure that the text remains a set style throughout the template. Finally in this section is the alignment for the content (in this case center). If you wish to have the content left aligned, then just remove this part of the code.

The next thing to be added is the actual content for the cell we have created. In this case we are using

Code:

$post[posts]

to display the postcount.

Finally, we need to close everything that we have opened, otherwise the rest of the page will attempt to nest itself within the first fieldset of the first post on the page. To do this, add

Code:

</td>
</tr>
</table>
</fieldset>
</div>

to the end of your content.

You will now have a box in your postbit that looks like this:

Fieldsets With Legends (using conditionals)

These are done in exactly the same manner, but the conditional must remain around the outside of the code.

An example of this is the join date information included in the above image.

The code used to generate this is

Code:

<if condition="$post['joindate']">
<div>
<fieldset>
<legend>$vbphrase[join_date]</legend>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="smallfont">
$post[joindate]
</td>
</tr>
</table>
</fieldset>
</div>
</if>

You will notice that the rest of the code is identical to that used for ths post count, apart from the conditional, the phrase to use in the legend, and the actual content.

Fieldsets Without Legends

If you like this effect, but don't want the labels to be separated from the information, then you can use the exact same methods used in the above examples apart from a couple of changes. This then provides a solid border around the information.

Looking at the post count code again, the replacement code would be

Code:

<div>
<fieldset>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="smallfont">
$vbphrase[posts]: $post[posts]
</td>
</tr>
</table>
</fieldset>
</div>

You will notice that this time we have not included a legend and have left the label next to the details to be posted.

Again, using the items that have conditionals simply involves placing this code within the if code.

The resulting effect using this method is:

I hope that you find this technique useful. If you use it and would like to be added as a live demo for this effect please post the URL to a page on your site where this is in action.

Similar Mods

Profile Enhancements Social Networking Fieldset in User Profile & Postbit	vBulletin 3.6 Template Modifications
vb 2.3.x Style PM, Profile, Search and Buddy buttons in Postbit_Legacy	vBulletin 3.5 Template Modifications

vblts.ru supports vBulletin®, 2022-2024