How to Add a Sidebar in prosilver Tutorial

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

How to Add a Sidebar in prosilver Tutorial

Postby Matthew69 » Sun Dec 16, 2007 2:03 am

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
Extensions Team Member
Extensions Team Member
Posts: 5405
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: How to Add a Sidebar in prosilver Tutorial

Postby prototech » Sun Dec 16, 2007 2:33 am

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
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Postby SquiD » Sun Dec 16, 2007 2:38 am

^^
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

Postby Matthew69 » Sun Dec 16, 2007 2:39 am

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

User avatar
Thatbitextra
Former Team Member
Posts: 7605
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

Postby Thatbitextra » Sun Dec 16, 2007 2:41 am

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

Postby Matthew69 » Sun Dec 16, 2007 2:47 am

: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

Postby robertduffy » Sun Dec 16, 2007 2:56 am

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

Postby Matthew69 » Sun Dec 16, 2007 3:09 am

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

Postby Pricelessparrots » Sun Dec 16, 2007 11:37 am

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

Postby Matthew69 » Sun Dec 16, 2007 2:21 pm

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

Postby Pricelessparrots » Sun Dec 16, 2007 2:24 pm

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

Postby Matthew69 » Sun Dec 16, 2007 2:27 pm

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

Postby Pricelessparrots » Sun Dec 16, 2007 5:32 pm

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

Postby Matthew69 » Sun Dec 16, 2007 5:39 pm

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

Postby Pricelessparrots » Sun Dec 16, 2007 5:43 pm

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


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

Who is online

Users browsing this forum: No registered users and 18 guests