How to Add a Sidebar in prosilver Tutorial

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
joebanana
Registered User
Posts: 134
Joined: Tue Nov 23, 2004 6:28 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by joebanana » Sun Dec 16, 2007 5:44 pm

Nice one, thanks!

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 » Sun Dec 16, 2007 5:50 pm

it does work, but the outcome doesn't look really nice, you would probably want to play around with the cellspacing and other stuff, just add the overall header code, to the very end or the overall_header.html

I wouldshow you mine, but it won't let you view it. So just play around with the settings and find the best look, but yes it does work for subsilver2 :D
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 » Sun Dec 16, 2007 7:57 pm

I appreciate your help but that isnt working for me..
Thankyou anyhow..
Paul
Regards
Paul

User avatar
SbT
Registered User
Posts: 72
Joined: Sun Dec 16, 2007 6:12 pm
Location: Germany

Re: How to Add a Sidebar in prosilver Tutorial

Post by SbT » Sun Dec 16, 2007 8:07 pm

hi Matthew69,
i was always been looking for something like this - good job, Thanks !
Question:
Is it possible to use div with float instead of tables?

regards,
SbT
Sorry for my bad English!

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 » Sun Dec 16, 2007 8:08 pm

like i said I am a beginner to phpbb 3 and code, could you explain that to me a little bit, like what are you talking about?
Image

mukundis
Registered User
Posts: 54
Joined: Thu Jan 13, 2005 9:19 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by mukundis » Sun Dec 16, 2007 8:23 pm

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.



DEMO
http://iluvdesi.com

Let me know my mistakes and any help u want.




Edit I made some typos. Corrected it. it Should Work now
Last edited by mukundis on Fri Jan 11, 2008 8:59 pm, edited 2 times in total.

User avatar
SbT
Registered User
Posts: 72
Joined: Sun Dec 16, 2007 6:12 pm
Location: Germany

Re: How to Add a Sidebar in prosilver Tutorial

Post by SbT » Mon Dec 17, 2007 1:07 pm

mukundis wrote: No Tables Nothing. Just DIV DIV And Pure DIVS. God I hate Tables. :(
dito ...

Thats what I'm looking for ... yesterday I had no time to try it myself - Thank you.
I will check this soon and give a feedback.

Your Page is down

Best Regards,
SbT
Sorry for my bad English!

User avatar
GoleyC
Registered User
Posts: 374
Joined: Thu Mar 14, 2002 5:22 pm
Location: Ohio
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by GoleyC » Mon Dec 17, 2007 4:35 pm

mukundis wrote:I have a better tute. :)
Go to Administration Panel -> Styles -> Theme and click on Edit
Find

Code: Select all

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

Code: Select all

width:85%;
float:Right
Does this section above go with the #page-body so you have thise:

Code: Select all

#page-body {
	margin: 4px 0;
	clear: both;
width:85%;
float:Right;
}
I'm really confused as to the find/add sequence.
CG

User avatar
SbT
Registered User
Posts: 72
Joined: Sun Dec 16, 2007 6:12 pm
Location: Germany

Re: How to Add a Sidebar in prosilver Tutorial

Post by SbT » Mon Dec 17, 2007 4:58 pm

GoleyC wrote:
Does this section above go with the #page-body so you have thise:

Code: Select all

#page-body {
margin: 4px 0;
clear: both;
width:85%;
float:Right;
}
I'm really confused as to the find/add sequence.
Yes, you can also find it in the common.css

regards,
sbt :)
Sorry for my bad English!

User avatar
SbT
Registered User
Posts: 72
Joined: Sun Dec 16, 2007 6:12 pm
Location: Germany

Re: How to Add a Sidebar in prosilver Tutorial

Post by SbT » Mon Dec 17, 2007 6:32 pm

The div floatings are realy working fine for me.
I'll post a screen as soon as I'm done with styling.

regards,
SbT :)
Sorry for my bad English!

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 » Mon Dec 17, 2007 9:16 pm

hey thanks for the feedback. I like the idea about <-- INCLUDE overall_sidepage.html --> thing thats what I am doing, I will be working on a mad for that, with user info, login, top posters and more. =]
Image

Freedom Fighter
Registered User
Posts: 59
Joined: Fri Dec 14, 2007 12:41 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by Freedom Fighter » Mon Dec 17, 2007 10:35 pm

GoleyC wrote:
Does this section above go with the #page-body so you have thise:

Code: Select all

#page-body {
	margin: 4px 0;
	clear: both;
width:85%;
float:Right;
}
I'm really confused as to the find/add sequence.
Yup that's right. I tried it taht way and it worked.

I would also advise using hash # instead of . dot for the page-sidebar style tfor conformity.

Another note: I found that shrinking the width of the page caused the page body to fall under the left sidebar, so I removed the lines

Code: Select all

clear: both; 
width:85%;
from the page body style.

This is the code I ended up with to get it working ( for left sidebar )

Code: Select all


#page-body {
         margin: 4px 0;
         margin-right:20px;
         float:left;
}

#page-sidebar {
         float:left;
         margin-top:4px;
         width:14%;
}

#page-footer {
	clear:left;
	
}

and in the page itself...

Code: Select all

<div id="page-sidebar">
<!-- INCLUDE overall_sidebar.html -->
</div>
getting there now :)

joebanana
Registered User
Posts: 134
Joined: Tue Nov 23, 2004 6:28 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by joebanana » Thu Dec 20, 2007 3:54 pm

Nice one thanks.

User avatar
mej284
Registered User
Posts: 1126
Joined: Fri Nov 02, 2007 11:38 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by mej284 » Thu Jan 03, 2008 6:33 pm

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 overall_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
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 cna make it 80% or something.



DEMO
http://watchtvin.us
Let me know my mistakes and any help u want.
Couple of questions where you call to <!-- INCLUDE sidebar.html --> should that not be <!-- INCLUDE overall_sidebar.html -->?

Second Question: If I am trying to do three columns would this be the page-body code?

Code: Select all

#page-body {
width:60%;
float:auto
Last Question: You put the above code in the footer so it will show on every page. If I just want it to show on the index_body page I would move the div's to that html and would the code that was to be placed in the common.css be the same.
I do not respond to unsolicited PM's

Skin-lab styles
SubMerged Style

rspowers
Registered User
Posts: 41
Joined: Tue Feb 13, 2007 9:27 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by rspowers » Fri Jan 04, 2008 1:30 am

Here is the code I used to put a sidebar on the right hand side and it was really easy:

In overall_header.html:

after <body>:

Code: Select all

<div style="min-width: 900px;">

<div style="float: left; width: 85%; height: 100%;">

In Overall_footer.html:

Before </body>

Code: Select all

</div>
<div style="float: left; width: 14%; height: 100%; min-width: 135px;">
<a href="../contact.php"><img src="image.jpg"/></a>

</div>
</div>
Here is what it looks like: http://www.delmarvasurf.com/phpBB3/

I found I liked this sidebar better than the one described above and its easier, but its a matter or preference. They both work fine.

Locked

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