How to Make Store Width 100% of the Screen

[demastermind]

Hello,

How can I change the width of my store's center column to take up the full width of someones screen. I want to keep the left and right column the same width, and if possible, I could like to achieve this change by tweaking a file in the 960gs folder because I do not want to have to change every page's css individually.

I'm not sure how to do this, so it would be great if someone could show me how to do this. Thanks.

- Luc

[spoofy]

960 grid system doesn't allow this by default. You would have to use the 960 grid "fluid". There is a demo here:

 

http://www.designinfluences.com/fluid960gs/

 

 

Also, keep in mind that the fluid is only based on 12 and 16 columns. I am not sure if you can make it work with 24 columns like the one oscommerce uses.

[multimixer]

I just got a fluid grid stylesheet with 24 columns here

[demastermind]

I just got a fluid grid stylesheet with 24 columns here

 

Do you know if the gutter width of 20px and column width of 60px are the defaults the OSCommerce uses? I will use 24 columns. Would I replace the "960_24_col.css" with the new fluid grid file that generator created, or would that mess up my shop. I might seem a bit clueless with this, but I think I might be. :huh:

- Luc

[multimixer]

Do you know if the gutter width of 20px and column width of 60px are the defaults the OSCommerce uses? I will use 24 columns. Would I replace the "960_24_col.css" with the new fluid grid file that generator created, or would that mess up my shop. I might seem a bit clueless with this, but I think I might be. :huh:

- Luc

 

You have to use 24 columns.

 

The default osCommerce settings are:

column width: 30

number of columns: 24

gutter width: 10

 

What you need to do is

1) create a new stylesheet, fluid or not

2) call it by it's width, so you can dwntify t easily, eg 1032_24_col.css

3) upload it to [catalog]/ext/960gs/

4) go to file includes/template_top.php and change the link to the gs stylesheet accordingly.

 

If things look like messed up, you can always just change the link back to original

 

You can also read here how I did this

[demastermind]

You have to use 24 columns.

 

The default osCommerce settings are:

column width: 30

number of columns: 24

gutter width: 10

 

What you need to do is

1) create a new stylesheet, fluid or not

2) call it by it's width, so you can dwntify t easily, eg 1032_24_col.css

3) upload it to [catalog]/ext/960gs/

4) go to file includes/template_top.php and change the link to the gs stylesheet accordingly.

 

If things look like messed up, you can always just change the link back to original

 

You can also read here how I did this

 

Thanks, that really helps! You also have a great site with good advice.

[warrenerjm]

Hi

 

I'm searching for answers to using css to redesign my store. I have started again with v2.3.1 & this 960 grid is all new to me (had previous osc version)

 

I used fixed_width_with_css2 before at 960

 

Am I right that the v2.3.1 has this as default?

 

I'm wondering what the most used screen size is? I have noticed that the 960 on a 15" desktop screen has small side space, but on a 15.6" laptop it has huge side space.

 

I'd like to fill the space of the screen more, but not result in a left/right slider.

 

Is this grid system only for the width or can it help move the columns etc around to creat a different look?

 

I'm trying to search for where to find out answers to designing my osc store, which I'm finding more difficult than the coding side of it.

 

Thanks for your help.

 

Julie

[designer.mridul]

You have to use 24 columns.

 

The default osCommerce settings are:

column width: 30

number of columns: 24

gutter width: 10

 

What you need to do is

1) create a new stylesheet, fluid or not

2) call it by it's width, so you can dwntify t easily, eg 1032_24_col.css

3) upload it to [catalog]/ext/960gs/

4) go to file includes/template_top.php and change the link to the gs stylesheet accordingly.

 

If things look like messed up, you can always just change the link back to original

 

You can also read here how I did this

 

 

1st of all thanks to u very much it really works fantastic, but what I want is to have fixed 100% width, like table width="100%".

I don't want to have a fixed width like 1500 or 1600 or sumthing else, i exactly wanna have a width of 100% so that my store remains same in all the monitor resolution.

 

can you plz help me in making the store 100%.

[multimixer]

can you plz help me in making the store 100%.

 

What you need is a "floid" grid css file, you can create one here , there is an option to get the fluid instead of fixed.

 

Rest of process is same as described here or my blog

[designer.mridul]

What you need is a "floid" grid css file, you can create one here , there is an option to get the fluid instead of fixed.

 

Rest of process is same as described here or my blog

 

Thanks for your reply, but i am new to this grid system so can u plz tell me the difference between 960 grid and floid grid ?

 

And how can i generate the "floid" grid css file using the site grids.heroku.com, coz there i haven't seen any floid grid css file.

[multimixer]

Thanks for your reply, but i am new to this grid system so can u plz tell me the difference between 960 grid and floid grid ?

 

And how can i generate the "floid" grid css file using the site grids.heroku.com, coz there i haven't seen any floid grid css file.

Fluid means in %, what you need.

 

Click the links under where it says "960 fluid", I can see it, so I believe you too

[designer.mridul]

Fluid means in %, what you need.

 

Click the links under where it says "960 fluid", I can see it, so I believe you too

 

thanx for your help

 

i used

 

Column width = 100

 

Number of columns = 12

 

Gutter width = 20, and the content area becomes 100% but the left and right sidebar goes down and the footer in same line.

 

what to do now?

 

is there anything else to do?

[designer.mridul]

thanx for your help

 

i used

 

Column width = 100

 

Number of columns = 12

 

Gutter width = 20, and the content area becomes 100% but the left and right sidebar goes down and the footer in same line.

 

what to do now?

 

is there anything else to do?

 

sorry my fault now its working propoerly

 

Column width = 60

 

Number of columns = 20

 

Gutter width = 10..

 

thanx a lot for the help.

[multimixer]

sorry my fault now its working propoerly

 

Column width = 60

 

Number of columns = 20

 

Gutter width = 10..

 

thanx a lot for the help.

 

No, it's still not correct. You MUST use 24 columns, other settings you can do as you like

[designer.mridul]

No, it's still not correct. You MUST use 24 columns, other settings you can do as you like

 

ok now i got it..

 

many thanx.

[designer.mridul]

here i again facing a problem dear George (multimixer),

plz help me to get a 850px fixed width, using the grid.css.

[multimixer]

How about this:

[designer.mridul]

How about this:

 

ya its working, thank you again..

[designer.mridul]

I have noticed that the 960grid system when extend to 100% there remains gap on a 17" or higher (") desktop screen, how to remove the gap??

 

anyone there who can give the idea..

[kenkja]

I have tried to create a fluid grid with the link, but the resulting grid is still left indented.

 

All I did was change the columns to 24, downloaded the file fluid_grid.css and changed includes/template.top

 

AM I doing something wrong ?

 

ken

 

 

[kenkja]

Have fixed the above

 

thanks

 

Ken

 

 

[RMD27]

Fluid means in %, what you need.

 

Click the links under where it says "960 fluid", I can see it, so I believe you too

 

George, can you get the template to detect the resolution of the users screen and use the appropriate template for that size display?

 

For example could you choose the template to be 1500px wide for a 2000px wide screen

 

and 900px wide for a 1000px wide screen for example

 

Is that possible??

[multimixer]

@@RMD27

 

Ricardo, yes, that's possible, having the 960 gris given, I think the best way would be by using "adapt.js", there is a link on their website

[RMD27]

Hello George, I took a look at it. Above my abilities. :unsure:

 

I went with plan A, 960.gs has the capacity to accept 100%. Its not perfect but I think it is a close as it will get with 24 columns. Thank you for sharing your expertise.

 

Your osCommerce template software looks like it could be the way to go for 2.3. Ill take a look

[GoTTi]

i think i followed these instructions right with the fluid issue. i want mine like i use to have it @ 100% across whatever screen i viewed from...

 

here are the fluid settings:

 

.container_24 {

width: 90%;

margin-left: 4%;

margin-right: 4%;

 

when i make the 90 a 100 the store style goes far to the right off my screen where i have to scroll right. is there any way to make it a true 100% like back in the 2.2 days?