How to Add a Sidebar in prosilver Tutorial

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Fri Sep 13, 2013 8:16 pm

Lumpy Burgertushie wrote:I wonder why you started off wanting it on the left side....

oh well,

give me alittle time to redo all the code for you. I am in the middle of moving all my computers to their new place in the office so it might take me a little while to get everything hooked back up.

robert

lets continue with the coding !!.......proceed where we left......waiting !!!
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Fri Sep 13, 2013 8:56 pm

Lets move forward
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 66568
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Lumpy Burgertushie » Sat Sep 14, 2013 12:28 am

PolRas wrote:Lets move forward
Hi, sorry it took so long.

http://phpbbace.com/board

is that what you want?


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Sat Sep 14, 2013 6:03 pm

Lumpy Burgertushie wrote:
PolRas wrote:Lets move forward
Hi, sorry it took so long.

http://phpbbace.com/board

is that what you want?


robert
Yes something like that ...... But i would prefer the advert banner somehow centered.What i mean is that when you look at the banner its too close to forum board and it has left too much space on one side.Try to center the banner itself.By the way your progress is great
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 66568
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Lumpy Burgertushie » Sat Sep 14, 2013 6:38 pm

center it in what?

the min and max widths you gave me to work with are there.

the whole thing, board and sidebar, are centered in that 800px width.

the white space on either side is going to depend on the viewer's screen resolution.

what resolution are you using on your monitor?

I can add some padding or margin to move it away from the board a bit if that is what you want.

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Sat Sep 14, 2013 6:57 pm

Lumpy Burgertushie wrote:center it in what?

the min and max widths you gave me to work with are there.

the whole thing, board and sidebar, are centered in that 800px width.

the white space on either side is going to depend on the viewer's screen resolution.

what resolution are you using on your monitor?

I can add some padding or margin to move it away from the board a bit if that is what you want.

robert
i agree that it depends with the screen resolution of the screen.I like to use 1152 x 864 and it makes the banner look too close to the board forums but when the resolution is lower 800 x 600 it seems a little better. but i like the following sentence;

''I can add some padding or margin to move it away from the board a bit''

try it
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 66568
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Lumpy Burgertushie » Sat Sep 14, 2013 7:09 pm

I have been trying and so far it makes a mess. how is it now?


http://phpbbace.com/board


robert

make this change:

Code: Select all

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Sat Sep 14, 2013 7:56 pm

Lumpy Burgertushie wrote:I have been trying and so far it makes a mess. how is it now?


http://phpbbace.com/board


robert

make this change:

Code: Select all

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }

when you look at the site http://test.theharddisk.org/ you notice that the shape of the forum centerness has changed.
this is the settings am using

#wrap {
padding: 0 20px;
min-width: 750px;
width: 800px;
margin: 0 auto;
}

#sidebar {
float: right;
width: 15%;
height: 100%;
margin: 0 auto;
padding-left: 10px;
}
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 66568
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Lumpy Burgertushie » Sat Sep 14, 2013 8:03 pm

ok, let's start over again.

delete your common.css and overall_header.html files from the server or rename them.

start with a fresh pair of files.

overall_header.html should look exactly like this:

Code: Select all

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
    <div id="sidebar">



     <a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=POLLOP-"><img src="http://tracking.hostgator.com/img/Shared_Red_Yellow/120x600-animated.gif" border="0"></a>

	<script type="text/javascript" src="http://www.bluehost.com/src/js/pollop/CODE94/120x120/bh_120x120_03.gif"></script>
 


    </div>
    <div style="float: left; width: 79%; height: 100%;">
	<div id="page-header">
common.css should look exactly likethis:

Code: Select all

#wrap {

min-width: 750px;
width: 800px;
margin: 0 auto;
}

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }
make those changes and then refresh your template and theme in the admin panel /styles tab for prosilver.

then, refresh your browser several times.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Sat Sep 14, 2013 10:00 pm

Lumpy Burgertushie wrote:ok, let's start over again.

delete your common.css and overall_header.html files from the server or rename them.

start with a fresh pair of files.

overall_header.html should look exactly like this:

Code: Select all

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
    <div id="sidebar">



     <a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=POLLOP-"><img src="http://tracking.hostgator.com/img/Shared_Red_Yellow/120x600-animated.gif" border="0"></a>

	<script type="text/javascript" src="http://www.bluehost.com/src/js/pollop/CODE94/120x120/bh_120x120_03.gif"></script>
 


    </div>
    <div style="float: left; width: 79%; height: 100%;">
	<div id="page-header">
common.css should look exactly likethis:

Code: Select all

#wrap {

min-width: 750px;
width: 800px;
margin: 0 auto;
}

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }
make those changes and then refresh your template and theme in the admin panel /styles tab for prosilver.

then, refresh your browser several times.


robert

Have renamed common.css & overall_header.html , created new ones....and then pasted them with the codes you provided and then refreshed styles plus browser by f5....now look what happens

http://test.theharddisk.org/index.php?s ... c307919644
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Sat Sep 14, 2013 10:46 pm

Lumpy Burgertushie wrote:ok, let's start over again.

delete your common.css and overall_header.html files from the server or rename them.

start with a fresh pair of files.

overall_header.html should look exactly like this:

Code: Select all

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
    <div id="sidebar">



     <a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=POLLOP-"><img src="http://tracking.hostgator.com/img/Shared_Red_Yellow/120x600-animated.gif" border="0"></a>

	<script type="text/javascript" src="http://www.bluehost.com/src/js/pollop/CODE94/120x120/bh_120x120_03.gif"></script>
 


    </div>
    <div style="float: left; width: 79%; height: 100%;">
	<div id="page-header">
common.css should look exactly likethis:

Code: Select all

#wrap {

min-width: 750px;
width: 800px;
margin: 0 auto;
}

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }
make those changes and then refresh your template and theme in the admin panel /styles tab for prosilver.

then, refresh your browser several times.


robert

SUSPICIOUS........
I suspect the (overall_header.html) might the disaster here........did you mean the overall_header.html found in which of the following

* adm/style/overall_header.html

* Styles/prosilver/templates/overall_header.html
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Sat Sep 14, 2013 10:53 pm

THOUGH I TRY ON BOTH OVERRALL_HEADERS.......none seems to work
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 66568
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Lumpy Burgertushie » Sat Sep 14, 2013 11:26 pm

I didn't tell you to replace your files with just what I showed you.

I meant for you to only replace the part of the file that I showed you .

right now your common.css only has what I posted above.

and you did your overall_header.html file the same way.

I assumed you would understand that..... :?

Ok, here is step by step.

do not do anything not in the following instructions and do everything in the following instructions.

be exact, pay attention to detail...


1.delete the current common.css and overall_header.html files that you just created.

( why would you think it would be the one in the adm folder? we are not working with the admin panel files at all. If you changed that file then put it back like you found it. )

2.get a brand new copy of overall_header.html
3. find this part:

Code: Select all

	<a id="top" name="top" accesskey="t"></a>
4. on a new line after that line, add this:

Code: Select all

    <div id="sidebar">



     <a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=POLLOP-"><img src="http://tracking.hostgator.com/img/Shared_Red_Yellow/120x600-animated.gif" border="0"></a>

	<script type="text/javascript" src="http://www.bluehost.com/src/js/pollop/CODE94/120x120/bh_120x120_03.gif"></script>
 


    </div>
    <div style="float: left; width: 79%; height: 100%;">
5. get a brand new copy of common.css
6. find this part:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
}
7. replace it with this:

Code: Select all

#wrap {

min-width: 750px;
width: 800px;
margin: 0 auto;
}

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }
8. save both files.
9. upload them to where they belong in the prosilver folders.
10. refresh the template and the theme from your admin panel and refresh your browser.

If you do exactly as I said, it will work. If you change anything it will not work correctly.

I have to go now so please pay attention to these instructions carefully and you will have what you have asked for.
I don't know if that is what you want, but it is what you asked for.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
PolRas
I've Been Banned!
Posts: 415
Joined: Sat Sep 07, 2013 2:29 am

Re: How to Add a Sidebar in prosilver Tutorial

Post by PolRas » Thu Sep 19, 2013 10:54 pm

Ok, here is step by step.

do not do anything not in the following instructions and do everything in the following instructions.

be exact, pay attention to detail...


1.delete the current common.css and overall_header.html files that you just created.

( why would you think it would be the one in the adm folder? we are not working with the admin panel files at all. If you changed that file then put it back like you found it. )

2.get a brand new copy of overall_header.html
3. find this part:

Code: Select all

	<a id="top" name="top" accesskey="t"></a>
4. on a new line after that line, add this:

Code: Select all

    <div id="sidebar">



     <a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=POLLOP-"><img src="http://tracking.hostgator.com/img/Shared_Red_Yellow/120x600-animated.gif" border="0"></a>

	<script type="text/javascript" src="http://www.bluehost.com/src/js/pollop/CODE94/120x120/bh_120x120_03.gif"></script>
 


    </div>
    <div style="float: left; width: 79%; height: 100%;">
5. get a brand new copy of common.css
6. find this part:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
}
7. replace it with this:

Code: Select all

#wrap {

min-width: 750px;
width: 800px;
margin: 0 auto;
}

    #sidebar {
       float: right;
       width: 15%;
       height: 100%;
       margin: 0 auto;
	padding-left: 10px;

    }

:) You can see now what happens after the codes editing. the banner HAS CHANGED THE ACTUAL SIZE of prosilver and if you look closer THE BANNER HAS SQUEEZED THE FORUM and changed its size
[size=100]RASTAFARIAN LOVE, Lovers For All Justice, JUSTICE MUST BE DONE ![/size]

User avatar
Lumpy Burgertushie
Registered User
Posts: 66568
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: How to Add a Sidebar in prosilver Tutorial

Post by Lumpy Burgertushie » Fri Sep 20, 2013 3:27 am

change the width to whatever you want in the common.css file.

that is why it is squashed, you have chosen 800 px for the width. that is 800 total for the board with the sidebar included.

I just set it to 900 on my test and it made the time/date unwrap.

if you insist on having it fixed width and that small, these are the types of things you are going to have problems with.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

Locked

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