Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Archived

This topic is now archived and is closed to further replies.

demastermind

How to Make Store Width 100% of the Screen

Recommended Posts

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


My Installed Contributions:

1. Ultimate SEO URLs V 2-2.2d-X

2. Quantity Box on Product Info Page

3. httpbl4osc Version 1.1.0

4. QTpro for osc 2.3

5. Header Tags SEO V 3.0 (For 2.3)

6. DHTML State Selection for 2.3.1

And Good To Know:

I use a 960gs fluid style sheet.

I do have a honey pot on my website.

Store Version: 2.3

 

“Pain is temporary. Quitting lasts forever."

- Lance Armstrong

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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


My Installed Contributions:

1. Ultimate SEO URLs V 2-2.2d-X

2. Quantity Box on Product Info Page

3. httpbl4osc Version 1.1.0

4. QTpro for osc 2.3

5. Header Tags SEO V 3.0 (For 2.3)

6. DHTML State Selection for 2.3.1

And Good To Know:

I use a 960gs fluid style sheet.

I do have a honey pot on my website.

Store Version: 2.3

 

“Pain is temporary. Quitting lasts forever."

- Lance Armstrong

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


My Installed Contributions:

1. Ultimate SEO URLs V 2-2.2d-X

2. Quantity Box on Product Info Page

3. httpbl4osc Version 1.1.0

4. QTpro for osc 2.3

5. Header Tags SEO V 3.0 (For 2.3)

6. DHTML State Selection for 2.3.1

And Good To Know:

I use a 960gs fluid style sheet.

I do have a honey pot on my website.

Store Version: 2.3

 

“Pain is temporary. Quitting lasts forever."

- Lance Armstrong

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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%.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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

 

 


Os-commerce v2.3.3

Security Pro v11

Site Monitor

IP Trap

htaccess Protection

Bad Behaviour Block

Year Make Model

Document Manager

X Sell

Star Product

Modular Front Page

Modular Header Tags

Share this post


Link to post
Share on other sites

Have fixed the above

 

thanks

 

Ken

 

 


Os-commerce v2.3.3

Security Pro v11

Site Monitor

IP Trap

htaccess Protection

Bad Behaviour Block

Year Make Model

Document Manager

X Sell

Star Product

Modular Front Page

Modular Header Tags

Share this post


Link to post
Share on other sites

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??

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

×