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

Заметка

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

В данной статье мы рассмотрим следующие примеры работы со стилями на сайте.

• Изменение цвета кнопки "Купить"
• Изменение цвета ссылки "Нашли дешевле?"
• Изменение цвета маркеров Хит, Новинка, Распродажа и Скидка
• Изменение цвета ссылки "Отправить сообщение"
• Изменение цвета ссылки "Обратный звонок"
• Изменение цвета бокового меню
• Изменение цвета главного меню
• Изменение цвета всплывающего меню
• Изменение иконки корзины
• Изменение шрифта в описание товара
• Скрыть ссылку и блок регистрации.

Так как рассматривать мы будем изменение цвета того или иного элемента, то в процессе работы вам будут необходимы названия цветов и их соответствующие коды в html. Такую таблицу соответствий вы можете найти по адресу: https://www.w3schools.com/colors/colors_picker.asp

 

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

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

Рисунок 1.

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

Например, пропишем кнопке синий фон. Html-код синего цвета - #0000FF. Если необходим другой цвет, то его html-код вы можете найти по адресу.

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

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

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 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;/*цвет текста*/
}

Размещаем код в панели администрирования пункт меню "Каналы продаж" - "Интернет-магазин" - "Параметры магазина", вкладка "Еще"- "CSS" и в окне редактора сохраняем настройки (рис. 5).

Рисунок 5.

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

Рисунок 6.

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

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

Рисунок 7.

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

Например, пропишем маркеру желтый фон: Html-код жёлтого цвета - #FFFF00. Если необходим другой цвет, то его html-код Вы можете найти по адресу.

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

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

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 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-код вы можете найти по адресу.

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 11).

Рисунок 11.

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

Рисунок 12.

 

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

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

Рисунок 13.

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

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

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

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 14).

Рисунок 14.

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

Рисунок 15.

 

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

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

Рисунок 16.

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

Изменим его фон на #6495ED. Если необходим другой цвет, то его html-код вы можете найти по адресу.

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

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

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 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;/*скругление углов блока*/
}

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 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;
}

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 25).

Рисунок 25.

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

Рисунок 26.

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

Рисунок 27.

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

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

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

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 28).

Рисунок 28.

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

Рисунок 29.

 

Изменение иконки корзины

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

Рисунок 30.

Кнопке соответствует класс .cart-mini-main-icon.

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

.cart-mini-main-icon { content:url(cart.png) !important; width:30px; height:30px; vertical-align: middle; }

width:30px; height:30px - высота Вашей иконки;
cart.png - имя файла Вашей иконки, загруженной в папку userfiles. Предварительно её нужно загрузить на сайт. Подробнее о том, как загрузить изображение на сайт, можно ознакомиться в инструкции.

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 31).

Рисунок 31.

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

Рисунок 32.

Изменение шрифта в описание товара

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

Рисунок 33.

Кнопке соответствует класс .tabs-horizontal .tabs-content. Выбрали именно такое сочетание, так как меняем шрифт не на всем сайте, а только у описания в карточке товара. Поэтому выбирается класс описания + класс родителя, то есть того кто стоит выше, в данном случае это класс блока со всеми вкладками.

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

.tabs-horizontal .tabs-content
{
font-family: PT sans-serif; }

где PT sans-serif - это наименование шрифта, который вы будете использовать, пишите сюда свой шрифт.

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 34).

Рисунок 34.

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

Рисунок 35.

Скрыть ссылку и блок "регистрации"

Бывает, что на сайте не планируется регистрация, либо регистрацией занимаются менеджеры через админ.панель, и соответственно блок регистрации и ссылку в шапке сайте нужно скрыть (рис. 36).

Рисунок 36.

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

.col-md-offset-4 .vertical-interval-xsmall, .login-block-registration, a.cs-l-3.toolbar-top-link-alt:nth-child(2)
{
display:none!important;
}
.registration-block .registration-block-text-explain-inner
{
display:none!important;
}

Размещаем код в панели администрирования пункт меню "Мои сайты" - "Редактировать" - "Параметры", вкладка"CSS" и в окне редактора сохраняем настройки (рис. 37).

Рисунок 37.

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

Рисунок 38.

Готово. Мы рассмотрели самые распространённые случаи изменений в стилях сайта.