Изменяем scrollbar без использование JavaScript

DataLife Engine (DLE) / Модули и Хаки

В данной теме я покажу вам как изменить этот атрибут на DLE но это будет работать и на других сайтах и CMS главное что поставить на правильном месте в css файле.

Делаем все тоже самое что указано ниже...

1 Идем в панель управление 
2 Все раздели панели
3 Шаблон. Управление шаблонами сайта
4 В левом углу есть папки на стили, находим папку CSS затем файлик style.css.
5 В нем ищем body и внизу его добавляем код.

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px 2px rgba(0,0,0,0.3); /*цвет*/
    background:none; /*фон у вас не будет фоновой цвета потому что он на none изменяем его на любой цветом*/
        opacity:.7;
}
 
body::-webkit-scrollbar-thumb {
  border-radius: 5px;    
  background: none; 
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  cursor: pointer;
}
Способы передачи данных между компонентами в React
Способы передачи данных между компонентами в React
12-03-2019, 10:07, Для новичков / Web Мастеру
Основы CSS: блочная модель
Основы CSS: блочная модель
5-03-2019, 14:31, Web Мастеру / CSS/CSS3
Тренды SEO 2019. Яндекс ИКС как повод заняться своим брендом
Тренды SEO 2019. Яндекс ИКС как повод заняться своим брендом
18-02-2019, 11:15, F.I.Q / Для новичков / F.A.Q по Сайту
Программный набор для начинающего веб-разработчика
Программный набор для начинающего веб-разработчика
14-02-2019, 11:05, Для новичков / Web Мастеру
Слайдер страница Star Wars
Слайдер страница Star Wars
21-01-2019, 11:14, HTML
Brand

Brand @Brand 30 марта 2019 19:11

Большое спасибо. Данный пост по моему я видел у вашего друга на IPSGuru.
Немного только отличается а так все круто, спасибо)

.V.I.P.

.V.I.P. @Виктор 1 апреля 2019 10:58

Какой стоит у меня на ipsguru
::-webkit-scrollbar {
    width:4px;
}
::-webkit-scrollbar-track {
    background: #3a4c5c; 
}
::-webkit-scrollbar-top {
    background: #f1f3f7;
}
::-webkit-scrollbar-button {
    background: #f1f3f7;
}
::-webkit-scrollbar-thumb {
    background:#3c94d5; 
}
::-webkit-scrollbar-thumb:hover {
    background: #fff; 
    transition: background 0.4s;
}
::-webkit-resizer {
      background: #23262a; 
}


Виктор

Виктор @Виктор 1 апреля 2019 11:40

.V.I.P.,
Ну да этот ты наверное и видел)

{login}

Твой комментарий..

vk МЫ ВКОНТАКТЕ
Loading...

Настоятельно рекомендуем ознакомиться с информацией по ссылке ниже.

Сайт мошенников
Loading...

Хочешь качественный шаблон для своего сайта? Тогда тебе обязательно нужно перейти по ссылке ниже.

Наши друзья

Ваша реклама

admin@admin
Loading...

Нашли ошибку?
Вы можете сообщить об этом администрации.
Выделив текст нажмите CTRL+Enter

Аналитика

Яндекс.Метрика