Примеры изменения 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.
Готово. Мы рассмотрели самые распространённые случаи изменений в стилях сайта.