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

Примеры изменения 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).


Рисунок 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;
}


Рисунок 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).


Рисунок 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, вёрстка, Изменение цвета кнопки Купить, Изменение цвета ссылки Нашли дешевле, Изменение цвета ссылки Отправить сообщение, Изменение цвета ссылки Обратный звонок, Изменение цвета бокового меню, Изменение цвета главного меню, Изменение цвета всплывающего меню, Изменение цвета кнопки на банере модуля “Успей купить”