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: Styles
- Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/simple-side-bars-in-prosilver+prosilver-se/]Knowledge Base - Simple side bars in Prosilver & Prosilver_SE[/url]
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.
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.
Based on a topic by mukundis and polished up by Mixstar
Edit: Demo image added - 20/6/2011