Loading...

Storefront Width

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

Starting from version 3 CS-Cart uses a new page layout philosophy and a new block manager in particular.

The cornerstone of the new approach is usage of the 960.gs CSS framework.
This framework is designed for fast and effective cross-browser web content makeup creating. It uses a 960 pixel wide grid divided to 12 or 16 columns. We use 960.gs in CS-Cart to make it capable to create any block structures on any page.

Although being very flexible 960.gs has one significant restriction — page content width is fixed.

It is possible to avoid this issue by using another CSS file to define the framework class rules.

Using fluid 960.gs

There is a project called fluid 960.gs, which implements the full width page content stretching.

In order to use full width page layout by fluid 960.gs you should download the grid.css file from the official project repository, rename in to 960.css and replace the original one used by CS-Cart (YOUR_SKIN_PATH/customer/css/960/960.css).

Troubleshoot

Note that this approach may cause troubles when used with multiple folded grids. The reason is that fixed width values are replaced with relative percentage-defined ones. For example, a grid_10 put inside another grid_10 will calculate its width relative to its parent width, thus being a little smaller.

In order to fix this issue, one can manually assign proper width to the child grids and assign content-alignment as full-width for the parent ones.

For instance, that is how it could work out for the standard CS-Cart header:

html .helper-container .full-width {
    width: 100%;
}
    
html .helper-container .top-links-grid {
    width: 98.0%;
}

html .helper-container .search-block-grid {
    width:54.25%;
}
    
html .helper-container .cart-content-grid {
    width:41.75%;
}

Custom Sized Fixed-width Layouts with the SprySoft Variable Grid System

The SprySoft Variable Grid System is a service created by SprySoft that allows you to create fixed width grids of different sizes.

You can use the files created with the help of this service the same way as described above for
fluid 960.gs.

Home / Docs / Appendix / Examples of Design Changes / Storefront Width