Development Discussion Board

Postby **lodp** » Sun Jan 07, 2007 5:19 pm

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?

Postby **Ectoman** » Sun Jan 07, 2007 6:11 pm

Edit the CSS.

Postby **lodp** » Sun Jan 07, 2007 8:34 pm

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

Postby **Nicholas the Italian** » Sun Jan 07, 2007 8:43 pm

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

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.

Postby **lodp** » Sun Jan 07, 2007 10:19 pm

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

Postby **ngungo** » Sun Jan 07, 2007 10:31 pm

Try, instead of:

Code: Select all: align: center;

use:

Code: Select all: text-align: center;

Postby **lodp** » Sun Jan 07, 2007 11:02 pm

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

Postby **Uchiha Nick** » Sun Jan 07, 2007 11:17 pm

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 Smile

Postby **lodp** » Sun Jan 07, 2007 11:47 pm

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 Rolling Eyes

Postby **Klors** » Mon Jan 08, 2007 1:19 am

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?

Development Discussion Board

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

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

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

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

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

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

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

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

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

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

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

Who is online

Loading