Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Setting your page resolutions to fit all sizes?!?!
Sean Clarke (Guild Admin) 11/22/2008 1:59 AM EST : Setting your page resolutions to fit all sizes?!?!

Sean Clarke
Posts: 506
Zomgawsh Poster

Can someone help me out as per my topic where my page looks correct for everyone on all different resolutions

Is there a spot to set this in the Admin panel?!

I have people complaining they have to scroll to the right to see all the button tabs for the site and the banner is also to long on some etc.

Is there an option to make it snap to a certain spot for all?!?!

I have not used guildportal for all tha tlong and having a hard time finding where this may be ?!

Thanks in advance


 
TopBottom

Mottie (MVP) 11/29/2008 3:00 AM EST : RE: Setting your page resolutions to fit all sizes?!?!
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Sean Clarke!

Well first off your banner image is very wide for most monitors. It's what's pushing the content off to the right. Next is your tab images, when scrunched all together you are still limited to a screen size of around 1200 pixels.

I think most people run at resolutions around 1024x768 or 1440x900 (widescreen). I could be wrong, but I'm sure that mobile devices use smaller resolutions that I still need to learn about.

So it might be best to resize your banner and tab images... then look at the template below for screen resizing.



How to Adjust Your Page For Different Screen Resolutions

Images
I started out with a standard background image and resized it to fit the following screen widths: 800, 1024, 1280 and 1600. Then uploaded them to photobucket.
CSS
Measure the inside width of each background - I recommend using MeasureIt (Firefox only addon). Now make a separate CSS file for each resolution and use the measured inside width as the "PageWrapper" width... the css only needs the size of the wrapper and left & right content zones... Make sure the width is followed by an "!important".

I left these as separate CSS files in case you want to use different box borders for smaller sizes. Here is what each file looks like:

Upload these CSS files to your site through the file manager.

*Note: "max-width" in the CSS does not work with IE6, so read the comments below as to the additional variables required to make it work.
blue-800.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top center;}
.PageWrapper {width:555px !important;}
.LeftContentZone {width:175px !important;}
.RightContentZone {width:175px !important;}
.CenterContentZone {max-width:180px; width:auto !important; width:180px;}
blue-1024.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1024.jpg) top center;}
.PageWrapper {width:860px !important;}
.LeftContentZone {width:200px !important;}
.RightContentZone {width:200px !important;}
.CenterContentZone {max-width:440px; width:auto !important; width:440px;}
blue-1280.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1280.jpg) top center;}
.PageWrapper {width:975px !important;}
.LeftContentZone {width:225px !important;}
.RightContentZone {width:225px !important;}
.CenterContentZone {max-width:500px; width:auto !important; width:500px;}
blue-1600.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1600.jpg) top center;}
.PageWrapper {width:1360px !important;}
.LeftContentZone {width:250px !important;}
.RightContentZone {width:250px !important;}
.CenterContentZone {max-width:825px; width:auto !important; width:825px;}
The Code

Add this script to your banner area or footer
<script type="text/javascript">
$(document).ready(function(){
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 if (!$('#screencss').length) $('body').append('<div id="screencss"></div>');
 var pageWidth = $(window).width();
 var sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-800.css";
 if (pageWidth > 900) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1024.css";
 if (pageWidth > 1010) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1280.css";
 if (pageWidth > 1420) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1600.css";
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}
</script>
  • If you are considering adding css for smaller screens, like an iphone, then you can make more files... in the example below I started with the sizeSelected variable at "blue-320.css" and the first (pageWidth > 510) line, like this:

     var sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-320.css";
     if (pageWidth > 510) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-640.css";
     if (pageWidth > 580) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-800.css";
     if (pageWidth > 900) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1024.css";
     if (pageWidth > 1010) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1280.css";
     if (pageWidth > 1420) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1600.css";

  • Adjust the file location to where you uploaded the separate CSS files
  • Adjust the pageWidth size (in red) to your liking. There is an additional amount added so the outside borders in the background are visible. Once the width drops below that, the next size is chosen.
  • Since IE6 doesn't like the max-width CSS variable, there is a work-around to get it to work, but it requires you to enter the width twice.
    .CenterContentZone {max-width:825px; width:auto !important; width:825px;}
    In the example above, max-width is set to 825px and width at the end is set to that as well. Also, these three variables must stay in their present order.
Edit (3/12/2009): Added the extra CSS required to make the max-width variable work with IE.
Edit (9/25/2009): Added comment about using MeasureIt addon for Firefox
Edit (12/21/2009): Updated code to automatically adjust while resizing the browser window.
TopBottom

Sean Clarke (Guild Admin) 11/30/2008 1:28 AM EST : RE: Setting your page resolutions to fit all sizes?!?!

Sean Clarke
Posts: 506
Zomgawsh Poster

Mottie said:
Hi Sean Clarke!

Well first off your banner image is very wide for most monitors. It's what's pushing the content off to the right. Next is your tab images, when scrunched all together you are still limited to a screen size of around 1200 pixels.

I think most people run at resolutions around 1024x768 or 1440x900 (widescreen). I could be wrong, but I'm sure that mobile devices use smaller resolutions that I still need to learn about.

So it might be best to resize your banner and tab images... then look at the template below for screen resizing.



How to Adjust Your Page For Different Screen Resolutions

Images
I started out with a standard background image and resized it to fit the following screen widths: 800, 1024, 1280 and 1600. Then uploaded them to photobucket.
CSS
Measure the inside width of each background. Now make a separate CSS file for each resolution and use the measured inside width as the "PageWrapper" width... the css only needs the size of the wrapper and left & right content zones... Make sure the width is followed by an "!important".

I left these as separate CSS files in case you want to use different box borders for smaller sizes. Here is what each file looks like:

Upload these CSS files to your site or a hosting site like ripway.com.

*Note: "max-width" in the CSS does not work with IE.
blue-800.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top center;}
.PageWrapper {width:555px !important;}
.LeftContentZone {width:175px !important;}
.RightContentZone {width:175px !important;}
.CenterContentZone {max-width:180px;}
blue-1024.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1024.jpg) top center;}
.PageWrapper {width:860px !important;}
.LeftContentZone {width:200px !important;}
.RightContentZone {width:200px !important;}
.CenterContentZone {max-width:440px;}
blue-1280.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1280.jpg) top center;}
.PageWrapper {width:975px !important;}
.LeftContentZone {width:225px !important;}
.RightContentZone {width:225px !important;}
.CenterContentZone {max-width:500px;}
blue-1600.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1600.jpg) top center;}
.PageWrapper {width:1360px !important;}
.LeftContentZone {width:250px !important;}
.RightContentZone {width:250px !important;}
.CenterContentZone {max-width:825px;}
The Code

Add this script to your banner area or footer
<div id="screencss"></div>
<script type="text/javascript">
$(document).ready(function(){
 var pageWidth = (document.all) ? document.body.clientWidth : window.innerWidth;
 var sizeSelected = "http://h1.ripway.com/Mottie/test/blue-800.css";
 if (pageWidth > 900) sizeSelected = "http://h1.ripway.com/Mottie/test/blue-1024.css";
 if (pageWidth > 1010) sizeSelected = "http://h1.ripway.com/Mottie/test/blue-1280.css";
 if (pageWidth > 1420) sizeSelected = "http://h1.ripway.com/Mottie/test/blue-1600.css";
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
})
</script>
  • Adjust the file location to where you uploaded the separate CSS files
  • Adjust the pageWidth size (in red) to your liking. There is an additional amount added so the outside borders in the background are visible. Once the width drops below that, the next size is chosen.


Thanks a ton I will look into all of this info you posted

Much appreciated

Sean
 
TopBottom

haruosan (New Admin) 7/23/2009 3:55 PM EST : RE: Setting your page resolutions to fit all sizes?!?!

haruosan
Posts: 5
Getting Started!

Hi.

I am trying to implement this solution here -> http://www.guildportal.com/Guild.aspx?GuildID=314588&TabID=2637476. It worked out fine for width, but the background doesn't go all the way down, filling the height. For now I have only updated the 1600 image file because it's the one that loads on my resolution (1440x900).

Any help will be apreciated.
TopBottom

Eph (MVP) 7/23/2009 5:13 PM EST : RE: Setting your page resolutions to fit all sizes?!?!
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

The problem is, is that the image is only so long when you have it set to tiled, which i assume you do. The page is longer than the background image so when it hits the bottom of the image, the image starts over again. Try adding this to the css code mottie gave you. no-repeat fixed
Example below.

hope that helps


blue-800.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top no-repeat fixed center;}
.PageWrapper {width:555px !important;}
.LeftContentZone {width:175px !important;}
.RightContentZone {width:175px !important;}
.CenterContentZone {max-width:180px; width:auto !important; width:180px;}

TopBottom

haruosan (New Admin) 7/23/2009 5:25 PM EST : RE: Setting your page resolutions to fit all sizes?!?!

haruosan
Posts: 5
Getting Started!

Thanks for the reply Eph.

I tried your code but it made the background disapear... any idea why or any other suggestions?
TopBottom

Eph (MVP) 7/23/2009 6:16 PM EST : RE: Setting your page resolutions to fit all sizes?!?!
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Hmm, well, figured that would fix it, no idea why it would make the background dissapear. Guess this is a case for Mottie lol.
TopBottom

Mottie (MVP) 7/24/2009 1:46 AM EST : RE: Setting your page resolutions to fit all sizes?!?!
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Haruosan!

I took a look at your site and files (thanks for providing the link) and the problem is in your CSS. When you add the extra parameters for the background CSS, they need to be grouped appropriately.

This won't work because top and center are separated:
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top no-repeat fixed center;}
This will work (top and center are together)
body {background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg)top center no-repeat fixed ;}
When you are using words to indicate position, it doesn't matter what order you put them in as long as they are together. But if you are using percentages and/or exact numbers, the order is x-position y-position.
body {background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) 50% 20px center no-repeat fixed ;}

* this will position the background image 20 pixels from the top and centered left-to-right (50%)
Also, IE will ignore the background portion of the CSS if there isn't a space after the parenthesis. I just had this problem with someone else... for some reason the forum editor or the posting portion removes spaces. So this would make IE think it was reading gibberish and ignore it, but other browsers were able to understand it. In the example below, IE will ignore this bit of CSS completely (note the missing space between the right parenthesis and the word top):
body {background:url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg)top center no-repeat fixed ;}
TopBottom

haruosan (New Admin) 7/24/2009 5:30 AM EST : RE: Setting your page resolutions to fit all sizes?!?!

haruosan
Posts: 5
Getting Started!

Thanks Mottie. It is working fine now. You da man! =]
TopBottom

unknowntribe (New Admin) 10/15/2009 10:10 PM EST : RE: Setting your page resolutions to fit all sizes?!?!

unknowntribe
Posts: 8
Getting Started!

*cries *

Why that does not work anymore ?

That worked like 2 hours ago... and now... nothing... I guess I did something wrong... but what...
Anything changed on Guildportal recently ?


Is there some issues linked with  the required element $block[boilerplate]?   I guess it's my main question :

I read that $block[boilerplate] is like a marker, but if it's required, where am I supposed to put it ?  :/


Sorry if the answer has already been given, because english is not my native language, and may be because I'm tired.. I did not find any clear answer 


P.S : Is there a specific way to use the search function on this forum ? For instance, when I did a search on "banner", it did not find anything... I'm that stupid ?
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%