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