Reduce width and center the page -- any simple way?

All style (template, theme and imageset) related questions for the new release; advice, feedback here please.
lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Reduce width and center the page -- any simple way?

Post by lodp »

Don't know if you want these kind of noob questions here, but I hope you'll bear with me..

I'd like to reduce page width to 770 and center the theme in phpBB3 beta4. How do I do that? I started going through a couple of the .html files in the /template folder, and savagely replacing instances of "100%" by "770", which had some of the desired effect, but there's still large portions of the theme at full-width. And as for the centering, I don't have any clue at all..

I initially thought the crucial file was overall_header.html, but that turned out not to be the case. Can one somehow just put the whole thing in a wrapper that is centered and 770 wide?

Ectoman
Registered User
Posts: 192
Joined: Sat Dec 15, 2001 3:53 pm
Location: Denver CO
Contact:

Re: Reduce width and center the page -- any simple way?

Post by Ectoman »

Edit the CSS.

lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Re: Reduce width and center the page -- any simple way?

Post by lodp »

Thanks, I just tried. But I would need some more specifics -- do I just have to change values (cause I tried the 100% ones again), or enter some additional code? Sorry, I'm really quite ignorant concerning these things...

User avatar
Nicholas the Italian
Registered User
Posts: 659
Joined: Mon Nov 20, 2006 11:19 pm
Location: 46°8' N, 12°13' E
Contact:

Re: Reduce width and center the page -- any simple way?

Post by Nicholas the Italian »

I'm no expert, but...

First of all, try this.
Open "styles/<yourstile>/theme/stylesheet.css".
Find body { ... /* whatever */ ...
add the rules width: 770px; align: center;
I'm almost sure it won't work, at least in IE. ;)

Plan B.

In the same CSS file add somewhere
div#whatever { width: 770px; align: center; }

Open "styles/<yourstile>/template/overall_header.html".
After <body class=...>
add <div id="whatever">

Open "styles/<yourstile>/template/overall_footer.html".
Before </body>
add </div>

And here you are (at least, I hope).

Edit: I just noticed it seems that header, central part and footer are wrapped in three div's, namely wrapheader, wrapcenter, and wrapfooter. So try adding those rules to these three elements.

lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Re: Reduce width and center the page -- any simple way?

Post by lodp »

I just noticed it seems that header, central part and footer are wrapped in three div's, namely wrapheader, wrapcenter, and wrapfooter. So try adding those rules to these three elements.


thanks for that! that did reduce the width (you other 2 suggestions also did that), but the centering didn't work out in any of the ways you suggested. the relevant portions in stylesheet.css now look as follows:

Code: Select all

#wrapheader {
	width: 770px; align: center;	
	min-height: 120px;
	height: auto !important;
	height: 120px;
	background-image: url('./images/background.gif');
	background-repeat: no-repeat;
	padding: 10px 25px 15px 25px;
}

#wrapcentre {
	width: 770px; align: center;		
	margin: 0px 25px 25px 25px;
}

#wrapfooter {
	width: 770px; align: center;	
	text-align: center;
	clear: both;
}
this returns 770px page width, but aligned to the left...

ngungo
Registered User
Posts: 13
Joined: Sun Nov 26, 2006 12:25 am

Re: Reduce width and center the page -- any simple way?

Post by ngungo »

Try, instead of:

Code: Select all

align: center;
use:

Code: Select all

text-align: center;

lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Re: Reduce width and center the page -- any simple way?

Post by lodp »

I tried that already -- it centers the text within the tables, but not the tables themselves...

Uchiha Nick
Registered User
Posts: 397
Joined: Tue Jul 20, 2004 6:21 am
Location: Rotterdam, The Netherlands
Contact:

Re: Reduce width and center the page -- any simple way?

Post by Uchiha Nick »

if you use the div solution:
call the id container, or just adapt it

Code: Select all

* {
margin: 0 auto;
padding: 0px;
text-align: center;
// or add this if it already has the *, same for body:
}
body {
margin: 0 auto;
padding: 0px;
text-align: center;
}
#container {
margin: 0 auto;
padding: 0px;
text-align: center;
}
this always works :)
Image

lodp
Registered User
Posts: 26
Joined: Thu Oct 05, 2006 8:42 pm

Re: Reduce width and center the page -- any simple way?

Post by lodp »

can you dumb this down for me?

I added to stylesheet.css the following:

Code: Select all

div#whatever 

* {
margin: 0 auto;
padding: 0px;
text-align: center;
// or add this if it already has the *, same for body:
}
body {
margin: 0 auto;
padding: 0px;
text-align: center;
}
#container {
margin: 0 auto;
padding: 0px;
text-align: center;
}
in overall_header.html i inserted

Code: Select all

<div id="whatever">
after < body class...>, and added </div> right before </body> in overall_footer.html

what results is full-width with all the text centered in the tables.. i musta done something wrong :roll:

Klors
Registered User
Posts: 95
Joined: Fri Sep 19, 2003 2:08 pm

Re: Reduce width and center the page -- any simple way?

Post by Klors »

Uchiha Nick wrote: if you use the div solution:
call the id container, or just adapt it

Code: Select all

* {
margin: 0 auto;
padding: 0px;
text-align: center;
// or add this if it already has the *, same for body:
}
this always works :)

Why would you want that on every element in your page?

Post Reply