thumb

Prosilver Complete Sidebar Tutorial

Learn how to add tableless sidebars to your phpBB forum.

What we’re trying to achieve

Sidebars are a common sight on the internet. It is a separate piece of real estate on the screen that sits beside ontent. They are prominent, non-intrusive and often used for displaying advertising, links and other site information. In this tutorial I’ll be guiding you on how to add sidebars to your phpBB forum.

Following this tutorial will install 6 different sidebar variations to your forum, easily switchable with one line of code. All sidebars are tableless and validate as xHTML 1.0 Strict.

    

Step 1) Create Sidebar Files

To keep our template files clean and free from clutter we’ll import our sidebar code from their own template files.

  1. Open Notepad: Type “left sidebar” into the text area. Click: FileSave As:
    1. File Name: sidebar_left.html
    2. Save as type: All files
  2. Repeat this process to create sidebar_right.html.
  3. You should now have two sidebar files: sidebar_left.html and sidebar_right.html. Move these to Prosilver’s /template/ folder.

Step 2) HTML Edits

Firstly, we’re going to input the variables that you’ll be using to control the sidebars. We’ll cover this in more detail later.

Open: /styles/prosilver/template/overall_header.html

Find:

<head>

Below, Add:

<!-- DEFINE $SIDEBARS = 'both' --> <!-- Options: Left | Right | Both | Off -->
<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' --> <!-- Options: Global | Index -->

Now we need to remove the #page-header div. It doesn’t actually do anything and its presence causes problems with the sidebar tags closing early.

Still in overall_header.html, find and delete:

<div id="page-header">

Find:

    </div>

    <a name="start_here"></a>

Replace with:

<a name="start_here"></a>

Now we’re going to add our sidebar structural code.

Find:

<div class="navbar">

Before, Add:

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index') -->
<!-- IF $SIDEBARS != 'off' -->
    <div class="sidebarwrapper">
<!-- ENDIF -->
    <!-- IF $SIDEBARS == 'left' -->
        <div class="fixedfluid-sidebar">
            <!-- INCLUDE sidebar_left.html -->
        </div>
       
        <div class="fixedfluid-content">
    <!-- ELSEIF $SIDEBARS == 'right' -->
        <div class="fluidfixed-sidebar">
            <!-- INCLUDE sidebar_right.html -->
        </div>
       
        <div class="fluidfixed-content">
    <!-- ELSEIF $SIDEBARS == 'both' -->
        <div class="fixedfluidfixed-left">
            <!-- INCLUDE sidebar_left.html -->
        </div>
       
        <div class="fixedfluidfixed-content">
    <!-- ENDIF -->
<!-- ENDIF -->

And of course, for every tag that we open it must be closed.

Open: /styles/prosilver/template/overall_footer.html

Find:

<div class="copyright">{CREDIT_LINE}

Before, Add:

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
    <!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
        </div><!-- /.fixedfluidcontent -->
        </div><!-- /.sidebarwrapper -->
    <!-- ELSEIF $SIDEBARS == 'both' -->
        </div>
        <div class="fixedfluidfixed-right">
            <!-- INCLUDE sidebar_right.html -->
        </div>
        </div>
    <!-- ENDIF -->
<!-- ENDIF -->

Step 3) CSS Edits

Luckily we’re not actually editing any CSS. Just adding some new lines to set out the structure and help with styling.

Open: /styles/prosilver/theme/common.css

At the bottom of the file, add:

/* Sidebars */
.sidebarwrapper {
    position: relative;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 170px;
    background: white;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 270px;
    background: white;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 270px 0 170px;
    background: white;
}

/* Sidebar Styling */

.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

Step 4) Usage Instructions

Enabling Sidebars

Administrators have several options to them when sidebars are installed. These can be set by modifying the following lines of code in overall_header.html:

<!-- DEFINE $SIDEBARS = 'both' -->

Options:

  • Left: Sidebar will show on left side only
  • Right: Sidebar will show on right side only
  • Both: Sidebars will appear on both left and right sides of the forum simultaneously.
  • Off: No sidebars will be displayed.

There are further options available for Administrators that wish to restrict pages the sidebar is shown on.

<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' -->

Options:

  • Global: Sidebar(s) will display on every page of your forum, including User Control Panel and Login pages.
  • Index: Sidebar(s) will only display on the forum index page.
Adjusting Sidebar Width

It’s very likely that you’ll wish to adjust the sidebar widths to accommodate your own advertising requirements. Due to the tableless nature of the sidebars adjusting widths is delicate and tricky. Essentially it’s important to remember that when a sidebar width is edited, the content side of the forum’s width must also be adjusted. So if you increase the width of the right sidebar by 10px, the width of the left side must be reduced by 10px.

As an example, let’s adjust the left sidebar width. The code is here in common.css:

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    bottom: 0;
    padding: 0;
}

To increase the width, we’d simply replace

260px

with a larger value such as

300px

. Keep in mind that we’ve now increased the width by

40px

. To avoid the sidebar overlapping the forum content, now we need to reduce the width of the left panel by

40px

. This is also located in common.css:

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 270px;
    background: white;
}

Here’s where things get a little confusing. To reduce the left side’s width, we actually need to increase the right padding value. The right padding value increases the distance between the right side of the forum and the browser. The sidebar floats over the white space this leaves. So we’d replace the

270px

with

310px

(270px + 40px). If you’re seriously confused by adjusting the widths let me know.

Step 5) Adding content to your sidebars

As covered way back in Step 1, the sidebar content is pulled from template files. Sidebar_left.html populates the left sidebar whilst sidebar_right.html populates the right sidebar.

Here are some pre-made codes you can copy+paste into your sidebar files:

<div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Block 1</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist sidebar">
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>                      
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>

<div class="forumbg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Block 2</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist sidebar">
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>                      
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>

<div class="panel bg1">
    <div class="inner"><span class="corners-top"><span></span></span>
        Panel 1
    <span class="corners-bottom"><span></span></span></div>
</div>

<br />

<div class="panel bg2">
    <div class="inner"><span class="corners-top"><span></span></span>
        Panel 2
    <span class="corners-bottom"><span></span></span></div>
</div>

<br />

<div class="panel bg3">
    <div class="inner"><span class="corners-top"><span></span></span>
        Panel 3
    <span class="corners-bottom"><span></span></span></div>
</div>

<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/1.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/2.gif" width="125" height="125" alt="" /></a>
<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/3.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/4.gif" width="125" height="125" alt="" /></a>

Finishing Off

Please let me know if you have trouble with anything in the tutorial. It’s very likely that in the future I will write a secondary article that focuses specifically on resizing sidebars etc. Future versions of this tutorial will also add support for users to collapse sidebars, and give the admin a finer level of control of which pages sidebars are displayed on.

Donating will help to keep this tutorial free and updated. Thanks. :)