Работа с CSS

В данной статье мы рассмотрим изменение стилей CSS сайта путем переопределения соответствующих стилей для классов элементов сайта через Редактор файла стилей.

Редактор доступен в панели администрирования сайта, пункт меню "Дизайн->Редактор файла стилей".

Данный функционал доступен на любом тарифном плане. Для использования функционала необходимы базовые знания 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. Применение нового стиля.

Далее, копируем новые стили вместе с названием класса:

.details-payment-block .btn {
background: blue;
}

Переходим в панель администрирования, пункт меню "Дизайн->Редактор CSS стилей" (он же Редактор файла стилей), и прописываем новые стили следующим образом (см. рис.5):

Рис.5. Прописывание стилей в Редакторе файла стилей

Перед названиями классов обязательно ставить точку.

Стили для класса прописываются в фигурных скобках.

Примечание. В случае если новый стиль для элемента не применился, то пропишите так: 

.details-payment-block .btn {
background: blue !important;
}

Через !important задается наивысший приоритет для прописанных стилей.

В результате получаем (см. рис.6):

Рис.6. Результат применения стилей.

Всё готово.