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
milleja46
Registered User
Posts: 120
Joined: Thu Nov 19, 2009 5:05 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by milleja46 »

Edit: nevermind got it working a div wasn't closed in a area before this was...

Great tutorial! It works great now that i figured out that a div wasn't closed properly and was causing it to not be aligned right

Edit2: actually for some reason on some pages it's shown at the bottom but still where it should be though not at the top is there a reason why? my site is milleja46games.frih.org/forums
MPESGT01
Registered User
Posts: 67
Joined: Wed Jun 07, 2006 12:11 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by MPESGT01 »

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.



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
working well (i did some personal touch to it) Thanks for sharing !!
stijne
Registered User
Posts: 106
Joined: Thu Aug 13, 2009 1:13 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by stijne »

I tried to add a sidebar banner but the result isn't working at all!
www.logopedia.be - it added the banner below the forum?

Please help
stevefoxnina
Registered User
Posts: 21
Joined: Mon Apr 18, 2011 6:06 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by stevefoxnina »

Anyone know why my sidebar don't appear on IE and Chrome.
IE show a error that the page is not found, Chrome show blank.

Only firefox works.
http://d2lord.com/phpbb/
wahid.a.a
Registered User
Posts: 2
Joined: Sun May 08, 2011 5:51 am
Location: Indonesia
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by wahid.a.a »

Just want to say it's a good tutorial and work just fine in my forum.
Thanks for sharing :D
wobblybob
Registered User
Posts: 1
Joined: Wed Aug 03, 2011 1:01 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by wobblybob »

Thanks a bunch, worked a treat. The only issue I had for the column was the last statemnet;

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

I changed this to;

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

After which the column appeared.

The issue I have now is that the individual posts have been centred, so got to figure that out.

Anyone interested, the forum is here with the new column on the right. If anyone knows how I can fix the text centering on the individual posts please let me know.

http://www.rotorstop.com

:lol:
Crazygar
Registered User
Posts: 114
Joined: Wed Sep 12, 2007 1:04 pm
Location: Winnipeg, MB
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Crazygar »

Is there a tweak to have the sidebar start at the top of the page? So that the header area is shrunk down as well? The style I am working on requires this and would like to know how to tweak the code to make this work as to how I am visualizing things.

Gary
ciise
Registered User
Posts: 1
Joined: Mon Oct 17, 2011 2:11 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by ciise »

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

Why the include overall_sidebar.html doesn't work? the forum float to the left, but on the right side the sidebar doesnot show up. I just need to copy pase <!--Include sidebar.html> or I need to change sth.
Last edited by marian0810 on Mon Oct 17, 2011 8:29 am, edited 1 time in total.
Reason: quote and code tags added
Kaycee
Registered User
Posts: 294
Joined: Tue Aug 10, 2010 6:23 am
Location: Nigeria
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Kaycee »

I tried inserting side bar to prosilver SE on the with instruction. The side bar kept dropping.
I also do not want the sidebar on the portal page. Is there a way to achieve it? Many thanks.
User avatar
Rahber
Former Team Member
Posts: 2720
Joined: Tue Feb 12, 2008 3:39 pm
Location: Pakistan
Name: Rahber
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Rahber »

What is the link to your board?

and to stop appearing sidebar in portal page

Code: Select all

<!-- IF SCRIPT_NAME neq 'portal' -->The code you dont want to appear on portal.php<!-- ENDIF -->
Kaycee
Registered User
Posts: 294
Joined: Tue Aug 10, 2010 6:23 am
Location: Nigeria
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Kaycee »

Thanks. Where do i put this code? http://naijacouplesshop.com
User avatar
Rahber
Former Team Member
Posts: 2720
Joined: Tue Feb 12, 2008 3:39 pm
Location: Pakistan
Name: Rahber
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Rahber »

Kaycee
Double check you edits

your sidebar div is lying under the page body technically it should not

The hirearchy should be like this

Code: Select all

<div wrap>
<div pagebody></div>
<div sidebar></div>
</div>
and you need to

Code: Select all

<!-- IF SCRIPT_NAME neq 'portal' --><div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div><!-- ENDIF -->
Kaycee
Registered User
Posts: 294
Joined: Tue Aug 10, 2010 6:23 am
Location: Nigeria
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Kaycee »

Is this what you mean?

Code: Select all

</div>

<div wrap>
<!-- IF SCRIPT_NAME neq 'portal' --><div class="page-sidebar">
<!-- INCLUDE sidebar.html --></div>
</div><!-- ENDIF -->


                      <div id="page-footer">
                
                	<div class="navbar">
                		
And like i said, the code to exempt portal page should be where? overall header or overall footer? Simple way to it will be appreciated.

Actually this cut off portal page by reducing the width when used.
Rick718
Registered User
Posts: 7
Joined: Sat Jan 07, 2012 7:38 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by Rick718 »

GREAT Tutorial !!!
It works perfect it took less than 5 minutes to get the sidebar working.

Thank you!!!!
Last edited by marian0810 on Sat Jan 07, 2012 9:28 am, edited 1 time in total.
Reason: http://www.phpbb.com/rules/#rule6a
Jayb52
Registered User
Posts: 141
Joined: Thu Dec 29, 2011 6:59 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by Jayb52 »

So i worked through this tutorial. And added in three side bars. But they are at the bottom of my page. DOes anyone know where I messed up the code? It has to be something simple but i can find it.
JAy
Locked

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