Show Thread Enhancements - Postbit Legacy Alignment (Centered + 2 Columns)

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;

posbit_mod.png

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

.postdata{
         background: #E0E0F6;
         color: #000000;
         border-bottom: 1px solid #22229C;
         font-weight: bold;
         font-size: 11px;
}

Now for the template edits.

Style Manager -> Your Style -> Edit Templates -> postbit_legacy


First, we'll center all the data in the postbit.

Find:

    <td class="alt2" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">

Replace with:

    <td class="alt2" align="center" width="175" style="border: $stylevar[cellspacing]px solid $stylevar[tborder_bgcolor]; border-top: 0px; border-bottom: 0px">

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;

            <div class="smallfont">
                &nbsp;<br />
                <if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>
                
                <!-- Rest of the posbit fields -->
                
            </div>

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.

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

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.

postbit_alignment.txt