В данной статье мы рассмотрим изменение стилей сss сайта путем переопределения соответствующих стилей для классов элементов сайта через Редактор файла стилей.
Редактор доступен в панели администрирования сайта пункт меню Дизайн->Редактор файла стилей.
Данный функционал доступен на любом тарифном плане.
Для использования функционала необходимы базовые знания html и css.
Например, для того чтобы изменить цвет кнопки на сайте необходимо переопределить класс, соответствующий данной кнопке.
Осуществлять поиск нужных элементов проще всего с помощью встроенного редактора в браузерах Google Chrome, Mozilla Firefox и Internet Explorer, для его вызова нажмите F12 и щелкните слева внизу на иконке анализа элементов страницы. В нашем случае используется встроенный редактор от Google Chrome(см.рис.1):
Рис. 1. Окно встроенного редактора в Google Chrome
Далее необходимо на появившемся окне нажать на "стрелку"(лупу) и выделить тот элемент, стиль отображения которого нам нужно изменить.(см.рис.2)
Рис.2. Выделение нужного элемента
После чего смотрим по верстке, какой класс отвечает за данный элемент.(см.рис.3)
Рис.3. Определение класса элемента
Нужный нам класс подсветится в окне верстки.
Просмотреть текущие значения свойств у выбранного элемента Вы можете в окне styles справа.
В результате мы выяснили, что кнопке Купить соответствует класс .details-payment-block .btn
Непосредственно в окне стилей мы можем протестировать применение нового стиля. Например, пропишем кнопке синий фон.(см.рис.4)
Рис.4. Применение нового стиля.
Далее, копируем новые стили вместе с названием класса переходим в панель администрирования пункт меню Дизайн->Редактор файла стилей и прописываем новые стили следующим образом(см.рис.5):
.details-payment-block .btn {
background: blue;
}
Рис.5. Прописывание стилей в Редакторе файла стилей
Перед названиями классов обязательно ставить точку.
Стили для класса прописываются в фигурных скобках.
Примечание: В случае если новый стиль для элемента не применился, то пропишите так:
.details-payment-block .btn {
background: blue !important;
}
Через !important задается наивысший приоритет для прописанных стилей.
В результате получаем(см. рис.6)
Рис.6. Результат применения стилей.
Всё готово.