Why 770 px?

**pdunton** · January 1st, 2009 07:18 PM

I've been poring over the new code and feel like I'm getting a real CSS and PHP lesson!

Jamie: Is there a reason you still stick to a width of 770 px in these days of cheap larger format monitor displays?

**Jamie** · January 1st, 2009 07:55 PM

The theme you are seeing in the beta was designed to match the old theme as closely as possible, with a few minor design changes. It's not meant to be a new design, and is 770px wide because that was the width of the v2.x default theme, to fit well in 800 x 600 resolution.

That theme is going to be renamed something like "squirrelcart v2", and a new default theme is going to be included with v3. That new default theme will most likely be designed for 1024 x 768.

**ITPDiesel** · January 3rd, 2009 09:42 PM

Jamie,

I think you should consider offering a "standard" FLUID theme that is configured to fill the screen for those of us that don't like fixed width setups. I spent a BUNCH of time getting my test v3 to be full screen width and fluid, both in modifying the CSS file and the main cart .tpl file.

http://testcart.twoinamillion.net if you want to see it. It's nothing to look at...just starting to mess with graphics and colors when I get time now.

**Jamie** · January 3rd, 2009 10:49 PM

We may offer some fluid themes.

**ITPDiesel** · January 4th, 2009 11:59 AM

It would be really cool if you just offered a "base" generic theme that is fluid. I spent a lot of time figuring out how to get my site to look that way and a bunch of it involved adding and playing with tables in the main.tpl file as well as the CSS file. From a customer standpoint, it would be easier if the "base" was there and it was just a matter of changing a few CSS parameters instead of having to "reinvent" the layout.

There will always be those who are capable and that want to totally redo things...just trying to offer a suggestion to help those that don't have the time or knowledge and just want to change the color settings and logos and run with it.

**Jamie** · January 4th, 2009 12:11 PM

While we may offer fluid themes, and themes that have both fluid or fixed options, we most likely will not be changing the default theme to be fluid by default. That is a personal preference. Fluid layouts can look bad on large displays.

If you don't like fixed width layouts, and we have a fluid version available, I think simply changing your theme setting is a reasonable alternative to achieve a fluid layout.

**ITPDiesel** · January 4th, 2009 12:17 PM

I think you might have misunderstood me, I was not suggesting that the default theme be changed to fluid...just that you consider offering an additional "generic" (nothing fancy) standard fluid theme with the product so your customers can decide which they want to customize without having to reinvent the wheel.

**Jamie** · January 4th, 2009 12:25 PM

Originally Posted by ITPDiesel

I think you might have misunderstood me, I was not suggesting that the default theme be changed to fluid...just that you consider offering an additional "generic" (nothing fancy) standard fluid theme with the product so your customers can decide which they want to customize without having to reinvent the wheel.

You are right, I did misunderstand you. We will probably be offering fluid and fixed layouts for some themes.

**Jamie** · January 17th, 2009 02:58 PM

Update:
I've added support for theme variants in v3.0.0. It will support a primary and secondary variant. Stylesheets are named like this:

style_main.css.php - main stylesheet
style_variant1_blue.css.php - primary variant
style_variant2_fixed.css.php - secondary variant

For example, if a theme comes in blue and green, it will have stylesheets as follows:

style_main.css.php
style_variant1_blue.css.php
style_variant1_green.css.php

The variants will only contain the CSS necessary to slightly alter the theme's colors. With the above stylesheets inside a theme folder named "superduper", the theme choices would be:

superduper.blue
superduper.green

Selecting "superduper.blue" will result in the style_main.css.php file being included first, followed by the style_variant1_blue.css.php file:

Code:

<html>
<head>    
    <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_main.css.php" />
    <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_variant1_blue.css.php" />
</head>

Switch it to green, and you get this:

Code:

<html>
<head>    
    <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_main.css.php" />
    <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_variant1_green.css.php" />
</head>

Now, suppose we want those themes to come in a fixed and fluid layout. That is where the secondary style variant comes in. You would then have the following CSS files:
style_main.css.php
style_variant1_blue.css.php
style_variant1_green.css.php
style_variant2_fixed.css.php
style_variant2_fluid.css.php

With those in place, the theme choices would be:

superduper.blue.fixed
superduper.blue.fluid
superduper.green.fixed
superduper.green.fluid

Selecting "superduper.blue.fluid" would then give you this code:

Code:

 <html>
 <head>    
     <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_main.css.php" />
     <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_variant1_blue.css.php" />
       <link rel="stylesheet" type="text/css" href="http://www.example.com/squirrelcart/themes/superduper/style_variant2_fluid.css.php" />
  </head>

The default theme is going to come in fixed and fluid variants, along with several different color variants.

**pdunton** · February 24th, 2009 11:54 AM

Back to work on the beta after our major trade show here in Tucson.

Jamie: What is the intent for the fluid theme options?
As I shrink the browser window down to 800x600 with a fluid theme in play, the storefront just gets cut off, not shrinking to fit as I expected.
Ideally, I'd think a fluid display ought to work correctly at any display setting between 800x600 and 1280x1024 at least.
Need input!

**Jamie** · February 24th, 2009 12:08 PM

My intention for the default fluid layout was to make it fluid, and look as best as possible in the majority of browsers. Because it is a fluid layout, it already has the potential to look a bit ridiculous on large displays. I have a default resolution of 1920 x 1200 and at that resolution it looks a bit silly full screen. I'm sure it will look even worse to people with 30" displays running at 2560 x 1600.

In order to make it look decent, you'll notice that for the fluid and 1024 layouts, I've increased the size of the navigation blocks and increased the font size of everything. With that in mind, if you were to force all that to fit into an 800 pixel wide window, it's not going to look very good. As a compromise, I've given that layout a minimum width so that when you drop to 800 pixels wide you can still see the primary navigation (left) and the center content without scrolling and without everything being scrunched into a tiny space.

If you prefer to have the fluid layout fit into 800x600 without scrolling, you can just alter the min-width of the #sc_inner CSS selector in style_variant2_fluid.css.php. It is set as follows:

Code:

#sc_inner {
    margin: 0 auto;
    position: relative;
    min-width: 925px;
    width: 100%;
}

To make it fit into 800x600, you would need to change min-width to 701:

Code:

#sc_inner {
    margin: 0 auto;
    position: relative;
    min-width: 701px;
    width: 100%;
}

**pdunton** · February 24th, 2009 01:05 PM

Jamie: That change to min-width works well. Checked out OK at all resolutions available on this computer.
A customer can come in with a display res from 800x600 to any likely higher res. and get a reasonable display.
I don't know just how many 800x600 users there are out there but in this economic climate I can't afford to lose even one!

Beta 2 is looking good down here on the border.

**Jamie** · February 24th, 2009 01:17 PM

Originally Posted by pdunton

I don't know just how many 800x600 users there are out there but in this economic climate I can't afford to lose even one!

I definitely know what you mean. As for usage of 800x600, here's some info that may or may not be accurate:
http://www.w3schools.com/browsers/browsers_display.asp
http://www.thecounter.com/stats/2009/February/res.php

Beta 2 is looking good down here on the border.

Thanks!

Thread: Why 770 px?

Thread Tools

Display

Why 770 px?

Fluid Format

Fluid Theme

Thread Information

Users Browsing this Thread

Posting Permissions