Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Width of template 2.3.1 ?


rusty1001

Recommended Posts

I want to change the width of the template in 2.3.1? There does not seem to be any documentation on this,

 

class="container_<?php echo $oscTemplate->getGridContainerWidth(); ?>">

 

Where is this set, and if not I guess I will have to a div, but it seems there is a setting for this,

 

??

 

thanks

Rusty

-------------------------------------------

Link to comment
Share on other sites

Hi Rusty,

 

found with a search tool that can search every txt (or php) file in a specified folder: this width is set in catalog/includes/classes/osc_template.php

 

But it's not easy to change the width as of the Grid system. I'm still struggling myself with that, I'm able to change the width within those 960 px grid, but wasn't able to change the whole template width (help appreciated, or even a little documentation about that).

 

Boohoo, I want the old stylesheet system back

 

Michaela

Link to comment
Share on other sites

The 960 grid system is designed to make lots of stores all the same with just another facade on each - by altering the 960_24_col.css style sheet you can have any width you want.

 

Do a new install and play - you may be told that you shouldn't do it like that - "you must preserve the grid" but weren't they saying something similar about tables once?

My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Link to comment
Share on other sites

Hey Julian,

 

thank you very much, I just found what I was looking for after you pointed me the right way.. I didn't want the fixed system with pixel, but a percentage of the screen, I used it before that way - and I now found on which buttons to manipulate to do so..

 

My shop looks better and better in version 2.3.1...

 

Michaela

Link to comment
Share on other sites

Thanks,

 

by misyake I saw this file ext/ and in there is the css files for the grid system.

 

I dont mind the changes,

 

To be told would be nice and how to, I can help write the docs, tell me what to write.

 

 

There is not a mention of the grid system anywhere?

 

I looked in the file and there is

960.css

960_24_col.css ?

 

It is complicated file,

 

i just want to make the width fluid or 100%...

 

How can I do this?

 

Thanks for the help,

 

cheers

Rusty

-------------------------------------------

Link to comment
Share on other sites

Actually it is a simple css file that has been made to look complicated because to keep the 960 grid system you are not supposed to edit it

 

That idea is ok for those that churn out hundred of e-commerce stores and just want to throw on a different facade with each one but for those of us that want our stores to be different you can do what you like with this css file.

 

Make sure you have a back-up for it and then play with it - alter the widths, the prefix, the suffix, the push and the pull figures and see what happens to your store design - it's fascinating. When it goes horribly wrong upload another 960_24_col.css file and it'll be back to normal again.

 

In a new install the 960_24_col.css file is written in one line - to make it easier to modify I've altered mine to look like a standard stylesheet.css:

 


body{
min-width:760px
}

.container_24{
margin-left:auto;
margin-right:auto;
width:760px
}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16,.grid_17,.grid_18,.grid_19,.grid_20,.grid_21,.grid_22,.grid_23,.grid_24{
display:inline;
float:left;margin-left:0px;
margin-right:5px
}

.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15,.push_16,.pull_16,.push_17,.pull_17,.push_18,.pull_18,.push_19,.pull_19,.push_20,.pull_20,.push_21,.pull_21,.push_22,.pull_22,.push_23,.pull_23{
position:relative
}

.alpha{
margin-left:0
}

.omega{
margin-right:0
}

.container_24 .grid_1{
width:30px
}

.container_24 .grid_2{
width:70px
}

.container_24 .grid_3{
width:110px
}

.container_24 .grid_4{
width:200px
}

.container_24 .grid_5{
width:190px
}

.container_24 .grid_6{
width:230px
}

.container_24 .grid_7{
width:270px
}

.container_24 .grid_8{
width:310px
}

 

 

No doubt the observant among you will notice that my store is now 760 wide ;)

My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Link to comment
Share on other sites

Hello,

 

I did the same as Julian - edited the css file to look more familiar. Furthermore I went to www.960.gs, you'll find there tutorials on how to edit those system. In addition, there's a custom css generator, I filled that boxes out (Number of columns = 24, as in the original osc, and fixed full width of 960.

I then downloaded the css file for the fluid grid - edited the percentages - et voilà.

 

Michaela

Link to comment
Share on other sites

 

In a new install the 960_24_col.css file is written in one line - to make it easier to modify I've altered mine to look like a standard stylesheet.css:

 

 

 

It is also written on one line to increase the speed of loading, as it is minified. (I have all my stylesheets on one line now since testing with Firefox pagespeed)

Link to comment
Share on other sites

It is also written on one line to increase the speed of loading, as it is minified. (I have all my stylesheets on one line now since testing with Firefox pagespeed)

 

 

 

Could argue that even when it is not in one line it is faster than using tables and faster than using an extra stylesheet to get the effect you want.

 

 

But at he end of the day once you've got the design effect you want minify again - in fact why not go one better and strip out the boxes of the grid that aren't used and then minify :devil:

My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Link to comment
Share on other sites

Could argue that even when it is not in one line it is faster than using tables and faster than using an extra stylesheet to get the effect you want.

 

 

But at he end of the day once you've got the design effect you want minify again - in fact why not go one better and strip out the boxes of the grid that aren't used and then minify :devil:

 

 

And strip out all the unused css selectors

Link to comment
Share on other sites

  • 3 weeks later...

so now I see why that css file was sooooo confusing !

 

I too am trying to edit osc 2.3.1 templates.. but this grid stuff is new to me..

 

how does it actually help ?

 

 

I do notice the divs which build the pages in osc2.3.1 use "grid24" as a class..

 

I must assume all of this may point me in the rigth direction when I wish to edit and customize the pages.. but can anyone offer me any further "how to" advice ?

 

 

I will be following this thread, thats for sure !

Link to comment
Share on other sites

In a new install the 960_24_col.css file is written in one line - to make it easier to modify I've altered mine to look like a standard stylesheet.css:

 

You can download both the minified and the unminified 960_24_col.css files from the 960gs site. Both are included in the main download. The file from the 960gs is essentially the same file that's on the OSCommerce 2.3 download.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Changing the width of OsCommerce 2.3.1.

 

There are three possible solutions.

 

Now I'll write about the first one, in which we use the 960g system, and the data of the 960_24_col.css file.

 

Open to edit the includes/template_top.php file

 

You can see this in line 53:

 

<div id="bodyWrapper" class="container_<?php echo $oscTemplate->getGridContainerWidth(); ?>">

 

replace it with the following:

 

<div id="bodyWrapper" class="container_24">

 

Save and upload it to server or localhost.

 

Open to edit the includes/header.php file.

 

Line 18 is this:

 

<div id="header" class="grid_24">

 

Replace it with this:

 

  <div id="header" class="grid_<?php echo $oscTemplate->getGridContainerWidth(); ?>">

 

Line 38 is this:

 

<div class="grid_24 ui-widget infoBoxContainer">

 

Replace it with this:

 

<div class="grid_<?php echo $oscTemplate->getGridContainerWidth(); ?> ui-widget infoBoxContainer">

 

Save and upload it to server or localhost.

 

Open to edit the includes/footer.php file.

 

Line 16 is the following

 

<div class="grid_24 footer">

 

Replace it with this:

 

<div class="grid_<?php echo $oscTemplate->getGridContainerWidth(); ?> footer">

 

Line 24:

 

<div class="grid_24" style="text-align: center; padding-bottom: 20px;">

 

Replace with this:

 

<div class="grid_<?php echo $oscTemplate->getGridContainerWidth(); ?>" style="text-align: center; padding-bottom: 20px;">

 

 

Open your webstore with your browser. You're not supposed to see any changes compared to the earlier, original version.

 

Open to edit the includes/classes/osc_templates.php file.

 

You can see this in lines 16-18:

   var $_grid_container_width = 24;
   var $_grid_content_width = 16;
   var $_grid_column_width = 4;

 

By rewriting the numbers 24, 16, and 4 in steps of 40 pixels, we can lower the width of our webstore page in the browser.

 

$_grid_container_width is the full visible width of the page, the original 960 pixels.

var $_grid_content_width is the distance between the two boxes +10 pixels.

 

$_grid_column_width is the width of the terminal boxes.

 

 

The first step should be this:

 

    var $_grid_container_width = 22;
   var $_grid_content_width = 14;
   var $_grid_column_width = 4;

 

This way, 870 pixels visible + 10 pixels invisible maring, so, our page is 880 pixels wide.

 

We have to make sure that the middle and the size of the box is twice equal to the full width.

So in the orginal 16+2x4 = 24

 

Now: 14+2x4 = 22

 

If

var $_grid_container_width = 17;

var $_grid_content_width = 9;

var $_grid_column_width = 4;

 

then 670pixels visible + 10 pixels invisible, so our page is 680 pixels wide.

 

If we couldn't find the setting suitable for us with the above option, there are 2 other ways to adjust the appropriate sizes.

 

We can increase the width of our site to e.g., 1000pixels, or to an arbitrary size also.

If someone needs them, I'll write the two other solutions, too.

 

The 670, 850 and 1000 pixels wide pages can be viewed here: http://pasztoy.hu/demo at the names of the eligible templates you can see their width, by choosing them you can see the page with the proper size.

 

Best, DiabloCorsa

Link to comment
Share on other sites

Hello DiabloCorsa,

 

I have a question if you have the time to answer :)

Actually, the question still stands even if you do not have time for it...

 

I want to modify the width of the left column only and to adjust the center column width accordingly. From what I've checked, default the width of the left column is 150px and center 630px. I would like the left column to have 180px and center 600px. How can I do that ?

 

Thank you!

Constantine

Link to comment
Share on other sites

Click here: http://pasztoy.hu/demo/index.php?language=en select the humanity template - 180-600-180px - and click on the yellow text.

 

You will see this:

 

body { min-width: 960px; }
.container_24 { margin-left: auto; margin-right: auto; width: 960px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7,
.grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, 
.grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19,
.grid_20, .grid_21, .grid_22, .grid_23,
.grid_24 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4,
.pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7,
.push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11,
.pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14, 
.pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17,
.pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20,
.pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 { position: relative; }
.container_24 .grid_4 { width: 180px; }
.container_24 .grid_16 { width: 570px; }
.container_24 .grid_24 { width: 950px; }
.container_24 .push_4 { left: 190px; }
.container_24 .pull_16 { left: -580px; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

Link to comment
Share on other sites

1. step

960_24_col.css file

 

body { min-width: 960px; }
.container_24 { margin-left: auto; margin-right: auto; width: 960px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7,
.grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, 
.grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19,
.grid_20, .grid_21, .grid_22, .grid_23,
.grid_24 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4,
.pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7,
.push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11,
.pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14, 
.pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17,
.pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20,
.pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 { position: relative; }
.container_24 .grid_4 { width: 180px; }
.container_24 .grid_16 { width: 600px; }
.container_24 .grid_24 { width: 950px; }
.container_24 .push_4 { left: 190px; }
.container_24 .pull_16 { left: -610px; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

 

2. step

Edit stylesheet.css

 

#columnLeft { width: 180px;
 padding-top: 5px;
}

#columnRight { width: 150px;
 padding-top: 5px;
}

 

3 step :thumbsup:

 

 

Click here: http://pasztoy.hu/demo/index.php?language=en select the humanity template - 180-630-150px

Link to comment
Share on other sites

I am still not grasping how to work the 960. How do I get certain content into what grids?

 

Here is what I am trying to do.

 

  • I need the header and footer on all pages to be 960.
  • The main content of the index page - 960.
  • The main content of all other pages - 780.

 

But, is the concept that I can just put the content in the "proper grids" (the center ones equalling 780?) and leave the outer empty?...

 

I disabled the left and right columns but I do not want the center to change to the wider width.

 

I am struggling.

Link to comment
Share on other sites

Update: I have watched the 960gs tutrial video and built their demo and have those basics. But when I comment the secondary 1 container (left column), which of course has the right column shifting left into the spot on the right column.

 

How do I get that secondary2(right column) to move back where it originally was without the first column present?

 

First I need to be able to do this on the demo. After I learn that, how the heck do I do it in osc?

Link to comment
Share on other sites

Look at the source of your site from your browser to see how it's done.

Notice that the left column is class="grid_4 pull_16", the center is class="grid_16 push_4" the right is class="grid_4"

Note the grid numbers add up to 24. The push numbers are pushing things into place, sort of independently of each other.

If you wish the center to be 780, change the class="grid_12 push_4" to peg it to the left column or class="grid_12 push_8" to peg to the right column. Do these changes on the individual pages you wish to be 780.

 

If you delete, or comment out the left column, to then prevent the right column from shifting left 4 grid units (it's floating left to fill the 4 grid units commented out with the left column), change the class of the right column from class="grid_4" to class="grid_4 push_4".

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Studying your comment.

 

Every page? I was hoping I could leave all the other pages and just mod the index.

 

My thinking is that in the future I will probably enable some of the right/left modules with just some width changes for them and wanted the center ready for that.

 

To clarify, I didn't disable the right/left columns, I disabled all the those column modules in admin. The center column then expanded to fill their void.

 

My original comment was stating on how I did it in 2.2 by commenting out the right/left columns.)

 

Hmm... Too bad I can't leave one module in each right/left column and have them hidden on certain pages ...

 

Let me work your comment and see where I will be ...

Link to comment
Share on other sites

I see what you are saying.

What happening is that the columns, <div id="columnLeft" class="grid_4 pull_16"> and <div id="columnRight" class="grid_4"> are collapsing because they are empty, even though the grid units are still there.

 

Try putting something in those divs. What should work, and still leave you with 'empty', but blocked off space is this:

<div class="buttonSet"></div>

 

The reason I using something odd like this class is because it is the only thing I can find in the stylesheet.css that has

clear:both

and nothing else.

 

What I have in my stylesheet and often use to 'fill' empty divs or or clear a div with a line of floating elements is this:

 

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}

and thus the html is:

 

<div class="clear"></div>

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...