С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Работа с CSS

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

В данной статье мы рассмотрим изменение стилей с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. Результат применения стилей.

Всё готово.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.