How to Add a Sidebar in prosilver Tutorial

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

How to Add a Sidebar in prosilver Tutorial

Post 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
Last edited by Matthew69 on Sat Mar 01, 2008 5:57 pm, edited 4 times in total.
Image
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: How to Add a Sidebar in prosilver Tutorial

Post by prototech »

Your "demo" isn't actually demonstrating anything. ;)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
SquiD
Registered User
Posts: 26
Joined: Tue Nov 13, 2007 11:51 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by SquiD »

^^
Agreed, It be easier for some people to understnad what it is if you had it in the demo. ;)
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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!
Image
Thatbitextra
Former Team Member
Posts: 7604
Joined: Mon Mar 21, 2005 5:04 am
Location: A place where something is or could be located; a site.
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Thatbitextra »

I think you've got the wrong style selected as default?
Styles KB
My MODs: Choose Who to Accept PMs From (Prevents unwanted PMs!) | Warn of Old Topic Before Posting Reply
Style: subBlack (Now updated to phpBB 2.0.22 and 5 new color schemes!)
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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.
Image
robertduffy
Registered User
Posts: 7
Joined: Sun Oct 10, 2004 4:48 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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? :)
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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.
Last edited by Matthew69 on Sun Dec 16, 2007 2:32 pm, edited 1 time in total.
Image
Pricelessparrots
Registered User
Posts: 224
Joined: Sat Dec 11, 2004 1:14 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post 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.. :)
Regards
Paul
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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
Last edited by Matthew69 on Sun Dec 16, 2007 2:26 pm, edited 1 time in total.
Image
Pricelessparrots
Registered User
Posts: 224
Joined: Sat Dec 11, 2004 1:14 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by Pricelessparrots »

Which code out of all above did you actually use.??
Regards
Paul
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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.
Image
Pricelessparrots
Registered User
Posts: 224
Joined: Sat Dec 11, 2004 1:14 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by Pricelessparrots »

Can you tell me if this will work on the subsilver2 style as well as the pro silver???
Regards
Paul
User avatar
Matthew69
Registered User
Posts: 170
Joined: Sat Jul 28, 2007 4:37 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post 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.
Image
Pricelessparrots
Registered User
Posts: 224
Joined: Sat Dec 11, 2004 1:14 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post 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
Regards
Paul
Locked

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