This is a very simple method to add sidebars to your installation of IPB through the board wrapper. This will be explained using IPB v2.1.5 but I have used this on 1.3.1 & 2.0.x with a few minor changes.
Notice: This is a per skin edit. If you have more than one skin on your board you will need to do these edits for each one seperately. Please backup a copy of your wrapper before starting.
First thing to do is open your AdminCP and select the wrapper for the skin you want to edit. If you don't know where this is click on the Look & Feel tab then Skin Manager and select Edit Board Header & Footer Wrapper from the drop down menu for the skin you are editing.
Once this opens look for
at the bottom of the code. This is the section that you will be adding the sidebar into.
You will need to decide where you want the sidebar to display but for now we will make it appear on the right side next to the board section.
Look for
and add this above it
Next look for
and add below
The width="160" sets the sidebar to 160px wide, you can change this as required. The style="padding-left: 10px" adds a gap to the left of the sidebar so it's not up against the board.
If you click on the Save and Reload Wrapper button and have a look at your board you will see an empty space down the right hand side where the bar will appear.
Now that you have a very basic sidebar it's time to add some content. How you do this is completely up to yourself but I'll give you a little code to get you started.
Find where you added these lines
and in between them add the following
Now what you have done there is setup one small section in the sidebar that holds two smaller section with two links in the top one and one image link in the bottom one.
Further notices: You can set this to display in various different ways. You can have the sidebar on either or both sides. You can have two sidebars on either side. Or you can position it(them) so that appear next to the navbar or above the copyright. You can also display adsense or other ad programmes that have the option of towers down either side of your board. I've even added donation buttons to one of these before for someone.
Notice: This is a per skin edit. If you have more than one skin on your board you will need to do these edits for each one seperately. Please backup a copy of your wrapper before starting.
First thing to do is open your AdminCP and select the wrapper for the skin you want to edit. If you don't know where this is click on the Look & Feel tab then Skin Manager and select Edit Board Header & Footer Wrapper from the drop down menu for the skin you are editing.
Once this opens look for
Code:
<% BOARD HEADER %>
<% MEMBER BAR %>
<% NAVIGATION %>
<!--IBF.NEWPMBOX-->
<% BOARD %>
<% BOARD FOOTER %>
<% STATS %>
<% COPYRIGHT %>
</div>
</body>
</html>You will need to decide where you want the sidebar to display but for now we will make it appear on the right side next to the board section.
Look for
Code:
<% BOARD %>
Code:
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top"><!--Normal Board Content-->
Code:
<% COPYRIGHT %>
Code:
</td><!--end of Normal Board Content-->
<td valign="top" width="160" style="padding-left: 10px"><!--RightHand Sidebar-->
</td><!--end of RightHand Sidebar-->
</tr></table>The width="160" sets the sidebar to 160px wide, you can change this as required. The style="padding-left: 10px" adds a gap to the left of the sidebar so it's not up against the board.
If you click on the Save and Reload Wrapper button and have a look at your board you will see an empty space down the right hand side where the bar will appear.
Now that you have a very basic sidebar it's time to add some content. How you do this is completely up to yourself but I'll give you a little code to get you started.
Find where you added these lines
Code:
<td valign="top" width="160" style="padding-left: 10px"><!--RightHand Sidebar-->
</td><!--end of RightHand Sidebar-->
Code:
<div class="borderwrap">
<div class="maintitle">Sidebar</div>
<div class="formsubtitle">Some links</div>
<div class="row1" style="padding: 3px">» <a href="#">Link goes here</a></div>
<div class="row2" style="padding: 3px">» <a href="#">Another link</a></div>
<div class="formsubtitle">Or an image</div>
<div class="row1" style="padding: 10px 20px 10px 20px"><a href="#"><img src="link to picture here"></a></div>
</div><br /><!--end div for the borderwrap-->Now what you have done there is setup one small section in the sidebar that holds two smaller section with two links in the top one and one image link in the bottom one.
Code:
<div class="borderwrap"> - adds the skin border around this block of the sidebar.
<div class="maintitle">Sidebar</div> - adds a title to the block using the same css as the forum titles.
<div class="formsubtitle">Some links</div> - adds a subsection title for the top section of this block that holds the two links.
<div class="row1" style="padding: 3px">» <a href="#">Link goes here</a></div> - This adds the first link the this section of the block.
<div class="row2" style="padding: 3px">» <a href="#">Another link</a></div> - adds the second link. On the default skin this will have a different background color than the first link, some skins will show this with the same color.
<div class="formsubtitle">Or an image</div> - adds the second subsection title for the block holding the image.
<div class="row1" style="padding: 10px 20px 10px 20px"><a href="#"><img src="link to picture here"></a></div> - adds the image to this section of the block. The padding here is set to show a 120px image centered with 10px spacing at the top and bottom. Change the 20px to center your image depending on the sizes of the sidebar and the image.
</div><br /><!--end div for the borderwrap--> - ends the borderwrap around this section and adds a space incase you add a second block.Further notices: You can set this to display in various different ways. You can have the sidebar on either or both sides. You can have two sidebars on either side. Or you can position it(them) so that appear next to the navbar or above the copyright. You can also display adsense or other ad programmes that have the option of towers down either side of your board. I've even added donation buttons to one of these before for someone.