Welcome Guest [Log In] [Register]
Welcome!

Links

Credit
Add Reply
Sidebar Code
Topic Started: March 16, 2009, 12:04 pm (1,836 Views)
heatherbee.
Member Avatar
Administrator
Sidebar for ZetaBoards

Before you begin …

Coding skill is required for having a sidebar on ZetaBoards.

Like on InvisionFree and all other forums, sidebars do not work on all skins/themes. On ZetaBoards, this is particularly true if there are rounded corners on the h2 (category titles – maintitle in IF skins).

Please read each step! Using any sidebar code on ZB will result in altering the appearance of your theme. I have included steps on how to correct these changes.


Step 1 – Theme Settings

In your Theme Settings, set the width to 1024px or No width limit. You cannot have a sidebar with an 800px width! Your sidebar will be squished on the left, and your forum will hang over on the right. If you want a sidebar, you have to use 1024px or No width limit.

Also, because of the width restrictions I recommend having a sidebar no more than 150px wide.


Step 2 – The Code

Install the code in the Board Template. It will display on every theme you add to the theme selector. To add more sections, copy and paste each div. sequence.

Above the Board
 
<table align="center" valign="top">
<tr>
<td width="150" valign="top">

<div class="heading" id="heading">Welcome!</div>
<div class="sidebar" id="sidebar">

Welcome message.

</div>

<br />

<div class="heading" id="heading">Links</div>
<div class="sidebar" id="sidebar">

Link #1
Link #2

</div>

<br />

<div class="heading" id="heading">Credit</div>
<div class="sidebar" id="sidebar">

Sidebar © Heatherbee of <a href=http://rpg-directory.com/”>RPG-D</a>
</div>

</td>
<td width="874" height="100%" valign=top>


Below the Board
 
</tr></td></table>



Step 3 – The CSS

You will need to install this next portion in each Theme Appearance (if you are using more than one theme). The sidebar will not display properly without this put into the Theme Appearance. (I recommend putting it at the very end of the CSS). You can edit this to suit your forum appearance and preferences.


Theme Appearance #1
 
div#sidebar {
background: #f6f6f6;
font-size: 95%;
color: #838383;
padding: 10px;
}

div#heading {
background: #5a70b3;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
text-align: right;
padding: 10px;
}


This is a second version of the CSS. If you want your sidebar to have an image header (not just a blank background) you should use this version. It will require an added step.


Theme Appearance #2
 
div#sidebar {
background: #f6f6f6;
font-size: 95%;
color: #838383;
padding: 10px;
}

div#heading {
background: url(http://z3.ifrm.com/static/1/css/h2.png) #5a70b3;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
text-align: right;
padding: 10px;
}


To include an image header, find the .h2left, .h2right, or .h2center in your Theme Appearance CSS. (Ctrl+F works best). The .h2 will have a url behind the background (exactly like the heading division above). Copy that url address and plug it into the sidebar CSS.

The .h2 image might not be tall enough. If you see a line running through the bottom of your image, try changing the padding on the heading division to 5px.


Step 4 – Adjustments

Installing the sidebar has altered the way your board looks. It probably made your forum descriptions miniscule, your forum links massive, and your thread font tiny. If you like it this way, you can skip the adjustments. If you don’t, I’ve listed the areas you can modify to your preferences.


Quote:
 
html,body {
font-size:93.3%;
}


Raising this percentage will make everything on your forum larger, including your submenu links and statistics area. If you do alter this number, I suggest no more than 95%.


Quote:
 
.c_forum {
font-size:85%;
}

.c_forum strong a {
font-size:100%;
}

td.c_last {
font-size:85%;
}


The class .c_forum controls your forum descriptions. Try increasing the percentage by 5 until you’re satisfied with the size of the font. Class .c_forum strong a controls forum links in the description. You will probably want to lower this number. You may not need to adjust td.c_last depending on the theme you’re using.

Now that you’re finished …

To see an example of the sidebar installed, I have created a test board. Sidebar for ZetaBoards Test. There are three themes: no width limit, 1024px, and 800px.

I have explained this process as best I can. If you have specific questions, post in this thread and I’ll be happy to try and answer.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · codes. · Next Topic »
Add Reply