|
Nice Postbit Sidebar
by
04 May 2010
Rating:
 (2 votes
- 4.50 average) This tutorial will teach you how to add a nice sidebar in the first post of every thread (unless you change it not to). Just follow the simple steps below.  Open up your postbit template, and find: Code:
<div id="post_message_$post[postid]"> $post[message] </div> Code:
<div class="content"> <div id="post_message_$post[postid]"> $post[message] </div> </div> <if condition="$post[postcount] == 1"> <div class="sidebar"> <table class="sidebaritem"> <tr> <td width="20px"><img src="images/postbit/user.png"></td> <td><a href="member.php?$session[sessionurl]u=$post[userid]">Authors Profile</a></td> </tr> </table> <div style="height:4px;"></div> <table class="sidebaritem"> <tr> <td width="20px"><img src="images/postbit/heart.png"></td> <td><a href="reputation.php?p=$post[postid]">Add to Reputation</a></td> </tr> </table> <div style="height:24px;"></div> <table class="sidebaritem"> <tr> <td width="20px"><img src="images/postbit/add.png"></td> <td><a href="newreply.php?$session[sessionurl]do=newreply&noquote=1&p=$post[postid]" rel="nofollow">Reply to Thread</a></td> </tr> </table> <div style="height:4px;"></div> <table class="sidebaritem"> <tr> <td width="20px"><img src="images/postbit/printer.png"></td> <td><a href="printthread.php?t=$post[threadid]">Print Thread</a></td> </tr> </table> <div style="height:4px;"></div> <table class="sidebaritem"> <tr> <td width="20px"><img src="images/postbit/email.png"></td> <td><a href="sendmessage.php?do=sendtofriend&t=$post[threadid]">Share Thread</a></td> </tr> </table> <div style="height:4px;"></div> <table class="sidebaritem"> <tr> <td width="20px"><img src="images/postbit/flag_red.png"></td> <td><a href="report.php?p=$post[postid]">Report Thread</a></td> </tr> </table> </div> </if> <div class="clear"></div> Code:
$post[signature] Code:
<if condition="$post[postcount] !== 1"><div style="width:910px;background:#D1D1E1;height:1px;margin-left:auto;margin-right:auto;"></div><br /><div style="width:90%;margin-left:auto;margin-right:auto;">$post[signature]</div></if> Code:
.content {
width:700px;
margin:10px;
float:left;
}
.sidebar {
width:200px;
margin:10px;
float:right;
padding: 5px;
}
.sidebaritem {
border: 1px solid #D1D1E1;
border-left: 2px solid #D1D1E1;
width:200px;
background: #fbfbfb url(images/misc/alts.gif) repeat-x;
padding: 5px;
}
.clear {
clear:both;
}
Now go to vBulletin Options, find Use Legacy (Vertical) Postbit Template, and make sure it's checked to "No". You should have a working sidebar. In CSS, you will need to edit widths, and colors to suit your forum. If you want more icons, please go to FamFamFam.com and find the silk icons. |