Редактор CSS

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

Рассмотрим подробнее такие пункты как:

• Редактор CSS стилей
• Определение класса
• Применение стилей

Данный функционал доступен на любом тарифном плане. Для использования функционала необходимы базовые знания html и CSS. Например, для того чтобы изменить цвет кнопки на сайте, необходимо переопределить класс, соответствующий данной кнопке.

Редактор CSS стилей

Редактор CSS доступен на любом тарифе и находится в админ панели магазина. Находится редактор в разделе "Дизайн - Параметры", пункт "CSS" (рис. 1).

Рисунок 1.

В разделе расположено Поле ввода, где вы указываете новые стили для классов и элементов UI магазина, и кнопка Сохранить. Все изменения необходимо сохранять, чтобы они успешно применились.

• Перед названиями классов обязательно ставить точку.
• Стили для класса прописываются в фигурных скобках.

Заметка

В случае если новый стиль для элемента не применился, то можно использовать параметр !important, через него задается наивысший приоритет для прописанных стилей.

Пример указания класса в редакторе:

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

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

Рисунок 2.

Теперь перейдем к тому, как определить класс элемента UI.

Определение класса

Осуществлять поиск нужных элементов проще всего с помощью встроенного редактора в браузерах Google Chrome, Mozilla Firefox и Internet Explorer, для его вызова нажмите F12 (или комбинацию Ctrl+Shift+I) и щелкните слева внизу на иконке анализа элементов страницы. В нашем случае используется встроенный редактор от Google Chrome (рис. 3):

Рисунок 3.

Далее необходимо на появившемся окне нажать на "стрелку" (лупу) и выделить тот элемент, стиль отображения которого нам нужно изменить (рис. 4): 

Рисунок 4.

После чего смотрим по верстке, какой класс отвечает за данный элемент (рис. 5):

Рисунок 5.

Нужный нам класс подсветится в окне верстки.

Просмотреть текущие значения свойств у выбранного элемента Вы можете в окне styles справа.

В результате мы выяснили, что кнопке "Добавить" соответствует класс

.details-payment-block .btn

Применение стилей

Непосредственно в окне стилей мы можем протестировать применение нового стиля. Мы можем добавлять стили к классу и проверять изменения, которые видны только нам. Например, пропишем кнопке красный фон (рис. 6): 

Рисунок 6.

После мы можем скопировать новые стили вместе с названием класса:

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

и указать их в "Поле ввода" раздела CSS, а после сохранить изменения, как это описано в разделе Редактор CSS стилей.

Заметка

Рекомендуем ознакомиться со статьей Примеры изменения CSS, в которой мы собрали наиболее частые случаи изменения элементов UI.

Всё готово.