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

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

Актуально для версии магазина: 6.0 | 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-код Вы можете найти по адресу.

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

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

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

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

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

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

 

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

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

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

Изменение цвета ссылки  "Нашли дешевле?"
Рисунок 4.

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

a[data-find-cheaper]

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

Если необходим другой цвет, то его html-код Вы можете найти по адресу.

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

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).

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

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

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

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

Если необходим другой цвет, то его html-код Вы можете найти по адресу.

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

.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-код Вы можете найти по адресу.

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

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

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

В результате получаем
Рисунок 12.

 

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

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

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

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

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

Если необходимы другие цвета, то их html-коды Вы можете найти по адресу.

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

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

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

В результате получаем
Рисунок 15.

 

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

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

Изменение цвета бокового меню
Рисунок 16.

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

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

Если необходим другой цвет, то его html-код Вы можете найти по адресу.

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

.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;
}

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

 

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

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

Изменение цвета главного меню
Рисунок 20.

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

Если необходим другой цвет, то его html - код Вы можете найти по адресу.

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

.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-код Вы можете найти по адресу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

Изменение цвета кнопки на банере модуля "Успей купить"
Рисунок 30.

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

Если необходим другой цвет, то его html-код Вы можете найти здесь.

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

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

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

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

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

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

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

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

Другой цвет при наведении на кнопку
Рисунок 33.

Готово.

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

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

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

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

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

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

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

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

Тэги: примеры изменения css, css, стили css, изменить стили css, изменить css, вёрстка, Изменение цвета кнопки Купить, Изменение цвета ссылки Нашли дешевле, Изменение цвета ссылки Отправить сообщение, Изменение цвета ссылки Обратный звонок, Изменение цвета бокового меню, Изменение цвета главного меню, Изменение цвета всплывающего меню, Изменение цвета кнопки на банере модуля “Успей купить”