Prosilver Complete Sidebar Tutorial
Description: Learn how to add highly flexible sidebars to your forum. For Prosilver & Prosilver-based Styles.
In Categories: Styles
- Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/prosilver-complete-sidebar-tutorial/]Knowledge Base - Prosilver Complete Sidebar Tutorial[/url]
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
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.
- Open Notepad: Type “left sidebar” into the text area. Click: File → Save As:
- File Name: sidebar_left.html
- Save as type: All files
- Repeat this process to create sidebar_right.html.
- 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:
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:
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>
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>
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>
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.