Как вам помочь ?

Работа с CSS

Актуально для версии магазина: 6.0 | 5.0-4.1

В данной статье мы рассмотрим изменение стилей 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):

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

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

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

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

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

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

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

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

Всё готово.

Другие статьи по теме

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: Работа с CSS, CSS,стили, стили CSS, firebug, редактор файла стилей, редактор стилей