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

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

Статья актуальна для версии магазина: 10.0 | 8.5-8.0 | 7.0-6.0 | 5.0-4.1

Заметка

Перед прочтением данной статьи рекомендуем ознакомиться с инструкцией "Работа с 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).

Размещаем код в панели администрирования пункт меню <strong>"Мои сайты" - "Редактировать" - "Параметры", </strong>вкладка<strong>"CSS"</strong> и в окне редактора сохраняем настройки
Рисунок 5.

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

Как теперь выглядит кнопка
Рисунок 6.

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

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

Начнем с маркера Хит, через встроенный редактор в браузере (вызываем редактор через F12) определим класс данного элемента
Рисунок 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;
}

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

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

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

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

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

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

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

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

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

 

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

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

Примеры изменения CSS - 4670
Рисунок 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).

Примеры изменения CSS - 8236
Рисунок 31.

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

Примеры изменения CSS - 6266
Рисунок 32.

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

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

Примеры изменения CSS - 8287
Рисунок 33.

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

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

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

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

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

Примеры изменения CSS - 8025
Рисунок 34.

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

Примеры изменения CSS - 4982
Рисунок 35.

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

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

Примеры изменения CSS - 1692
Рисунок 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).

Примеры изменения CSS - 6312
Рисунок 37.

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

Примеры изменения CSS - 4105
Рисунок 38.

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

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

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

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

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

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

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

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

Мы используем cookies. Подробнее...