Postbit Legacy Alignment (Centered + 2 Columns)
Mod Version: 1.00, by Thelonius Beck
| vB Version: 3.8.4 | Rating:  (1 vote - 4.00 average) |
Installs: 5 |
| Released: 23 Feb 2010 | Last Update: Never | Downloads: 43 |
 Not Supported
 Template Edits
Re-usable Code
|
||
Some folks were requesting this in another thread, so I jotted down a quick tutorial. I am hardly a coding wiz, so if anyone has a better way, I'd love to see it.
This will make your postbit (legacy) look like this;
Bear in mind, this was all done on an unmodified, default themed board. So all colors, code etc. reflect that. You'll need to make any changes to match your own style.
Here we go.
First, we'll add one CSS class.
In your Admin CP go:
Style Manager -> Your Style -> All Style Options
Add the following to you Additional CSS Definitions
Now for the template edits.
Style Manager -> Your Style -> Edit Templates -> postbit_legacy
First, we'll center all the data in the postbit.
Find:
Replace with:
Now we'll arrange the postbit data into columns.
Find the data fields (<if condition="$post['joindate']"> is a good search phrase if you cannot find it).
By default, the code is written like this;
NOTE: I didn't include all of the data, just the first one and the closing div. No worries, just repeat the process for each of them.
The edit is quite simple, really. Simply place a table with a width of 100% inside the existing div code.
Then, separate the actual "Title: Data" into separate td classes (the class we created in step one). Remember that each item gets it's own row.
Don't forget to close the table at the end.
This will take care of any/all vB default postbit fields. Don't forget, anything you add after the fact will need the same treatment.
Also, some modifications use template hooks to place data into your postbit. For these, you'll have to find the templates the modification uses and edit them accordingly.
This will make your postbit (legacy) look like this;
Bear in mind, this was all done on an unmodified, default themed board. So all colors, code etc. reflect that. You'll need to make any changes to match your own style.
Here we go.
First, we'll add one CSS class.
In your Admin CP go:
Style Manager -> Your Style -> All Style Options
Add the following to you Additional CSS Definitions
Code:
.postdata{
background: #E0E0F6;
color: #000000;
border-bottom: 1px solid #22229C;
font-weight: bold;
font-size: 11px;
}
Style Manager -> Your Style -> Edit Templates -> postbit_legacy
First, we'll center all the data in the postbit.
Find:
Code:
<td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">
Code:
<td class="alt2" align="center" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">
Find the data fields (<if condition="$post['joindate']"> is a good search phrase if you cannot find it).
By default, the code is written like this;
Code:
<div class="smallfont">
<br />
<if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
<!-- Rest of the posbit fields -->
</div>
The edit is quite simple, really. Simply place a table with a width of 100% inside the existing div code.
Then, separate the actual "Title: Data" into separate td classes (the class we created in step one). Remember that each item gets it's own row.
Don't forget to close the table at the end.
Code:
<div class="smallfont">
<table style="width: 100%">
<tr>
<if condition="$post['joindate']">
<td class="postdata">$vbphrase[join_date]:</td>
<td class="postdata">$post[joindate]</td>
</if>
</tr>
<!-- Rest of the posbit fields -->
</table>
</div>
Also, some modifications use template hooks to place data into your postbit. For these, you'll have to find the templates the modification uses and edit them accordingly.
Download
postbit_alignment.txt (3.4 KB, 47 downloads)
Screenshots
