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

[BigRed01]

try search teh .css files for search box. I know there is some styling for it and placing but i cannot remember where exactly.

Code: Select all

/* Search box
--------------------------------------------- */
#search-box {
   color: #FFFFFF;
   position: absolute;
   right: 35px;
   top: 35px;
   width: 17em;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

#search-box #keywords {
   width: 95px;
   background-color: #FFF;
}

#search-box input {
   border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
   padding: 1px 5px;
}

#search-box li {
   text-align: right;
   margin-top: 4px;
}

#search-box img {
   vertical-align: middle;
   margin-right: 3px;

[bbrian017]

:lol: would you look at that... empty!

See the @import ?
Those are calling all of the other stylesheets which are used to style the forum.

Okay, to make it fixed width like this example:

OPEN: common.css
Find:

Code: Select all

#wrap {
   padding: 0 20px;
   min-width: 650px;
}

Replace, with:

Code: Select all

#wrap {
   padding: 8px;
   margin: 6px auto;
   width: 910px;
   text-align:left;
   background-color:#FFF;
   border: 4px inset #000566
}

FIND:

Code: Select all

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-color: #FFFFFF;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 12px 0;
}

Replace, with:

Code: Select all

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-color: #ACA8A1;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 12px 0;
   text-align: center;
}

HWY will this still work for RC1?

[Mobious]

Yes, it will.

Well, you would add something like... <div class="inside_wrap"> inside of wrap (or do the outside instead) in the overall_header.html
And place the closing </div> in the overall_footer.html
Then you can give them their own borders... though you’ll have to make sure and set some margin between the inside_wrap and the wrap so that you can use a background on wrap, plus the border.

Is this still the case though? I got everything working the first time when I was using the CVS version, but I'm going back through with RC1 and starting over to make sure everything is done right, and now I cant seem to get it to work.

[PhilouMinety]

Hi all !

It doesn't works for me...

I'm on phpbb3 RC1

I put this :

Code: Select all

#wrap {
   padding: 8px;
   margin: 6px auto;
   width: 600px;
   text-align:left;
   background-color:#FFF;
   border: 4px inset #000566
}

But the forum is still in the begin size.

[cliched181]

I just spent 3 hours trying to figure this out.

You only need to add 2 lines of code to change the width.

add

Code: Select all

width: 745px;

under #page-body

and

add

Code: Select all

max-width: 745px;

under #wrap


Still not sure about how to change page alignment.

[PhilouMinety]

Like this :

Code: Select all

#page-body {
   margin: 4px 0;
   clear: both;
   width: 745px;
}

?

Thanks

Still not works for me

[mr acid]

:lol: would you look at that... empty!

See the @import ?
Those are calling all of the other stylesheets which are used to style the forum.

Okay, to make it fixed width like this example:

OPEN: common.css
Find:

Code: Select all

#wrap {
   padding: 0 20px;
   min-width: 650px;
}

Replace, with:

Code: Select all

#wrap {
   padding: 8px;
   margin: 6px auto;
   width: 910px;
   text-align:left;
   background-color:#FFF;
   border: 4px inset #000566
}

FIND:

Code: Select all

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-color: #FFFFFF;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 12px 0;
}

Replace, with:

Code: Select all

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-color: #ACA8A1;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 12px 0;
   text-align: center;
}

Hi, I did this with my rc1 board and it worked fine (in opera) however in internet explorer the text is all centred and have 1cm white bleed on the far right of the forum.



can anyone help with this?

many thanks

[cliched181]

Disclaimer: This is experimental code and not an official mod.

[after some experimentation] Here is the exact changed code to get a page centered and fixed width:

Code: Select all

/* Main blocks
---------------------------------------- */
#wrap {
   padding: 0 20px;
   min-width: 800px;
max-width: 800px;
margin-left: auto;
  margin-right: auto;

}

#simple-wrap {
   padding: 6px 10px;

}

#page-body {
   margin: 4px 0;
   clear: both;
width: 800px;



}

Properties that can be edited:

- width under page body
- width under wrap
- min-width under wrap
- max-width under wrap

[PhilouMinety]

I don't understand, it doesn't works on mine...
I looked on IE and firefox... arf this will be more difficult that I think

[Mobious]

When all else fails, upload backups and start over!

There have been more than a few ocations that I grind on some problem... give up... start over, and do the same damn thing, and it works!

I just centered my RC1 forum for the second time using Highway's method and it works fine in IE. So try upload originals of anything you've changed, and give it another go.


I'm still trying to figure out my border thing tho