components\com_jshopping\css\default.css
Заменяю на пустой (сохранив при этом оригинал файла, но переименовав его), а все настройки стилей прописываю в css-файле шаблона сайта. Да, я не сторонник мнения, что много файлов таблиц стилей это хорошо, как по мне – то лучше всё в одном месте хранить и настраивать.
Весь дизайн можно разбить на несколько элементов:
- Страница категорий;
- Страница категории;
- Страница товара;
- Блок выборки (сортировки);
- Корзина;
- Блок авторизации;
- Блок покупки без регистрации;
Страница категорий имеет следующую структуру:
div.jshop_list_category
div.jshop list_category
div.row-fluid
Соответственно, моя задача либо задать «общие настройки», тогда я прописываю стили первых двух элементов, либо «индивидуальные» блоку, тогда меня будет интересовать блок row-fluid.
На странице категории нас ждут сразу два элемента, во-первых, это выборка (сортировщик) товаров, во-вторых это товары категории.
Сортировщик имеет следующую структуру:
form.form-horizontal
div.form_sort_count
Общие настройки прописываются к блоку формы form, а вот настройки содержимого в контейнере div.
Свойства страницы товара прописаны в блоке:
div.jshop productfull
Корзина выполнена в таблице, свойства прописаны в стилях:
table.jshop cart
Форма авторизации имеет схожую с сортировщиком структуру, поскольку имеет такое же начало:
form.form-horizontal
А вот содержимое отличается, именно свойства содержимого и стоит изменять, чтобы не было конфликта двух форм.
Покупка без регистрации устанавливается отдельно, в моём случае прописано в форме:
form.uk-form
Поскольку модуль устанавливался отдельно – стили у него прописаны в отдельном файле, который так же при необходимости (в моём случае повторюсь, всё свожу к одной таблице, чтобы не искать в разных файлах настройки элементов) сводим к 0, а нужные стили прописываем в общей таблице.