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.

Simple side bars in Prosilver & Prosilver_SE

Description: This is a simple, customisable way to make a side bar in Prosilver & Prosilver_SE

In Categories:

Link to this article: Select All
[url=http://www.phpbb.com/support/docs/en/3.3/kb/article/simple-side-bars-in-prosilver+prosilver-se/]Knowledge Base - Simple side bars in Prosilver & Prosilver_SE[/url]

Note: Backup any files you intend editing before making any changes!

First create a sidebar.html file in the /styles/your_style/template folder and add whatever code you want where indicated. The example for sidebar.html maintains the style features and has three boxes, you can remove or add boxes as you wish:

sidebar.html

Code: Select all

<!-- This is the start of the first sidebar box -->

<
div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>First box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">

        <!-- Code here for the first box -->
        
        
</ul>
        <span class="corners-bottom"><span></span></span></div>
        </div>
<!--
 This is the end of the first sidebar box -->

<!--
 This is the start of the second sidebar box -->

<
div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Second box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">
                    
        
<!-- Code here for the second box -->    
            
        
</ul>
        <span class="corners-bottom"><span></span></span></div>
        
        
</div>        

<!-- This is the end of the second sidebar box -->
        
<!-- This is the start of the third sidebar box -->

<
div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Third box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">

        <!-- Code here for the third box -->    
            
        
</ul>
        <span class="corners-bottom"><span></span></span></div>
        
        
</div>

<!--
 This is the end of the third sidebar box --> 
             
 

Open styles/your_style/template/overall_footer.html and find:

Code: Select all

<div id="page-footer">
    <div class="navbar">  

Add Before:

Code: Select all

<div class="page-sidebar">
<!--
 INCLUDE sidebar.html -->
</
div>  

Save overall_footer.html

    NOTE: The reason the code is in overall_footer.html is that I want to load the sidebar after the forum has rendered, you can put it wherever you wish.
Open styles/your_style/theme/common.css and find:

Code: Select all

#page-body {
    margin: 4px 0;
    clear: both;
}
  

To display the sidebar on the left replace with:

Code: Select all

#page-body {
    margin: 4px 0;
    clear: both;
    width:85%;
    float:right;
}
  

Or for displaying the sidebar on the right replace with:

Code: Select all

#page-body {
    margin: 4px 0;
    clear: both;
    width:85%;
    float:left;
}
  

Also remove the following line below #page-body (if it exists)

Code: Select all

float:auto

For the sidebar on the left add this to the end of common.css:

Code: Select all

.page-sidebar {
float:left;
margin-top:4px;
width:14%;
}
  

For the sidebar on the right add this to the end of common.css:

Code: Select all

.page-sidebar {
float:right;
margin-top:4px;
width:14%;
}
  

Save common.css. refresh the template and theme.

You can play with the width to adjust the size, just change the percentage. Instead of 85% you can make it 80% etc.

Image

Based on a topic by mukundis and polished up by Mixstar

Edit: Demo image added - 20/6/2011