Many people already know how to do this, but for someone that's less savvy with html and css, this little tutorial contains some basic methods of making the postbit more eye catching.
Below, I will show you a basic addition to your css and template to make the postbit more appealing. We will take a "default looking" postbit and add a box around the posters info.
Before :
untitled.PNG (Size: 17.75 KB / Downloads: 81)
After:
untitled2.PNG (Size: 18.14 KB / Downloads: 91)
Step 1:
In the admin panel, open
templates & styles>templates>"your theme">postbit templates>postbit_classic
**if you are using the horizontal layout, then you would substitue postbit_classic with postbit**
Find
Code:
{$post['user_details']}
Change to
Code:
<div class="postbit">{$post['user_details']}</div>
Step 2:
In the admin panel, open
templates & styles>"your theme">global css>edit stylesheet (advanced mode)
Add the following to the end of the css
Code:
.postbit {
border-top: solid 1px #C4C4C4;
border-left: solid 1px #C4C4C4;
border-right: solid 1px #C4C4C4;
border-bottom: solid 1px #C4C4C4;
color: black;
padding: 3px;
background: #EBEBEB;
}
Feel free to play around with the colors of the background and borders to find something that matches your theme's colors. A good site to use for color blends is
Color Blender
This will give you the basic css box around the poster details in the postbit.
If you want to go a step further, you can separate each detail into it's own box...like so:
untitled3.PNG (Size: 17.18 KB / Downloads: 66)
Step 1:
In the admin panel, open
templates & styles>templates>"your theme">postbit templates>postbit_author_user
Find
Code:
{$lang->postbit_posts} {$post['postnum']}<br />
{$lang->postbit_joined} {$post['userregdate']}
{$post['replink']}{$post['warninglevel']}
and place the <div> tags around the info you want displayed inside the box. For example...
Code:
<div class="postbit">{$lang->postbit_posts} {$post['postnum']}</div><br />
<div class="postbit">{$lang->postbit_joined} {$post['userregdate']}</div><br />
<div class="postbit">{$post['replink']}{$post['warninglevel']}</div>
Step 2:
Same as step 2 above, if you haven't already added it.
As I said, this is a basic guide to help make the postbit a little more appealing. You can add the divs around whichever info you want boxed...including the avatar, user title, and so on. Feel free to experiment with the backgrounds and borders. Maybe you would like a border of small christmas lights to use for the holidays? Or a background with your site's logo watermarked into it?
The possibilities are endless, so let your imaginations run wild!!!
