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.
BigRed01
Registered User
Posts: 14
Joined: Tue Mar 22, 2005 7:48 pm

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

Post by BigRed01 »

Rotsblok wrote: 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
Registered User
Posts: 146
Joined: Sun Mar 11, 2007 6:12 pm
Contact:

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

Post by bbrian017 »

Highway of Life wrote::lol: would you look at that... empty! :P

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:
Image
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
Registered User
Posts: 16
Joined: Fri Apr 27, 2007 8:44 pm

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

Post by Mobious »

Yes, it will.
Highway of Life wrote: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.
Image

PhilouMinety
Registered User
Posts: 6
Joined: Tue May 22, 2007 9:20 am

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

Post by 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
Registered User
Posts: 2
Joined: Sun May 20, 2007 4:00 am

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

Post by 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
Registered User
Posts: 6
Joined: Tue May 22, 2007 9:20 am

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

Post by PhilouMinety »

Like this :

Code: Select all

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

Thanks

Still not works for me :(

mr acid
Registered User
Posts: 1
Joined: Tue May 22, 2007 12:16 pm

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

Post by mr acid »

Highway of Life wrote::lol: would you look at that... empty! :P

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

Image

can anyone help with this?

many thanks

cliched181
Registered User
Posts: 2
Joined: Sun May 20, 2007 4:00 am

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

Post by 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
Registered User
Posts: 6
Joined: Tue May 22, 2007 9:20 am

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

Post by 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 :D

Mobious
Registered User
Posts: 16
Joined: Fri Apr 27, 2007 8:44 pm

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

Post by 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 :x
Image

Post Reply