How to Add a Sidebar in prosilver Tutorial

[carita]

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]

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]

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]

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]

Sorry For Confusion.
The page-body should look like

Code: Select all

#page-body {
float:left;
margin:4px 0pt;
width:81%;
}

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]

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

[jochar]

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>

[ThunderCrew]

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

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

[mukundis]

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]

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

[Matthew69]

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!

[mukundis]

ic an solve it.
let me know.

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]

PM on its way

[ameisez]

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

[DBM]

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

Thanks.