all about sidebars

Cool Tips & Tricks	Help Communities:

<< Prev Topic | Next Topic >>

Cool Tips & Tricks ::: HTML FAQ ::: all about sidebars

Topic: all about sidebars

(?)

atlass

ezboard Moderator
ezSupporter
Posts: 2707

Posted: 6/11/03 1:23 pm

all about sidebars

A sidebar is the general term for navigation, links or text that sits on one or both sides of your forum. There are many different ways that you can make a sidebar, and so there is more than one method outlined in these FAQs. Look for something that suits your needs and expertise in the following:

Basic sidebar templates - these sidebars give you the basic code in which to place your sidebar code. They do not give you links and text to edit. They may appear the most simple, but you have to do the coding to achieve a full sidebar.

1. basic html left sidebar
2. basic right sidebar
3. basic two sided sidebar
4. basic left sidebar with header
5. basic right sidebar with header
6. basic two sided sidebar with header

CSS based sidebars - this sidebar (also known as the ezdesign sidebar) is fully editable, and uses css for all styling (fonts, colours, bk images). Premade skins are available for this sidebar, and on a Gold board it can be turned on and off for different forums.

7. the ezdesign sidebar

Extra goodies -

8. sidebar on main page only
9. sidebar that doesn't override forum banners

(see below for these sidebars)

Edited by: atlass at: 6/11/03 2:24 pm

atlass

ezboard Moderator
ezSupporter
Posts: 2708

Posted: 6/11/03 1:32 pm
1. left sidebar

Custom Header (third box):

<table cellspacing="0" style="border: 1px solid #cc0000; padding: 0px; width: 100%">
<tr>
<td style="background-color: #FFFFFF; text-align: center; vertical-align: top; width: 100px">

your side bar links go here. Use a nested table.

</td>
<td style="text-align: center; vertical-align: top; background-color: #FFCC99">

Custom Footer (fourth box):

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

Code note:
All colours in this code should be edited to suit your board.

atlass

ezboard Moderator
ezSupporter
Posts: 2709

Posted: 6/11/03 1:34 pm
2. right sidebar

Custom Header (third box):

<table cellspacing="0" style="border: 1px solid #cc0000; padding: 0px; width: 100%">
<tr>
<td style="background-color: #FFFFFF; text-align: center; vertical-align: top; width: 100px">

Custom Footer (fourth box):

</td>
<td style="text-align: center; vertical-align: top; background-color: #FFCC99">

your side bar links go here. Use a nested table.

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

Code note:
All colours in this code should be edited to suit your board.

atlass

ezboard Moderator
ezSupporter
Posts: 2710

Posted: 6/11/03 1:45 pm
Re: 3. left and right sidebar

Custom Header (third box):

<table cellspacing="5" style="padding: 0px; width: 100%">
<tr>
<td style="background-color: #FFFFFF; text-align: center; vertical-align: top; width: 120px; border: 1px solid #000000; padding: 4px;">

your left side bar links go here. Use a nested table.

</td>
<td style="text-align: center; vertical-align: top; background-color: #FFCC99; border: 1px solid #000000">

Custom Footer (fourth box):

</td>
<td style="text-align: center; vertical-align: top; background-color: #ffffff; border: 1px solid #000000; width: 120px; padding: 4px;">

your right side bar links go here. Use a nested table.

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

Code note:
All colours in this code should be edited to suit your board.

atlass

ezboard Moderator
ezSupporter
Posts: 2711

Posted: 6/11/03 1:54 pm
4. left sidebar with header

custom header (3rd box):

<table cellspacing="5" style="padding: 0px; width: 100%">
<tr>
<td colspan="3" style="background-color: #99cc99; border: 1px solid #000000; padding: 4px; text-align: center;">

this is your header

</td>
</tr>
<tr>
<td style="background-color: #FFFFFF; text-align: center; vertical-align: top; width: 120px; border: 1px solid #000000; padding: 4px;">

your left side bar links go here. Use a nested table.

</td>
<td style="text-align: center; vertical-align: top; background-color: #FFCC99; border: 1px solid #000000">

custom footer (4th box):

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

atlass

ezboard Moderator
ezSupporter
Posts: 2713

Posted: 6/11/03 1:57 pm
5. right sidebar with header

custom header (3rd box):

<table cellspacing="5" style="padding: 0px; width: 100%">
<tr>
<td colspan="3" style="background-color: #99cc99; border: 1px solid #000000; padding: 4px; text-align: center;">

this is your header

</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; background-color: #FFCC99; border: 1px solid #000000">

custom footer (4th box):

</td>
<td style="background-color: #FFFFFF; text-align: center; vertical-align: top; width: 120px; border: 1px solid #000000; padding: 4px;">

your right side bar links go here. Use a nested table.

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

atlass

ezboard Moderator
ezSupporter
Posts: 2714

Posted: 6/11/03 1:58 pm
6. left and right sidebar with header

custom header (3rd box):

<table cellspacing="5" style="padding: 0px; width: 100%">
<tr>
<td colspan="3" style="background-color: #ffcc99; border: 1px solid #000000; padding: 4px; text-align: center;">

this is your header

</td>
</tr>
<tr>
<td style="background-color: #FFFFFF; text-align: center; vertical-align: top; width: 120px; border: 1px solid #000000; padding: 4px;">

your left side bar links go here. Use a nested table.

</td>
<td style="text-align: center; vertical-align: top; background-color: #FFCC99; border: 1px solid #000000">

custom footer (4th box):

</td>
<td style="text-align: center; vertical-align: top; background-color: #ffffff; border: 1px solid #000000; width: 120px; padding: 4px;">

your right side bar links go here. Use a nested table.

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

atlass

ezboard Moderator
ezSupporter
Posts: 2715

Posted: 6/11/03 2:03 pm
7. the ezdesign sidebar

The following sidebar code is slightly different to previous ones in a stylist way - the html that goes in boxes 3 and 4 on the custom html page contain NO colours, typeface or background image information. In fact, ALL stylistic editing is done via css (ie, a skin) which goes in box 1 on the custom html page.

Why this is better and easier than using html only, or html and inline css is because it makes changing colours, borders and typefaces in your sidebar so much easier. You don't have to go near your html code in box 3 or 4 again after you first create it, so you're not going to accidently mess up your tables just by trying to edit a background colour.

The instructions and code for this sidebar are found HERE.

Or use the sidebar generator, an online tool to automatically create sidebars, found HERE.

Edited by: atlass at: 6/25/04 2:11 pm

atlass

ezboard Moderator
ezSupporter
Posts: 2716

Posted: 6/11/03 2:17 pm
8. sidebar on main page only

Actually, this involves javascript, but since most people look for sidebars under html I am putting it here.

You can use the following code to have your sidebar on your main page ONLY.

Note - if you are using a skinnable sidebar/ezdesign sidebar - then see THIS FAQ instead.

Use the following code:

FIRST BOX:

   <style>

body {margin-left: 0px}

.sidebar {
position: absolute; 
left: 10px; 
top: 10px; 
width: 150px; 
display: none
}

</style>

<script language="JavaScript">

if ( self.location == "http://pubXX.ezboard.com/bboardname" ) {

document.write(' <style>');
document.write(' body {margin-left: 170px}');
document.write(' .sidebar {display: block}');
document.write(' </style>');

}
</script>

Don't forget to edit in your own board url.

FOURTH BOX:

<div class="sidebar">
<table style="width: 150px; border: 1px black solid">
<tr>
<td align="center">
<h4>MY SIDEBAR</h4>
<br><br>
put any text or links you like in here<br><br>
<a href="#">a link</a><br>
<a href="#">another link</a><br>
<a href="#">a further link</a><br>
<a href="#">a farther link</a><br>
<a href="#">its a link</a><br>
</td>
</tr>
</table>
</div>

(Obviously edit the red bits!)

Edited by: Nutrocker at: 9/23/04 3:12 pm

atlass

ezboard Moderator
ezSupporter
Posts: 2717

Posted: 6/11/03 2:21 pm
9. a sidebar that doesn't override the banners

For a sidebar that doesn't override your forum banners, you can use the following code:

FIRST BOX:

<style>
body {margin-left: 170px}
div.sidebar { position: absolute; left:10px; top: 20px; width: 150px}
</style>

FOURTH BOX:

<div class="sidebar">

<table class="holder" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" valign="top" class="sidebartitle">Sidebar Title</td>
</tr>

<tr>
<td class="spacer"></td>
</tr>

<tr>
<td align="center" valign="top" align="center" class="sidebarlinks">
<a href="http://ezdesign.spayce.com" class="nav">link 1</a><br>
<a href="http://go.ezboard.com/bezdesign" class="nav">link 2</a><br>
<a href="http://go.ezboard.com/beztheme" class="nav">link 3</a></td>
</tr>

<tr>
<td class="spacer"></td>
</tr>

<tr>
<td class="sidebarsubhead" valign="top" align="center">subheading 1</td>
</tr>

<tr>
<td class="sidebar" valign="top" align="center">
Put any text you like here, plus links if you want.
</td>
</tr>

</table>
</div>

You can replace the entire code that is dark red with your own sidebar, or use section c1 from the ezdesign sidebar. The default skin (css) from the ezdesign sidebar can also be used.

atlass

ezboard Moderator
ezSupporter
Posts: 3436

Posted: 3/18/04 5:03 am
A step by step sidebar tutorial

For a more detailed, step by step guide on how to build a sidebar, see this tutorial

::: Topic Commands

<< Prev Topic | Next Topic >>

Icon Legend

:::Reply to Post Button

:::Edit Post Button

:::Delete Post Button (Moderator Only)

:::Subscribe to Thread Button

:::Email to Friend Button

- Cool Tips & Tricks - HTML FAQ -

ezboard Help Communities:

Help Forums Bug Base