sidebar [Jcink.com Wiki]

Forum Sidebars

How to install a sidebars is a fairly commonly asked question and there are many various ways to add one. Here are several common methods to add a sidebar to your site. Bare in mind that this sidebar takes a bit of HTML and CSS knowledge to put in and customize. This sidebar is also only very basic, but offers a lot of room for flexibility and customization via Javascript or JQuery.

Important note - These sidebars do not work on mobile mode. It is for desktop view only.

Installing a Left Sidebar

Step 1 - Log into your Admin Control Panel.

Step 2 - Click to “Skins & Templates” in the left hand side. (This will open the box containing the options if it's not already open.)

Now you have a decision to make. You can install the whole sidebar to the wrappers or you can install it to the webpage maker. The webpage maker is a good choice if you intend to have multiple skins and use the same sidebar on each one of them. (This will allow you to edit 1 location and have it update across all your skins.)

Wrappers version

Step 3 - On the left side of the page, click “Board Wrappers”

Step 4 - Beside the skin you want to add the sidebar to, click the “Edit” link.

Step 5 - In the board wrappers, add to the top:

<table align=center valign=top>
<tr>
<td valign="top">

If you add it below <% NAVIGATION %> it will make the top of the forum a different width than the forum itself. (This is because the top will take up the entire width but the forum will have to share space with the sidebar.) Otherwise, place it at the top, above <% BOARD HEADER %>.

Step 6 - Next, directly below the bit you just added, add the sidebar code (posted here).

Step 7 - Now directly beneath the sidebar code add:

</td>

<td valign="top">

This code should be above <% BOARD HEADER %> (or <% DSHOUTBOX %> / <% BOARD %> if you placed the code from step 5 under the <% NAVIGATION %>.)

(This is to separate the forum into 2 parts… 1 for the sidebar and 1 for the rest of the forum.)

Step 8 - Now beneath the <% STATS %> or <% SKIN_SELECTOR %> add:

</td>
</tr>
</table>

This closes the table. (Preventing things from getting sucked inside and vanishing.)

Step 9 - Click “Submit Changes” to save the modifications.

Step 10 - On the left side of the page, click “Style Sheets”.

Step 11 - On the page that loads, click the “Edit” link beside the skin's CSS you want to modify.

Step 12 - In the CSS box, add the CSS code (posted here)

Step 13 - Click “Submit Changes” to save the modifications.

This provides you with an extremely basic sidebar. It has not yet been customized at all. Feel free to do that now by editing the wrappers and changing the content or by modifying the CSS.

Webpage maker version

Step 3 - Click “Webpage Maker”

Step 4 - Make sure to set: “Turn webpages online?” to “Yes” if it isn't already.

Step 5 - Set “Enable Include Keys for Board Wrappers?” to “Yes” also.

Step 6 - Click “Save settings” if either of the above two options need to be changed. (They must be set to “Yes” or else the include key won't work.)

Step 7 - In the Webpage maker's home, click the button under the heading “Add a new page” titled: “Create new webpage”

Step 8 - On the page that loads now, set “Page Title:” as whatever you desire (I recommend calling it Sidebar for easy locating later if/when you need to edit it.)

Step 9 - Then set the “Include key:” box to: Sidebar . (You can titled it whatever you want, but you will need to remember this in step #16 when we use it. )

Step 10 - Next, set “Allow key use in Board Wrappers?” to “Yes”. (This is critical or else the sidebar will not display properly. )

Step 11 - Enter the sidebar code (posted here) in the box.

Step 12 - Click the “Create webpage” button to save the work.

Step 13 - On the left side of the page, click “Board Wrappers”

Step 14 - Beside the skin you want to add the sidebar to, click the “Edit” link.

Step 15 - In the board wrappers, add to the top:

<table align=center valign=top>
<tr>
<td valign="top">

If you add it below <% NAVIGATION %> it will make the top of the forum a different width than the forum itself. (This is because the top will take up the entire width but the forum will have to share space with the sidebar.) Otherwise, place it at the top, above <% BOARD HEADER %>.

Step 16 - Next, enter <% sidebar %> (or whatever you decided to call it) below the code you just entered in the previous step.

Step 17 - Now directly beneath the sidebar code add:

</td>

<td valign="top">

This code should be above <% BOARD HEADER %> (or <% DSHOUTBOX %> / <% BOARD %> if you placed the code from step 15 under the <% NAVIGATION %>.)

(This is to separate the forum into 2 parts… 1 for the sidebar and 1 for the rest of the forum.)

Step 18 - Now beneath the <% STATS %> or <% SKIN_SELECTOR %> add:

</td>
</tr>
</table>

This closes the table. (Preventing things from getting sucked inside and vanishing.)

Step 19 - Click “Submit Changes” to save the modifications.

Step 20 - On the left side of the page, click “Style Sheets”.

Step 21 - On the page that loads, click the “Edit” link beside the skin's CSS you want to modify.

Step 22 - In the CSS box, add the CSS code (posted below)

Step 23 - Click “Submit Changes” to save the modifications.

Installing a Right Sidebar

Installing a right sidebar is virtually the same as installing one on the left… Except the placement of the code is slightly different. (The side bar code would go below the forum code, see examples.)

Instead of placing the code like this (for a left sidebar):

<table align=center valign=top>
<tr>
<td valign="top">
<% sidebar %> <!-- or if you use the pure code then you'd put that here -->
</td>

<td valign="top">
<% BOARD %> 
<% SKIN_SELECTOR %>
</td>

</tr>
</table>

You would post it like this:

<table align=center valign=top>
<tr>

<td valign="top">
<% BOARD %> 
<% SKIN_SELECTOR %>
</td>

<td valign="top">
<% sidebar %> <!-- or if you use the pure code then you'd put that here -->
</td>

</tr>
</table>

Sidebar Code

Code for Wrappers

<!-- start sidebar -->
<div id="sidebar">

<div id="welcomehead"><center>Welcome </center></div>
<div id="welcomebody">
Quick blurb

<!-- Quick login code -->
<form action='index.php' method='post'>
<input type='hidden' name='act' value='Login' />
<input type='hidden' name='CODE' value='01' />
<input type='hidden' name='s' value='' />
<input type='hidden' name='referer' value='' />
<input type='hidden' name='CookieDate' value='1' />
<table width='100%'>
   <tr>
 <td >Your account username</td> </tr> <tr>
 <td ><input type='text' size='20' maxlength='64' name='UserName' class='forminput' /></td>
   </tr>
   <tr>
 <td >Your account password</td> </tr> <tr>
 <td ><input type='password' size='20' name='PassWord' class='forminput' /></td>
   </tr>
  </table>
  <div align="center"><input type='submit' name='submit' value='Log In' class='forminput' /></div>
</form>
<!-- End quick login code -->

<br> <br>
</div>


<!-- plot info -->
<div id="plothead"><center>The  Plot</center></div>
<div id="plotbody">
Your plot goes here.

</div>


<!-- chatbox -->
<div id="chathead"><center>Chatbox</center></div>
<div id="chatbody">
 Your chatbox goes here.

</div>


<!-- staff -->
<div id="staffhead"><center>Staff</center></div>
<div id="staffbody">
<center>
<a href="index.php?showuser=1">ADMIN</a>
</center>
</div>

<!-- credits -->
<div id="credithead"><center>Credits</center></div>
<div id="creditbody">
This sidebar was designed by:<br>
<a href="http://endlessfight.net/index.php?showuser=1">VirusZero</a> <br><br>
</div>

</div>
<!-- end sidebar -->

Code for CSS

There are 2 methods, either one will work. Pick the simple method if you're not sure.

Simple

This method is for quicker, easier editing.

#sidebar {width: 200px; }

#welcomehead, #plothead, #staffhead, #chathead, #credithead {background-image: url(style_images/2/maintitle.gif); background-repeat: repeat-x; color: #FFF; font-weight: bold; }

#welcomebody, #plotbody, #staffbody, #chatbody, #creditbody {background-color: #DFE6EF; border 1px solid #576984; color: #434951; }

Advanced

This method allows users exact control over each individual section.

#sidebar {width: 200px; }

#welcomehead {background-image: url(style_images/2/maintitle.gif); background-repeat: repeat-x; color: #FFF; font-weight: bold; }
#welcomebody {background-color: #DFE6EF; border 1px solid #576984; color: #434951; }

#plothead {background-image: url(style_images/2/maintitle.gif); background-repeat: repeat-x; color: #FFF; font-weight: bold; }
#plotbody {background-color: #DFE6EF; border 1px solid #576984; color: #434951; }

#staffhead {background-image: url(style_images/2/maintitle.gif); background-repeat: repeat-x; color: #FFF; font-weight: bold; }
#staffbody {background-color: #DFE6EF; border 1px solid #576984; color: #434951; }

#chathead {background-image: url(style_images/2/maintitle.gif); background-repeat: repeat-x; color: #FFF; font-weight: bold; }
#chatbody {background-color: #DFE6EF; border 1px solid #576984; color: #434951; }

#credithead {background-image: url(style_images/2/maintitle.gif); background-repeat: repeat-x; color: #FFF; font-weight: bold; }
#creditbody {background-color: #DFE6EF; border 1px solid #576984; color: #434951; }

Troubleshooting

Forum juts beyond normal location

The most common issue regarding a sidebar is that after installation of one that part of the forum sticks out. The reason for this is that a div or the CSS controlling the width of the forum has been set too low and the addition of the sidebar forces it to extend beyond the div tag.

The most common CSS classes that are affected by this are:

#wrapper  
#ipbwrapper

Though these are not necessarily the only two (the exact CSS class causing this may be different depending on any custom classes added). But this is the primary reason for the forum extending beyond normal location.

 
sidebar.txt · Last modified: 2013/11/05 16:14 by viruszero