Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Basic steps to visualise Grid960 system in oscommerce


tgely

Recommended Posts

Hi everybody,

 

I didnt find this tip how can we "debug" in grid system. Some easy step and we see everything.

 

1. upload new file into catalog/images/theme/

 

 

 

2. edit stylesheet.css

 

change:

#bodyWrapper {
}

 

to:

#bodyWrapper {
 background: url("images/theme/24_col.gif") repeat-y scroll 0 0 transparent;
}

 

And you can allign something.

 

If you wonder 16_col.gif you have to change the filename in stylsheet.css from 24_col.gif to 16_col.gif and need edit catalog/includes/classes/template.php where you find grid system column values.

 

Finaly have to edit catalog/includes/template_top.php

 

Upload the new files:

ext/960gs/960_16_col.css

ext/960gs/rtl_960_16_col.css

(source: http://960.gs)

 

Change:

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />

 

To:

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_16_col.css" />

 

and fix footer.php and header.php (https://github.com/tgely/oscommerce2/commit/91c3be16a15a0ae07af2a3719d12258110eca28b)

 

An example of 16_grid engineering:

 

 

I hope it helps,

Cheers

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

Thanks everybody. The above solution works on every browsers not only Crome or Firefox. ;)

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

@@kymation

 

Thanks. Would you like to make a developer header tags? :rolleyes:

Javascripts wont work when noscript use but css solution will do it.

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

The bookmarklet won't work without Javascript, but osCommerce 2.3.x requires Javascript, so this shouldn't be an issue. CSS would be a good solution on sites that don't use Javascript, such as an old version of osC with the 960 Grid bolted on. I was only thinking about current versions of osCommerce.

 

Did you want a developer tag to add your CSS? That would be easy to do, and you could turn it on and off in the Admin. Let me take a look at that.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

@@kymation

 

https://github.com/tgely/oscommerce2/commit/91c3be16a15a0ae07af2a3719d12258110eca28b

https://github.com/tgely/oscommerce2/commit/46c3a7e514afa00d35cb48ce71d0ac5ebed9bac3

 

The main problem is that you cant change 960gs 12-16-24 grid system by easy way without core editions. Javascript solution can display only the current cols.

My github CSS idea enable an oscTemplate class enhance which visualize cols.

 

Need to change these constans by a standard for settings.

 

   var $_grid_container_width = x;
   var $_grid_content_width = y;
   var $_grid_column_width = z;

 

I think about this function for grid select system:

<?php
 echo '<pre>';
 print_r(tep_get_grid_width());
 echo '</pre>';

 function tep_get_grid_width($containers = array(12, 16, 24)) {
   $n = 1;
   foreach ($containers as $container_width) {
  for ( $i = 1; $i < $container_width/2; $i++ ) {
    $grid_array[] = array( 'id' => $n,
						    'text' => $container_width . '-' . ($container_width - 2 * $i) . '-' . $i);
    $n++;
  }
   }
   return $grid_array;
 }
?>

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

Good ideas there. Why not also make a module to select the left, right, and middle column widths? You could also select different grid layouts, different total width, or even the fluid grid.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Good ideas there. Why not also make a module to select the left, right, and middle column widths? You could also select different grid layouts, different total width, or even the fluid grid.

 

Regards

Jim

 

I have done it :sweating: and as soon as possible I will put on github. ;)

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

  • 2 weeks later...

Hi all!

 

 

Forget my previous github commits.

 

Problems solved: http://www.oscommerce.com/forums/tracker/issue-524-template-configuration-conflict-width-loading-sort-order/

 

@@kymation

The new feature is available for 960gs template system. Look at my repo.

 

Thanks all of your advices!

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...