[How To] - ProSilver SE sidebar

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
WastedJoker
Registered User
Posts: 74
Joined: Mon Nov 17, 2008 10:20 pm

[How To] - ProSilver SE sidebar

Post by WastedJoker »

Do you want a simple sidebar to include on your ProSilver SE theme?

Here are some instructions to include such an element.

Files to be edited:

1. /root/styles/prosilver_se/template/overall_header.html
2. /root/styles/prosilver_se/theme/common.css


First let's implement the stylesheet changes.

common.css

See below:

Code: Select all

.sbdate {
       text-align: center;
       display: inline;
/*change below height and width values to match sidebar background*/
       width: 38px;
       height: 69px;
/*change padding-top to adjust the starting point of text in your sidebar*/
       padding-top: 6px;
/*change the colour of text in your sidebar*/
       color: #FFFFFF;
/*path to the sidebar background image, if required*/
       background: url('{T_THEME_PATH}/images/date.png') no-repeat left top;
/*if no background image to be used, below will control background color*/
/*background-color: #FFFFFF;*/
       font-weight: normal;
       position: absolute; 
/*will control the posiition of the sidebar - change to suit your requirements*/
       top: 79px;
       left: -36px;
       font-family: Verdana, Helvetica, Arial, sans-serif;
   }
  
   * html .sbdate {
       position: relative;
       z-index: 1;
   }
Add the above code to your common.css file in /root/styles/prosilver_se/theme/. It doesn't matter where you place the code in common.css but I recommend placing it just beneath the body & html elements. It's easier to find and amend while you tweak the layout.

I've added comments (between /* and */) above elements which you may need to change. The other elements should not be changed unless you know what you're doing.

Note: .sbdate can be changed to whatever you want as long as you reflect it in the div element in overall_header.html

In common.css search for:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 900px;
	margin: 0 auto;
}
and after that add:

Code: Select all

#sbdate-wrap {
  position: relative;
}
Change .sbdate to whatever you changed the prior element name to in the earlier instruction.

Now let us place the sidebar in your forum:


overall_header.html


In your ACP go to Styles | Templates | overall_header.html (or edit the file in FTP if that is your preference) and search for:

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="wrap">
After that, add:

Code: Select all

<div id="sbdate-wrap"><div class="sbdate">
Insert the content of your sidebar then end it with:

Code: Select all

</div></div>
Remember to refresh your template and theme via ACP.

This will work in FF 3.5 and IE8.

Feedback is appreciated :)

A working example can be seen at: http://www.heavymessing.co.uk/forum/

My forum has only one member and is basically a work in progress and something for me to pass the time :P

Hope it helps though.
Locked

Return to “[3.0.x] Styles Support & Discussion”