How to Add a Sidebar in prosilver Tutorial

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
User avatar
carita
Registered User
Posts: 60
Joined: Tue Jul 25, 2006 8:23 pm
Location: Finland
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by carita » Sun Jan 06, 2008 10:49 am

I haven't been able to get it working. I am not using a prosilver theme. Once I got a message that the file doesn't exist or is empty

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 » Fri Jan 11, 2008 8:42 pm

SbT wrote:
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
Its Back Up.
Sorry for that

U can Also find it on

http://iluvdesi.com

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 » Fri Jan 11, 2008 8:52 pm

mej284 wrote:
mukundis wrote:I have a better tute. :)
DEMO
http://iluvdesi.com
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.
First Question -
It Should be overall_sidebar.html
I made a typo. sorry

Second -
For three Column yes I guess your code should work just fine. Float should not be auto. keep it left.

It depends on where U want your main content to be.

If u want
Main Content - Sidebar 1 - Sidebar 2 ->>Then use "Float left"

If u want
sidebar 1 - main content - sidebar 2 ->> You will have to make some adjustment. If you want this please PM me or reply here.


Third
If you want to show this only in Index body then you shud modify index_body.html
and The CSS should change a bit. You shud add a new class to page body in index_body.html and give width and float property to that class. If you are unable to do so let me know. i will try it out for you.
It shud be simple.

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 » Fri Jan 11, 2008 8:53 pm

carita wrote:I haven't been able to get it working. I am not using a prosilver theme. Once I got a message that the file doesn't exist or is empty
I made a typing mistake. i made a sidebar.html instead of overall-sidebar.html

I will edit the original post. You can try it again then.
Let me know if u are facing any issues. I will be glad to help you out.

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 » Fri Jan 11, 2008 8:57 pm

Sorry For Confusion.
The page-body should look like

Code: Select all

#page-body {
float:left;
margin:4px 0pt;
width:81%;
}
GoleyC wrote:
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.

pstudy
Registered User
Posts: 12
Joined: Sat Jan 05, 2008 11:12 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by pstudy » Sat Jan 12, 2008 6:04 am

Image
I cannot remove the deep thick blue line underneath the block on the left bar :cry:

jochar
Registered User
Posts: 18
Joined: Tue Aug 29, 2006 12:04 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by jochar » Fri Jan 18, 2008 3:31 am

Hi. I've added a sidebar on top, but I cant get alignment co center. Can anyone please help me.

Thsi is my code overal_header.html

Code: Select all

<div class="forabg">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header"><dl><dt>Top Bar</dt></dl></li>
      </ul>
      <ul class="topiclist forums">
         <li><dl>
            <dd class="posts_portal">
            </dd>
         </dl></li>
      </ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

User avatar
ThunderCrew
Registered User
Posts: 1438
Joined: Sat Jun 30, 2007 6:26 pm
Location: Ill, Usa
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by ThunderCrew » Fri Jan 18, 2008 5:22 am

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
Used this tutorial from reading another thread last night and turned it into using a left and right "sidebar"

Basicaly make 2 files of everything naming one leftnav and one rightnav and making sure to change the float direction etc.

Worked lovley :mrgreen:

Basicaly follow that tutorial and double it and change the include names IE if you do like me I did

overall_leftnav.html and overall_rightnav.html for the include files.
Then did this

Code: Select all

<div class="page-leftnav">
<!-- INCLUDE overall_leftnav.html -->
</div>

and

Code: Select all

<div class="page-rightnav">
<!-- INCLUDE overall_rightnav.html -->
</div>


and this

Code: Select all

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

Code: Select all

.page-leftnav {
float:left;
margin-top:4px;
width:14%;
}

Code: Select all

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

Code: Select all

.page-rightnav {
float:left;
margin-top:4px;
width:14%;
}

Etc etc and so on here is the demo of the test board im using to mess with layout and mod add ons etc
before going live with phpbb3 of course you have to edit widths and variables to fit your taste forum etc.

http://thunderncrew.com/test/index.php
Ugg im a t0tal newb again ...... 2 years off cant remember jack ... time to get to it

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 » Fri Jan 25, 2008 11:47 pm

I have made some changes so that I can Hide the Sidebar for some forum and show it on some other forum. This can be configured using The admin control panel.

I am too lazy to convert it into a mod. If someone want to know I can help him out a bit.

Demo : http://iluvdesi.com/treat-4-eyes-intern ... -f153.html Has No Sidebar
http://iluvdesi.com/video-trailers-wallpapers.html Has Sidebar

Glenn I
Registered User
Posts: 172
Joined: Wed Apr 20, 2005 6:11 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by Glenn I » Sat Jan 26, 2008 12:56 am

Firefox displays the left nav bar where I want it but IE7 floats it to the bottom. Can't figure out why it's doing this. If someone wants I can PM them the site etc...

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 » Sat Jan 26, 2008 3:25 am

Well I am not sute, but I know phpBB works better in FireFox, I don't use IE. I haven't had any problems reported lately on, but IE might be different in the way it reads the width and what not!
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 » Sat Jan 26, 2008 4:52 am

ic an solve it.
let me know. :)
Glenn I wrote:Firefox displays the left nav bar where I want it but IE7 floats it to the bottom. Can't figure out why it's doing this. If someone wants I can PM them the site etc...

Glenn I
Registered User
Posts: 172
Joined: Wed Apr 20, 2005 6:11 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by Glenn I » Sat Jan 26, 2008 5:08 am

PM on its way

User avatar
ameisez
Registered User
Posts: 1166
Joined: Sun Nov 04, 2007 7:04 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by ameisez » Sun Jan 27, 2008 12:40 pm

rspowers wrote: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.
Hi,

can you let me know if this is applicable in glacier design by shadowflames?

thanks
PHPBB on HOSTGATOR SERVER. MY PERSONAL CHOICE ;)
Need phpBB images and buttons? HIRE ME
my MOD: BB3 Media Player | a phpbb based media player

User avatar
DBM
Registered User
Posts: 159
Joined: Tue Oct 25, 2005 10:29 pm
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by DBM » Sun Jan 27, 2008 2:02 pm

Anyone know of a way to add a sidebar to the index page only?

Thanks.

Locked

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