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

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

Примеры изменения CSS

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

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

В данной статье мы рассмотрим следующие примеры работы со стилями на сайте.
Изменение цвета кнопки “Купить”
Изменение цвета ссылки “Нашли дешевле?”
Изменение цвета ссылки "Отправить сообщение"
Изменение цвета ссылки "Обратный звонок"
Изменение цвета бокового меню
Изменение цвета главного меню
Изменение цвета всплывающего меню
Изменение цвета кнопки на баннере модуля “Успей купить”

Так как рассматривать мы будем изменение цвета того или иного элемента, то в процессе работы Вам будут необходимы названия цветов и их соответствующие коды в html. Такую таблицу соответствий Вы можете найти по адресу: 

http://www.stm.dp.ua/web-design/color-html.php

 

Изменение цвета кнопки “Купить”

 

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим какой класс отвечает за стили кнопки (см.рис.1).


Рисунок 1.

В результате мы выяснили, что кнопке Купить соответствует класс .details-payment-block .btn

Например, пропишем кнопке синий фон.

Html код синего цвета - #0000FF. Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

.details-payment-block .btn {
background-color: #0000FF;
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.2)


Рисунок 2.

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


Рисунок 3.

 

Изменение цвета ссылки  “Нашли дешевле?”

 

Изменим цвет текста и цвет фона кнопки “Нашли дешевле?”

Через встроенный редактор в браузере (вызываем редактор через F12)  смотрим какой класс отвечает за стили кнопки (см.рис.4).


Рисунок 4.

Чтобы прописать новые стили кнопке “Нашли дешевле?” необходимо обратиться по тегу ссылки а, у которого есть атрибут data-find-cheaper, то есть следующим образом: 

a[data-find-cheaper]

Также пропишем кнопке синий фон - #0000FF.

Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

a[data-find-cheaper] {
background-color: #0000FF;
}

Для того чтобы ссылка выглядела кнопкой, добавим отступы для текста, изменим цвет текста на белый и скруглим края:

a[data-find-cheaper] {
background-color: #0000FF;/*фон ссылки*/
padding: 5px;/*отступы*/ 
border-radius:5px;/*скругление края*/
color:#FFFFFF;/*цвет текста*/
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.5)


Рисунок 5.

Результат на рисунке 6


Рисунок 6.

Изменение цвета маркеров Хит, Новинка, Распродажа и Скидка

Начнем с маркера Хит, через встроенный редактор в браузере (вызываем редактор через F12) определим класс данного элемента (см.рис. 7)


Рисунок 7.

В результате мы выяснили, что маркеру Хит соответствует класс .products-view-label-best

Например, пропишем маркеру желтый фон:.

Html код жёлтого цвета - #FFFF00

Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

.products-view-label-best {
background-color: #FFFF00;
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.8)


Рисунок 8.

Цвет маркера изменится не только в плитке каталога, но и внутри карточки товара. (см.рис.9)


Рисунок 9.

Аналогично, для маркера Новинка:

.products-view-label-new {
background-color: #b3be08;
}

для маркера Скидка:

.products-view-label-discount {
background-color: #cd0303;
}

для маркера Рекомендуем:

.products-view-label-recommend {
background-color: #58a9fd;
}

для маркера Распродажа:

.products-view-label-sales {
background-color: #58a9fd;
}

 

Изменение цвета ссылки "Отправить сообщение"

 

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим какой класс отвечает за стили ссылки.  (см.рис.10)


Рисунок 10.

В результате мы выяснили, для того чтобы переопределить стили ссылки “Отправить сообщение” в Редакторе файла стилей к ней необходимо обратиться следующим образом: 

a[href="feedback"] {
background-color: #0000FF;/*фон ссылки*/
padding: 5px;/*отступы*/ 
border-radius:5px;/*скругление края*/
color:#FFFFFF;/*цвет текста*/
}

Если необходимы другие цвета, то html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.11)


Рисунок 11.

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


Рисунок 12.

 

Изменение цвета ссылки "Обратный звонок"

 

Через встроенный редактор в браузере (вызываем редактор через F12) определим класс данного элемента (см.рис.13).


Рисунок 13.

Для того чтобы переопределить стили ссылки “Обратный звонок” в Редакторе файла стилей к ней необходимо обратиться следующим образом: 

a[data-callback] {
background-color: #0000FF;/*фон ссылки*/
padding: 5px;/*отступы*/
border-radius:5px;/*скругление края*/
color:#FFFFFF;/*цвет текста*/
}

Если необходимы другие цвета, то их html - коды Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.14)


Рисунок 14.

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


Рисунок 15.

 

Изменение цвета бокового меню

 

Через встроенный редактор в браузере (вызываем редактор через F12)  смотрим какой класс отвечает за стили меню категорий. (см.рис.16)


Рисунок 16.

В результате мы выяснили, что боковому меню соответствует класс .menu-dropdown-link-wrap

Изменим его фон на #6495ED

Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

.menu-dropdown-link-wrap {
background-color: #6495ED;
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.17)


Рисунок 17.

В результате см.рис.18


Рисунок 18.

Для того чтобы цвет меню менялся при наведении на него, в Редакторе файла стилей необходимо прописать цвет для следующего класса: .menu-dropdown-link-wrap:hover

Например (см.рис.19):

.menu-dropdown-link-wrap:hover {
background-color:#4169E1;
}


Рисунок 19.

 

Изменение цвета главного меню

 

Через встроенный редактор в браузере (вызываем редактор через F12)  смотрим какой класс отвечает за стили главного меню (см.рис.20).  


Рисунок 20.

В результате мы выяснили, что главному меню соответствует класс .harmonica-initialized

Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

.harmonica-initialized {
background-color: #6495ED;
border-radius:.3125rem;/*скругление углов блока*/
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.21)


Рисунок .21

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


Рисунок 22.

Для того чтобы задать другой цвет при наведении на пункт меню (см.рис.23), в Редакторе файла стилей необходимо прописать:

.menu-general-root-link:hover {
background-color:#4169E1;
}


Рисунок 23.

 

Изменение цвета всплывающего меню

 

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим какой класс отвечает за стили всплывающего меню с подкатегориями (см.рис.24).  


Рисунок 24.

В результате мы выяснили, что всплывающему меню с подкатегориями соответствует класс  .menu-dropdown-modern .menu-dropdown-sub-inner

Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

.menu-dropdown-modern .menu-dropdown-sub-inner {
background-color: #b4c1e8;
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.25)


Рисунок 25.

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


Рисунок 26.

2) Через встроенный редактор в браузере (вызываем редактор через F12) смотрим какой класс отвечает за стили всплывающего меню с подпунктами главного меню (см.рис.27)


Рисунок 27.

В результате мы выяснили, что всплывающему меню с подкатегориями соответствует класс   .menu-general-sub-row

Код для Редактора файла стилей будет выглядеть следующим образом: 

.menu-general-sub-row {
background-color: #b4c1e8;
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.28)


Рисунок 28.

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


Рисунок 29.

 

Изменение цвета кнопки на банере модуля “Успей купить”

 

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим какой класс отвечает за стили кнопки (см.рис.30).  


Рисунок 30.

Кнопке соответствует класс .btn-buy-in-time

Если необходим другой цвет, то его html - код Вы можете найти по адресу: http://www.stm.dp.ua/web-design/color-html.php

Код для изменения стилей будет выглядеть следующим образом:

.btn-buy-in-time {
background-color:#6495ED;
}

Размещаем код в панели администрирования пункт меню Дизайн->Редактор файла стилей в окне редактора и сохраняем настройки (см.рис.31)


Рисунок 31.

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


Рисунок 32.

Для того чтобы задать другой цвет при наведении на кнопку (см.рис.33), в Редакторе файла стилей пропишите следующее:

.btn-buy-in-time:hover {
background-color:#4169E1;
}


Рисунок 33.

Готово.

Самые распространённые случаи мы рассмотрели.

Если Вам необходимо переопределить стили других элементов на сайте, попробуйте обнаружить нужный класс самостоятельно с помощью инструкции Работа с CSS.

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

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

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