3. Создадим свои стили CSS или LESS

Пора сделать что то полезное.

CS-Cart позволяет легко менять дизайн «на лету» с помощью визуального редактора дизайна, прямо в браузере.

Однако практически каждая модификация требует более серьёзного изменения внешнего вида, и тут очень удобно подключить собственный styles.css или styles.less с помощью модуля.

Примечание

Платформа имеет очень много файлов стилей (styles.css):

  • Базовые стили шаблонов
  • Стили различных тем
  • Стили модулей

Все стили склеиваются в один файл, кэшируются и отображаются клиенту. Это работает очень быстро.

Все базовые стили и стили модулей находятся в папке:

/design/themes/[название_темы]/css

Стили визуального редактора сохраняются в:

/design/themes/[название_темы]/styles/data

Создадим свой файл styles.css

  1. Пройдите в папку /design/themes/[название_темы]/css/addons/

  2. Создайте новую папку с названием соответствующим id вашего модуля. В нашем примере: first_addon.

  3. Пройдите в только что созданную папку:

    /design/themes/[название_темы]/css/addons/first_addon

  4. Создайте файл новый файл styles.css.

  5. Вставим тестовый стиль, для проверки работы нашего файла styles.css.

    1
    2
    3
    4
    .footer-stay-connected
    {
        background: #2A2FAF !important;
    }
    

    Данный стиль изменит фоновый цвет блока «Присоединяйся!».

    Первый модуль

    По умолчанию блок мятного цвета, сделаем синим, для примера.

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