Подгонка ползунка прокрутки под дизайн IPS 4.7.20

[Ryancoolround]

Одной из важных задач при кастомизации внешнего вида сайта является настройка всех элементов, включая ползунок прокрутки (или скроллбар). В некоторых случаях требуется изменить стандартный вид прокрутки, чтобы он гармонировал с общей темой оформления сайта, в данном случае с темой IPS 4.7.20. В этой статье рассмотрим, как это можно сделать с помощью небольшого фрагмента CSS-кода.

Описание кода

Предлагаемый код позволяет изменить внешний вид ползунка прокрутки, придавая ему вид, подходящий под стиль темы IPS 4.7.20. В частности, меняются следующие элементы:

1. Ширина и высота полосы прокрутки — позволяет настроить размер ползунка.
2. Фон области прокрутки — изменяется фон трека (области, по которой перемещается ползунок).
3. Цвет и стиль самого ползунка — настройка внешнего вида "ползунка", который будет перемещаться по треку.

Код для настройки ползунка прокрутки

/* Ползунок прокрутки */
::-webkit-scrollbar { 
    width: 8px; 
    height: auto; 
}
::-webkit-scrollbar-track {
    background: #212429;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb {
    background: #9bbb66;
    border-radius: 0px;
}
/* Конец ползунка прокрутки */

Разбор кода:

1. ::-webkit-scrollbar — этот псевдоэлемент отвечает за сам ползунок прокрутки. В коде указано, что ширина полосы прокрутки будет 8px, а высота зависит от содержимого (автоматически). Это значение можно корректировать в зависимости от потребностей.
2. ::-webkit-scrollbar-track — этот псевдоэлемент задает внешний вид области прокрутки (трека), по которой перемещается ползунок. В данном случае фон области задается темно-серым цветом (#212429), что гармонирует с общим дизайном темы IPS. Также указано отсутствие радиуса скругления углов.
3. ::-webkit-scrollbar-thumb — этот элемент отвечает непосредственно за сам ползунок (или "пальчик"). В коде установлен зелёный цвет фона (#9bbb66), что соответствует стилю, используемому в оригинальной теме IPS. Радиус скругления также равен 0px, что делает углы прямыми.

Как внедрить код в вашу тему?

1. Для того чтобы применить этот стиль к ползунку прокрутки, выполните следующие шаги:
2. Перейдите в Админцентр вашего сайта на платформе IPS.
3. В меню выберите пункт Кастомизация.
4. В нужной теме нажмите кнопку Редактировать HTML и CSS.
5. В открывшемся окне выберите вкладку CSS.
6. В поле Custom.CSS вставьте приведённый выше код.
7. После вставки кода нажмите Сохранить.

После сохранения изменений ползунок прокрутки будет отображаться в соответствии с новым стилем, гармонично вписываясь в дизайн вашей темы.

Заключение

Подгонка ползунка прокрутки под дизайн вашей темы может существенно улучшить внешний вид сайта и сделать его более современным и удобным для пользователей. В данной статье был представлен простой и эффективный способ изменить стандартный вид ползунка, чтобы он соответствовал оригинальной теме IPS. Внесенные изменения могут улучшить восприятие интерфейса и повысить удобство использования сайта.