Phpbb3 Widescreen Support

[NYXX]

I was wondering if the new Gold Release of Phpbb3 supports widescreen.

I've managed to figure out the actual background size of my background image. However its not working on a widscreen format.

Here is the link I'm using Melankolia Style.

http://testingforum.nyxxunderground....pBB3/index.php

[battye]

How wide is your screen? It looks fine on my iMac.

[JarretCade]

I'm running at 1680x1050 and the forum is covering the right side of your background image.

It looks like you first need to center your background image and also increase the gray area that the forum will be covering. As it is right now, the gray area is too small.

From the looks of it, you need to increase the gray area at least to 900 pixels wide, possibly more.

[NYXX]

yea its a 24 inch widscreen that it looks wrong on. Am I missing a transition html code somewhere, possibly my css file?

because on my 19 inch full screen it looks great. how can i fix this in code so its similar to this www.septagonstudios.com

[JarretCade]

Like I said, you are either going to need to increase the gray area of the background image or decrease the width of your forums.

Once you do that, you need to center the background image and I would most likely set your background color to black to make it go better with the image.

Unless you prefer the blue, totally up to you

Ok, so you need to find the style.css file, which online is located at http://testingforum.nyxxunderground..../web/style.css.

Where it says

/* replace background color */
html, body {
	background-color:#579EC7;
	background-image:url(./images/body1.png);
	background-repeat: no-repeat;
	color:#5F6476;
}

Change

background-image:url(.images/body1.png);

to

background-image:url(.images/body1.png) no-repeat center top;

See how that works out and then we can go from there.

[NYXX]

Yes I'd like to set the background to black, and will increase the grey area.. How can I decrease the forum width.

[JarretCade]

Ok to make the background black you can just get rid of

background-color: #579EC7;

and change

background-image:url(./images/body1.png) no-repeat center top;

to EDITED

background: #000 url(./images/body1.png) no-repeat center top;

As far as decreasing your forum width, inside the same .css file look for

.outside {
	margin: 0 auto;
	width : 978px;
	padding: 0;
}

at the bottom of the file and try decreasing the width there to about 765px.

Though that may make your forum very small and I am not too sure on how well it will scale. You may just need to increase the gray area of the background image.

Or just copy and paste the below code into the style.css file:

/* replace background color */
html, body {
	background: #000 url(./images/body1.png) no-repeat center top;
	background-repeat: no-repeat;
	color:#5F6476;
}

.top-left, .top-right, .bottom-left, .bottom-right {
	background-image: url("./images/rounded.gif");
	height: 53px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
	font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
}
.top-left, .bottom-left {
	margin-right: 53px; /* CHANGE: replace by the width of one of your corners */
}
.top-right, .bottom-right {
	margin-left: 53px;  /* CHANGE: replace by the width of one of your corners */
	margin-top: -53px;  /* CHANGE: replace by the height of one of your corners */
}

.top-right {
	background-position: 100&#37; 0;    /* DNC: position right corner at right side, no vertical changes */
}
.bottom-left  {
	background-position: 0 -53px;    /* CHANGE: replace second number by negative height of one of your corners */
}
.bottom-right {
	background-position: 100% -53px; /* CHANGE: replace second number by negative height of one of your corners */
}
.inside {
	align: right;
	background-image: url("./images/bg.gif");            /* YCC: background-color of the inside */
	background-repeat: repeat-y;
	background-position: 100%
	color: #000000;                 /* YCC: default text-color of the inside */
	padding-left: 0px;             /* YCC: all texts at some distance of the left border */
	padding-right: 0px;
	padding-top: 1px;             /* YCC: all texts at some distance of the right border */
}
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
	margin: 0 auto;
	width : 768px;
	padding: 0;
}

and adjust the .outside width value to your liking.

Also your going to need to change a value in the http://testingforum.nyxxunderground....stylesheet.css file:

Look for:

#logo {
	color: #FFFFFF;
	padding: 50px 0pt 0pt 400pt;
	text-align: center;
	
}

and change

padding: 50px 0pt 0pt 400pt;

to

padding: 50px 0pt 0pt 350pt;

You can adjust the pt value depending on where you want the logo being displayed, but with it being displayed at 400 it overlaps the right edge of the forum and is hovering onto the background image.

[NYXX]

Awesome thanks for all the info I will report back when I have entered the new found values.

[NYXX]

Thanks everything worked great.