3. Создадим свои стили CSS или LESS¶
Пора сделать что то полезное.
CS-Cart позволяет легко менять дизайн «на лету» с помощью визуального редактора дизайна, прямо в браузере.
Однако практически каждая модификация требует более серьёзного изменения внешнего вида, и тут очень удобно подключить собственный styles.css или styles.less с помощью модуля.
Примечание
Платформа имеет очень много файлов стилей (styles.css):
- Базовые стили шаблонов
- Стили различных тем
- Стили модулей
Все стили склеиваются в один файл, кэшируются и отображаются клиенту. Это работает очень быстро.
Все базовые стили и стили модулей находятся в папке:
/design/themes/[название_темы]/css
Стили визуального редактора сохраняются в:
/design/themes/[название_темы]/styles/data
Создадим свой файл styles.css
Пройдите в папку
/design/themes/[название_темы]/css/addons/Создайте новую папку с названием соответствующим id вашего модуля. В нашем примере: first_addon.
Пройдите в только что созданную папку:
/design/themes/[название_темы]/css/addons/first_addonСоздайте файл новый файл styles.css.
Вставим тестовый стиль, для проверки работы нашего файла styles.css.
1 2 3 4
.footer-stay-connected { background: #2A2FAF !important; }
Данный стиль изменит фоновый цвет блока «Присоединяйся!».
По умолчанию блок мятного цвета, сделаем синим, для примера.
Остался маленький шаг, сообщить платформе что нужно подключить и за кэшировать стиль.
