Reduce width and center the page -- any simple way?
Reduce width and center the page -- any simple way?
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?
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?
Re: Reduce width and center the page -- any simple way?
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...
- 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?
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.
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.
Re: Reduce width and center the page -- any simple way?
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;
}
Re: Reduce width and center the page -- any simple way?
Try, instead of:
use:
Code: Select all
align: center;
Code: Select all
text-align: center;
Re: Reduce width and center the page -- any simple way?
I tried that already -- it centers the text within the tables, but not the tables themselves...
-
- 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?
if you use the div solution:
call the id container, or just adapt it
this always works 
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;
}
Re: Reduce width and center the page -- any simple way?
can you dumb this down for me?
I added to stylesheet.css the following:
in overall_header.html i inserted 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
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;
}
Code: Select all
<div id="whatever">
what results is full-width with all the text centered in the tables.. i musta done something wrong
Re: Reduce width and center the page -- any simple way?
Uchiha Nick wrote: if you use the div solution:
call the id container, or just adapt it
this always worksCode: Select all
* { margin: 0 auto; padding: 0px; text-align: center; // or add this if it already has the *, same for body: }
![]()
Why would you want that on every element in your page?