SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Phpbb3 Widescreen Support

    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
    ]

  2. #2
    Simulation Cricketer
    Join Date
    Sep 2004
    Location
    australia
    Posts
    470
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How wide is your screen? It looks fine on my iMac.

  3. #3
    SitePoint Zealot JarretCade's Avatar
    Join Date
    Aug 2007
    Location
    California
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ]

  5. #5
    SitePoint Zealot JarretCade's Avatar
    Join Date
    Aug 2007
    Location
    California
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    /* replace background color */
    html, body {
    	background-color:#579EC7;
    	background-image:url(./images/body1.png);
    	background-repeat: no-repeat;
    	color:#5F6476;
    }
    Change
    Code:
    background-image:url(.images/body1.png);
    to
    Code:
    background-image:url(.images/body1.png) no-repeat center top;
    See how that works out and then we can go from there.

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I'd like to set the background to black, and will increase the grey area.. How can I decrease the forum width.
    ]

  7. #7
    SitePoint Zealot JarretCade's Avatar
    Join Date
    Aug 2007
    Location
    California
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok to make the background black you can just get rid of
    Code:
    background-color: #579EC7;
    and change
    Code:
    background-image:url(./images/body1.png) no-repeat center top;
    to EDITED
    Code:
    background: #000 url(./images/body1.png) no-repeat center top;
    As far as decreasing your forum width, inside the same .css file look for
    Code:
    .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:
    Code:
    /* 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:
    Code:
    #logo {
    	color: #FFFFFF;
    	padding: 50px 0pt 0pt 400pt;
    	text-align: center;
    	
    }
    and change
    Code:
    padding: 50px 0pt 0pt 400pt;
    to
    Code:
    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.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome thanks for all the info I will report back when I have entered the new found values.
    ]

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everything worked great.
    ]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •