This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

Prosilver Complete Sidebar Tutorial

Description: Learn how to add highly flexible sidebars to your forum. For Prosilver & Prosilver-based Styles.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.3/kb/article/prosilver-complete-sidebar-tutorial/]Knowledge Base - Prosilver Complete Sidebar Tutorial[/url]

Image
Following this tutorial will install 6 different sidebar variations to your forum (left, right, both, index-only, global) easily switchable with one line of code. All sidebars are tableless, cross-browser tested and validate as xHTML 1.0 Strict.

Contents

  1. Create Sidebar Files
  2. HTML Edits
  3. CSS Edits
  4. Usage Instructions
  5. Adding Content
  6. Finishing Off

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: File → Save As:

    • File Name: sidebar_left.html
    • 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.

Image


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:

Code: Select all

<head>

Below, Add:

Code: Select all

<!-- 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:

Code: Select all

<div id="page-header">

Find:

Code: Select all

    </div>

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

Replace with:

Code: Select all

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

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

Find:

Code: Select all

<div class="navbar">

Before, Add:

Code: Select all

<!-- 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:

Code: Select all

<div class="copyright">{CREDIT_LINE}

Before, Add:

Code: Select all

<!-- 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:

Code: Select all

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

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

/* 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;
}

/* 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;
}

/* 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:

Code: Select all

<!-- 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.

Code: Select all

<!-- 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:

Code: Select all

/* 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:

Code: Select all

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

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:

Image

Code: Select all

<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>


Image

Code: Select all

<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>


Image

Code: Select all

<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>


Image

Code: Select all

<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>


Step 6) Finishing Off

As in all cases, please remember to refresh your theme and template cache after uploading the modified .CSS and .HTML files:

ACP: Styles Tab -> Style Components -> Themes -> Prosilver -> Refresh
ACP: Styles Tab -> Style Components -> Templates -> Prosilver -> Refresh


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.

Thanks for reading. Please share. :)