Welcome Guest [Log In] [Register]
Viewing Single Post From: Sidebar Code - Adding and Editing
Nicola Aug 3 2007, 07:54 PM
.....

 How to Add and Edit a Sidebar Code

This walkthrough will show you how to add the sidebar to your forum. There are also some custom blocks described after that you may want to add.

It is extremely difficult to accommodate for custom skins. Therefore if you have trouble adding this to your board, please open up a support ticket from your AdminCP, and I will assist you.

Please be aware that adding this may cause annoyance to users with low resolutions.

Sidebar Preview

The Sidebar Code
The code will be going in your Board Wrappers.
The board wrappers are located:
Admin CP -> Board Wrappers (near the end of the left side menu)

The Base Code
The text in grey <!-- are HTML notes --> you can leave these in or remove them. HTML notes are useful for describing what things do, without it appearing on the site :)
Quote:
 
<table id="main" cellspacing="10px" cellpadding="5px" align="center">
<tr>
<!-- begin side menu -->
<td valign="top" id="menu">

<!-- block -->
<div class="tableborder">
<div class="maintitle">Testing Block</div>
<div class="row4">
<p>
Insert content.
</p>
</div>
</div>
<!-- /end block -->

</td>

<!-- Begin main content -->
<td valign="top" id="board">

The base code has a generic block already added to the code.
  • Red - Title of the Sidebar block
  • Green - Content of the block

Deciding on the Placement
Click a placement option to view it's placement.

Then add:
Quote:
 
</td>
</tr>
</table>

To the very end of the contents in the Footer.

The CSS
Add this at the end of your Style Sheet.
Quote:
 
#main { width: 100%; padding: 0px;}
#menu { width: 200px;}

#menu .tableborder { margin-bottom: 5px;}
#menu .row4 p {margin:0;padding:3px;}

.block_plain {text-align: center;margin-bottom: 5px;}
Read this carefully.
  • width: 100%; : The overall width of your board, including the menu. Please keep in mind that the Google ads MUST have 750px (approx) of space to be in. Therefore the smallest width should ideally, be 750px + the width of your menu + miscellaneous (padding etc). If your menu is 200px in width, then an ideal smallest width is about 1000px.
  • padding: 0px; : Increase this value to add padding around the board. You could also add a background to #main, if you're comfortable using CSS. This is not a required edit to make, you and leave this as it is.
  • width: 200px; : The width of your menu.

The rest of the CSS is purely for aesthetic issues, therefore you do not need to edit it.


Adding BlocksAll blocks can be seen on the Sidebar Preview Test Board
The block added to the base code looks like this:
Quote:
 
<!-- block -->
<div class="tableborder">
<div class="maintitle">Title</div>
<div class="row4">
<p>
Insert content.
</p></div>
</div>
<!-- / -->

New blocks are added directly after the <!-- / -->. You may remove these..but they won't do anything to your sidebar if left in. They are HTML note tags and are simply there to give a clear indication on the start and end of each block. They feature in the base code to give you an idea of the area you add content to.Standard Block
Quote:
 
<!-- block -->
<div class="tableborder">
<div class="maintitle">Title</div>
<div class="row4">
<p>
Insert content.
</p>
</div>
</div>
<!-- / -->

  • Red - Title of the Sidebar block
  • Green - Content of the block
Standard Links Block
Quote:
 
<!-- block -->
<div class="tableborder">
<div class="maintitle">Title</div>
<div class="row4">
<p>         
<a href="http://">Link 1</a><br/>
<a href="http://">Link 2</a><br/>
</p>
</div>
</div>
<!-- / -->
  • Red - Title of the Sidebar block.
  • Blue - URL to desired location.
  • Green - Name of the link.
Stylish Links Block
Want to do something fun and different with some links?
Add this to the CSS:
Quote:
 
.block { background-color: #E4EAF2; padding:0!important}
.block a {display: block;padding: 2px 5px;border-top: 1px solid #EFF6FF;border-bottom: 1px solid #B5C1CF;text-decoration: none!important}
.block a:hover {text-decoration: none;border-bottom: 1px solid #EFF6FF;border-top: 1px solid #B5C1CF;background: #DFE6EF;}

  • Red - Styles the link as it appears.
  • Blue - Styles the HOVER when a cursor is moved over the link.
Then add this specific block. The HTML differs to a generic block as the links are styled differently.
Quote:
 

<!-- block -->
<div class="tableborder">
<div class="maintitle">Title</div>
<div class="block">
<a href="http://">Link 1</a>
<a href="http://">Link 2</a>
</div>
</div>
<!-- / -->
  • Red - Title of the Sidebar block.
  • Blue - URL to desired location.
  • Green - Name of the link.
Plain Box
Doesn't have a header or a main content area. Can be used to add an Image/series of images.
It is set to center the content. If you wish to change the alignment of it's content change the following snippet of CSS from the CSS added earlier on in this walkthrough:
Quote:
 
.block_plain {text-align: center;margin-bottom: 5px;}

Change to either left or right.Block code:
Quote:
 

<!-- block -->
<div class="block_plain">
<img src="http://"/><br/>
<img src="http://"/><br/>
</div>
  • Red - URL to image.


Regrettably, due to the unpredictability of non-standard modifications, support for this modification is not available.
Please note that this documentation doesn't cover blocks that use scripts to show things such as a 'quick login' box.
Edited by Jonathan, May 18 2009, 05:12 PM.
Offline Profile Quote Post
Sidebar Code - Adding and Editing · FAQ