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
lavenlaar
Registered User
Posts: 54
Joined: Tue Mar 31, 2009 11:57 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by lavenlaar »

after reading all 12 pages thus far, there seems to be 2 or 3 different mods to this all here !
one says "delete" this after - and it's not there .. anyway

could somebody be kind enough to help?

I am after fixed width banners down the left and the right
so effectively (in %ages)
20% (banner) 70% (forum board) & 10% (banner)
Thats so that i can build the ads in photoshop and have the pixel dimensions pre-determined.

Could somebody be kind enough to show me what files to edit?
lavenlaar
Registered User
Posts: 54
Joined: Tue Mar 31, 2009 11:57 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by lavenlaar »

i also seem to have a little problem -
Image
i cannot get into the ACP at the base of the forum ... i made some edits as per
mukundis wrote: 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%;
}
could somebody tell me how to get into here now so that i may delete these codes?
drankur
Registered User
Posts: 271
Joined: Sat Dec 22, 2007 4:16 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by drankur »

u haven't done this step

Code: Select all

First Create a sidebar.html file in the template directory and add whatever you want.
lavenlaar
Registered User
Posts: 54
Joined: Tue Mar 31, 2009 11:57 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by lavenlaar »

i did - then a few posts later says to rename to "overall_sidebar"
i just want to get back in to delete - then restart
lavenlaar
Registered User
Posts: 54
Joined: Tue Mar 31, 2009 11:57 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by lavenlaar »

mukundis wrote: First Question -
It Should be overall_sidebar.html
I made a typo. sorry
Ariane A
Registered User
Posts: 296
Joined: Thu Apr 03, 2008 5:26 pm
Location: Switzerland, by the Leman Lake
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Ariane A »

Ariane A wrote:Hi,

I have read all 12 pages! but couldn't find an answer to my question.

I have followed the instructions in the first post, and successfully added a sidebar on all pages of my board (right side).

Now I would like to have this sidebar only on the index page and on some viewforum pages.
What changes have to be done in the css?

Currently I have:

Code: Select all

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

and

#page-body {
    width: 86%;
    float: left;
    margin: 4px 0pt;
}
Thanks a lot for your help.
Please, I'm sure some people on this board have the answer. Thank you.
Ariane
https://www.zeldaspalace.com - About the Legend of Zelda video games
yatinbhatt
Registered User
Posts: 78
Joined: Sat Oct 20, 2007 9:44 pm
Location: San Jose

Re: How to Add a Sidebar in prosilver Tutorial

Post by yatinbhatt »

This topic is going way out of hands now. Can somebody gather the correct code and make a single post that works for all ???

WFH is this, read post on first page and then second page and then oops, 10th page.... come on

Make a MOD or something.... This is what everybody wants ? give them option to enable both sides or one side of their choice....

Thanks
Yatin
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 »

It's very simple....

create overall_sidebar.html add your stuff
in your style/theme/common.css make the page body code like this

Code: Select all

#page-body {
        float:left;
        margin:4px 0pt;
        width:81%;
}
Or to your liking
at the bottom of the same file add this

Code: Select all

.page-sidebar {
float:right;
margin-top:4px;
width:14%;
}
or tweek to your liking to match your page body coding

in overall_footer add this

Code: Select all

<div class="page-sidebar">
<!-- INCLUDE overall_sidebar.html -->
</div>
Just before this

Code: Select all

<div id="page-footer">

	<div class="navbar">
Make sure you refresh templates and theme here is a demo

Image

You could use the sidebars for extra navigation, potred info like site stats ,posters, genders etc.
Or perhaps for adds, affiliates, images, whatever your heart desires.
Ugg im a t0tal newb again ...... 2 years off cant remember jack ... time to get to it
Ariane A
Registered User
Posts: 296
Joined: Thu Apr 03, 2008 5:26 pm
Location: Switzerland, by the Leman Lake
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Ariane A »

Hi ThunderCrew,

Could you please help me with my question? (3 posts above).

Thanks a lot.
Ariane
https://www.zeldaspalace.com - About the Legend of Zelda video games
User avatar
hejowicz
Registered User
Posts: 442
Joined: Sun Dec 23, 2007 4:03 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by hejowicz »

many thx ;)
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 »

Ariane A wrote:Hi ThunderCrew,

Could you please help me with my question? (3 posts above).

Thanks a lot.
Now I would like to have this sidebar only on the index page and on some viewforum pages.
What changes have to be done in the css?
I am not sure myself but I would guess maybe you would need to include the overall_sidebar.html in the index_body.html somewhere perhaps? |Instead of in the overall footer But not sure. If you figure it out report back as some others might want to do that too.
Ugg im a t0tal newb again ...... 2 years off cant remember jack ... time to get to it
paul.g.wolf
Registered User
Posts: 3
Joined: Tue Mar 03, 2009 9:54 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by paul.g.wolf »

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.
I'm playing with this mod but I have a problem in that my sidebar will move over the forum body when the window is too small? Anyway to lock this down?

The site is: http://www.walama.com/forum/index.php

My mods:

Overallheader:

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

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

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

Code: Select all

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

</div>
<div style="float: left; width: 13%; height: 100%; min-width: 175px;">
<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>

</div>
</div>

</body>
</html>
Ariane A
Registered User
Posts: 296
Joined: Thu Apr 03, 2008 5:26 pm
Location: Switzerland, by the Leman Lake
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Ariane A »

Ariane A wrote:Hi,

I have read all 12 pages! but couldn't find an answer to my question.

I have followed the instructions in the first post, and successfully added a sidebar on all pages of my board (right side).

Now I would like to have this sidebar ONLY on the index page and on some viewforum pages.
What changes have to be done in the css?

Currently I have:

Code: Select all

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

and

#page-body {
    width: 86%;
    float: left;
    margin: 4px 0pt;
}
Thanks a lot for your help.
Please, I'm sure some people on this board have the answer. Thank you.
Ariane
https://www.zeldaspalace.com - About the Legend of Zelda video games
EidolonHades
Registered User
Posts: 160
Joined: Tue May 19, 2009 3:38 pm

Re: How to Add a Sidebar in prosilver Tutorial

Post by EidolonHades »

Ariane A wrote: Please, I'm sure some people on this board have the answer. Thank you.
Something like this should be the ticket.

Remove this from the overall_header.html or overall_footer.html (which ever you put it in!)

Code: Select all

<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>
OPEN:
index_body.html

after:

Code: Select all

<!-- INCLUDE overall_header.html -->
add:

Code: Select all

<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>
OPEN:
viewforum_body.html

after:

Code: Select all

<!-- INCLUDE overall_header.html -->
add:

Code: Select all

<!-- IF FORUM_NAME eq "put_your_forumname_you_want_it_shown_on_here" -->
<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>
<!-- ENDIF -->
User avatar
madmartyau
Registered User
Posts: 440
Joined: Sun Sep 12, 2004 12:42 pm
Location: Brisbane,Australia
Name: Marty
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by madmartyau »

Ariane A wrote:
Ariane A wrote:Hi,

I have read all 12 pages! but couldn't find an answer to my question.

I have followed the instructions in the first post, and successfully added a sidebar on all pages of my board (right side).

Now I would like to have this sidebar ONLY on the index page and on some viewforum pages.
What changes have to be done in the css?

Currently I have:

Code: Select all

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

and

#page-body {
    width: 86%;
    float: left;
    margin: 4px 0pt;
}
Thanks a lot for your help.
Please, I'm sure some people on this board have the answer. Thank you.
This is what I used to put a sidebar on the left of the index page. I'm sure you can adapt it to be the other way around.
Call me Grumpy.
Locked

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