Page 1 of 23

How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:03 am
by Matthew69
On page 2 of this tutorial a member posted a better tutorial. I think theirs is more effecient that mine :D . I use it, here is a quote. All credit goes to mukundis..
mukundis wrote:I have a better tute. :)
No Tables Nothing. Just DIV DIV And Pure DIVS. God I hate Tables. :(

Code: Select all

First Create a sidebar.html file in the template directory and add whatever you want.
Open template\overall_footer.html
NOTE: The reason I am putting the code in overall_footer is that I wanted to load the sidebar after my forum is rendered. As I will be displaying advertisements on the sidebar, It only makes sense to load them after the forum gets loaded so that Adsense bot can understand better as to what it needs to display.

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 the file.

Go to Administration Panel -> Styles -> Theme and click on Edit
Find

Code: Select all

#page-body {
For Displaying Sidebar on Left Add after

Code: Select all

width:85%;
float:left
Also Remove the Following line bellow #page-body

Code: Select all

float:auto

NOTE #page-body should look like this

Code: Select all

#page-body {
float:left;
margin:4px 0pt;
width:81%;
}
Go To The Last line and add After

Code: Select all

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




For Displaying Sidebar on Right Add after

Code: Select all

width:85%;
float:Right
Go To The Last line and add After

Code: Select all

.page-sidebar {
float:left;
margin-top:4px;
width:14%;
}
U can Play With the width to adjust the size and all. Just change the percentage.
I mean instead of 85% you can make it 80% or something.

Quick Tables:(you need to change the table name and text :D)
Image

Code: Select all

<div class="forabg">
	<div class="inner">
		<span class="corners-top"><span></span></span>
		<ul class="topiclist">
			<li class="header"><dl><dt>{ TITLE }</dt></dl></li>
		</ul>
		<ul class="topiclist forums">
			<li><dl>
				<dd class="posts_portal">
					{ CONTENT }<br />{ CONTENT }
				</dd>
			</dl></li>
		</ul>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>
Image

Code: Select all

<div class="panel">
	<div class="inner">
		<span class="corners-top"><span></span></span>
			<h3>{ TITLE }</h3>
			{ CONTENT }<br />{ CONTENT }
		<span class="corners-bottom"><span></span></span>
	</div>
</div>
EDIT: I am no longer going to post my tutorial. I did not write this, and do not give me any credit. Its easyier to find on the first page. The only thing that remains for my tutorial, are different box types. :D

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:33 am
by prototech
Your "demo" isn't actually demonstrating anything. ;)

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:38 am
by SquiD
^^
Agreed, It be easier for some people to understnad what it is if you had it in the demo. ;)

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:39 am
by Matthew69
it shows the sidebars in action. isn't that a demonstration? for a minute i deleted to code. opps =[ its there again, so you might have visited it at the wrong time. :D what lucky!

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:41 am
by Thatbitextra
I think you've got the wrong style selected as default?

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:47 am
by Matthew69
:roll: opps, that would most likely be the problem... check it our now =] i feel like an idiot. if its not the defualt phpbb3 style let me know, the demo is on the left hand side.

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:56 am
by robertduffy
this is great, thank you.. it's been the one thing that has held me back from upgrading from 2.x..

now the question is... how do i get the sidebar on the RIGHT side? :)

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 3:09 am
by Matthew69
ADDS A SIDEBAR TO THE RIGHT ONLY

I think you would add this code to the overall_header.html instead of the other code...

Code: Select all

<table width="100%" border="0" cellspacing="10" cellpadding="0">
       <tr>
                  <td align="left">
and in the overall_footer.html you would put this

Code: Select all

</td>
       <td width="200" align="right" valign="top" class="bodyline">
          <table width="200" border="0" cellpadding="10" cellspacing="0" bgcolor="#CC0099">
                   <tr>
                     <td><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">Right column in here..</font></td>
                   </tr>
                 </table>
       </td>
       </tr>
    </table>
ADDS A SIDEBAR TO BOTH SIDES
it you wanted one one each side you would
use this code in the overall_header.html

Code: Select all

[size=85]<table width="100%" border="0" cellspacing="10" cellpadding="0">
       <tr>
       <td width="200" align="left" valign="top" class="bodyline">
          <table width="200" border="0" cellpadding="10" cellspacing="0" bgcolor="#0000CC">
                   <tr>
                   <td><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">Left column in here..</font></td>
                    </tr>
                  </table>
       </td>
            <td align="left">[/size]
and this code in the footer

Code: Select all

</td>
       <td width="200" align="right" valign="top" class="bodyline">
          <table width="200" border="0" cellpadding="10" cellspacing="0" bgcolor="#CC0099">
                   <tr>
                     <td><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">Right column in here..</font></td>
                   </tr>
                 </table>
       </td>
       </tr>
    </table>
I have only tested the right and left separately not together. they work separately so they should together.

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 11:37 am
by Pricelessparrots
Ok guys, so to put it into simple terms, on a brand new install of phpbb3 to add a side bar to the left of pro silver would be what exactly??? Please could you pass on the relevant code as i need to do it..Thankyou.. :)

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:21 pm
by Matthew69
if you are looking for an example, visit my site, that will show you what it looks like. otherwise i am not completely sure I understand what you are trying to say. if you need help just PM me. or post here :D

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:24 pm
by Pricelessparrots
Which code out of all above did you actually use.??

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 2:27 pm
by Matthew69
the code at the very top, for the left. that code will supply a sidebar on the left. to change what is in the bar, just edit the overall_header.html where you added the code.

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 5:32 pm
by Pricelessparrots
Can you tell me if this will work on the subsilver2 style as well as the pro silver???

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 5:39 pm
by Matthew69
Well this tutorial was done for prosilver, but I don't see why it wouldnt working in subSilver 2, but I wouldn't know, because I don't every use subSilver, I will test it for you though. i Think it will work.

Re: How to Add a Sidebar in prosilver Tutorial

Posted: Sun Dec 16, 2007 5:43 pm
by Pricelessparrots
Not sure if that code is in the overall header of the subsilver2. It would be lovely to have the side border within my forum.. For google ads as you know..

Paul