8xx8

Блог

Резиновый магазин

| Comments

Начиная с версии CS-Cart 3.0 используется новая философия блоков и блок менеджера в частности.

Ключевым моментом здесь является использование CSS фреймворка 960gs (сайт проекта http://960.gs).

Данный фреймворк предназначен для быстрой, эффективной и кроссбраузерной вёрски веб-контента по модульной сетке размером 960 пикселей с разделением на 12 или 16 колонок.

В нашем случае модульная сетка нужна для того что бы можно было безпрепятственно создавать любую структуру для размещения блоков на любой странице.

К сожалению данный потход в виду своей гибкости с одной стороны имеет ограничение, ширина контента страницы получается фиксированной.

Решить эту проблему мужно используя другой CSS файл определяющий правила для классов фреймворка.

Есть такой проект http://www.designinfluences.com/fluid960gs/ в нём реализовано как раз возможность растягивания лэйаута по ширине.

Для того что бы подключить у себя на сайте, нужно заменить скачать файл https://raw.github.com/bauhouse/fluid960gs/master/css/grid.css с репозитория проекта и заменить оригинальный файл карты your_skin_path/customer/css/960/960.css на скачанный.

Но при использовани такого потхода возможна проблема из-за большой вложенности с шириной в процентах, например grid_10 внутри grid_10 будет брать процент от ширины родителя, а не фиксированную как в стандартном 960.gs изза этого вложенный грид будет чуть меньше.

Для того чтобы это исправить можно вручную добавить вложенным гридам нужную ширину, а родительскому гриду установить content-aligment full-width.

На примере стандартной шапки cs-cart это будет выглядеть так:

1
2
3
4
5
6
7
8
9
10
11
12
  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%;
  }

Тем же способом можно подключать файлы созданные с помощю сервиса Grids. Он позволяет создавать сетку различной фиксированной длинны.

Comments