Скролл через стили ‡ как покрасить скролл под каждый дизайн

Поделиться12015-03-15 21:13:23

Автор: канабля
Зарегистрирован: 2014-01-29
Приглашений: 0
Сообщений: 17
Уважение: +4
Позитив: +4
Провел на форуме:
10 часов 43 минуты
Последний визит:
2018-05-01 15:41:33

Может кому пригодится такая красивая штучка как покраска скролла под каждый дизайн. Не всегда красиво выглядит эта белая полоска прокрутки. Тут еще одна поправочка что возможно расскажу криво так как мне ставили лишь в один дизайн и дальше я докумековала сама) возможно и криво где то, так что прошу меня простить)

Так вот, поставили вы дизайн и идем в раздел "дизайн списка посетителей" находим там пользовательские стили, открываем пустой и в селекторе прописываем название ::-webkit-scrollbar
Цвет фона у меня стоит под каждый дизайн разный. Рамка у меня стоит по 12 с черным цветом (еще раз повторюсь с цветами играйте сами) далее ищем ширину и высоту и ставим там значения, у меня стоит по 15, возможно вы захотите больше или меньше саму прокрутку кому как удобнее будет.

скрин 1

Далее открываем следующий пустой стиль и прописываем селектор ::-webkit-scrollbar-track .
Опять ставим цвет фона и рамку. Тут еще можно сделать закругление углов если хотите не просто прямую полоску.дальше ширину и высоту опять по 15.

скрин 2

И третий пустой стиль с названием селектора ::-webkit-scrollbar-thumb:vertical
тут как и в предыдущем рамка и закругление если нужно

скрин 3

тут все настроено, теперь идем в раздел "Дизайн окна сообщений" - Пользовательские стили 2
Опять выбираем пустой стиль обзываем его ::-webkit-scrollbar
настройки по скрну)

скрин 4

Следующий пустой стиль с названием ::-webkit-scrollbar-track
настройки опять в скрине

скрин 5

опять пустой слой называем ::-webkit-scrollbar-thumb:vertical

скрин 6

вот тут уже самое интересное в самом низу есть окошко произвольные параметры туда вставляем код background-image: -webkit-linear-gradient(left, #333, #222)

где #333, #222 цвета нашей прокрутки, опять таки какие вам нужны выбирите сами

и последний стиль ::-webkit-scrollbar-thumb:horizontal
все тоже самое в настройках что и в предыдущем) надеюсь понятно пользуйтесь на здоровье)

+4

Поделиться22015-03-15 21:17:08

Автор: Лимонад
Зарегистрирован: 2013-04-04
Приглашений: 1
Сообщений: 7488
Уважение: +1767
Позитив: +1450
Пол: Женский
Возраст: 34 [1990-02-15]
Провел на форуме:
2 месяца 14 дней
Баллы: -1735
Достижения:
Награды:
Последний визит:
2017-08-23 09:56:18

канабля
Молодец Диануль

Отредактировано Лимонад (2015-03-15 21:21:30)

0

Поделиться32015-03-15 21:32:46

Автор: канабля
Зарегистрирован: 2014-01-29
Приглашений: 0
Сообщений: 17
Уважение: +4
Позитив: +4
Провел на форуме:
10 часов 43 минуты
Последний визит:
2018-05-01 15:41:33

Лимонад
всегда пожалуйста)))

0

Поделиться42015-03-16 00:07:23

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Чтобы стилизовать уголок между вертикальной и горизонтальной полосой прокрутки достаточно создать селектор ::-webkit-scrollbar-corner и назначить ему фон #000000 либо как у ::-webkit-scrollbar-track. и не нужно будет так много писать в админке при создании вертикали и горизонтали

0

Поделиться52015-03-16 08:02:42

Автор: Лимонад
Зарегистрирован: 2013-04-04
Приглашений: 1
Сообщений: 7488
Уважение: +1767
Позитив: +1450
Пол: Женский
Возраст: 34 [1990-02-15]
Провел на форуме:
2 месяца 14 дней
Баллы: -1735
Достижения:
Награды:
Последний визит:
2017-08-23 09:56:18

Елена1
Лена вот и поделись опытом. Распиши подробно, с чего начать и чем закончить. А уж мы все выбирать наиболее удобный способ будем)

0

Поделиться62015-03-16 08:44:46

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Лимонад
Света, зачем создавать велосипед, если его уже создали?) в 2013 году этот вопрос очень подробно и красочно расписал на айгусте Shogal
Экспериментировать с шириной, длиной и цветом под каждый диз сможет даже новичек. От себя могу добавить, что если в списке посетителей у вас изначально не было горизонтального скролла, то ограничьтесь первыми тремя селекторами. ::-webkit-scrollbar ::-webkit-scrollbar-track ::-webkit-scrollbar-thumb:vertical и не усложняйте себе жизнь добавлением ненужного, конечно если у вас навигация 250 а графы 180х80 и иконки 60х60, то тут без горизонтального не обойтись)
вот ссылка.
http://igust4u.ru/kak-sdelat/stilizuem- … -t797.html
ну и если вдруг у кого-то будут вопросы или что-то не понятно, то спрашивайте или в личке, или в аси, я помогу чем смогу)

Отредактировано Елена1 (2015-03-16 08:47:04)

0

Поделиться72015-03-16 09:22:59

Автор: Лимонад
Зарегистрирован: 2013-04-04
Приглашений: 1
Сообщений: 7488
Уважение: +1767
Позитив: +1450
Пол: Женский
Возраст: 34 [1990-02-15]
Провел на форуме:
2 месяца 14 дней
Баллы: -1735
Достижения:
Награды:
Последний визит:
2017-08-23 09:56:18

Елена1
а зачем нам чужой форум, если мы на своем хотим тему развить)

0

Поделиться82015-03-16 09:27:15

Автор: канабля
Зарегистрирован: 2014-01-29
Приглашений: 0
Сообщений: 17
Уважение: +4
Позитив: +4
Провел на форуме:
10 часов 43 минуты
Последний визит:
2018-05-01 15:41:33

горизонтальная прокрутка еще появляеься еще если во фрейм например кидают слишком большую картинку)не совсем красиво выглядит когда один скролл покрашен а другой нет)

0

Поделиться92015-03-16 09:51:48

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

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

0

Поделиться102015-03-16 09:56:26

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Лимонад
вобще публикация любой чужой воплощенной в жизнь идеи должна содержать ссылку на создателя) то что другие пользуются мыслями Шагала это не значит, что они это придумали) авторство есть авторство
тем более айгуст не графический форум, оттого что кто-то зашел и прочел и сделал как там написано, отток посетителей не произойдет. там специфика другая.

0

Поделиться112015-03-16 10:24:12

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Лимонад
смотри я скрины сделала. это пример, цвет может меняться и ширина с высотой тоже) все сугобо индивидуально

0

Поделиться122015-03-16 10:27:28

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Открываем дизайн. Любой. Там выбираем "Дизайн окна сообщений". Находим "Пользовательские стили", они все одинаковы. Ищем те, что не заняты.

0

Поделиться132015-03-16 10:39:12

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Мне проще взять пользовательские стили 2.
итак нажимаем на выбранный стиль и там берем первый незанятый и пишем селектор

::-webkit-scrollbar
далее ставим фон, например #000000 (это черный цвет)

прокручиваем ниже и обязательно назначаем ширину и высоту в пикселях, например я взяла 4 и ширину и высоту. у вас может быть и 5-3 и 8-8 и 12-12 соответственно. все зависит от вашей фантазии

0

Поделиться142015-03-16 10:43:34

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Выбираем следующий незанятый стиль. Пишем ему селектор:
::-webkit-scrollbar-track
Этот селектор отвечает за фон полосы прокрутки.
для него также выбираете фон, я взяла черный, но вы можете взять и серый и желтый и красный. фантазия ваша.

если пожелаете, то можете в рамке скруглить углы. для этого выберете тип рамки solid

Отредактировано Елена1 (2015-03-16 11:10:54)

0

Поделиться152015-03-16 10:59:54

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

а теперь мы подошли к самому интересному, где есть развернуться вашей фантазии в цвете.
Назначаем стиль вертикального бегунка. Для этого выбираем следующий стиль в стилях и создаём ещё один селектор:
::-webkit-scrollbar-thumb:vertical
Выбираем для него фон. Я взяла один цвет. Ставим рамку 1px, стиль рамки solid. У меня получилось вот так:

[ если же вы хотите градиент, то в этом случае вам нужно спуститься ниже и в поле "произвольные параметры вписать вот это:
background-image: -webkit-linear-gradient(left, #333, #222)

и допустим мы делаем цвета #444444, #111111, #111111, #444444 (эти цвета мы вписываем в раздел "рамка" менять цифры в коде в произвольных параметрах не надо). в результате это будет так:

Отредактировано Елена1 (2015-03-16 14:23:31)

0

Поделиться162015-03-16 11:03:54

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Теперь то же самое делаем и для горизонтальной полосы прокрутки. Создаём селектор:

::-webkit-scrollbar-thumb:horizontal

Рамку ставим такую же, как на прошлом шаге, 1px, стиль рамки solid и берем нужный нам цвет.
если делаем градиент, то как и на скрине выше в дополнительные параметры пишем

background-image: -webkit-linear-gradient(top, #333, #222)
и те два цвета, которые вы выбрали в раздел рамка пишем.

скринить не стану, поскольку все тоже самое, что и на скрине выше. разница только в названии селектора

0

Поделиться172015-03-16 11:07:00

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Теперь осталось стилизовать уголок между вертикальной и горизонтальной полосой прокрутки (если есть горизонтальная). Создаём ещё один селектор:

::-webkit-scrollbar-corner
Назначаем ему фон #000000 либо такой же, как у ::-webkit-scrollbar-track (по желанию).

Сохраняем. Проделываем эти же шаги для фрейма "Список посетителей".

Отредактировано Елена1 (2015-03-16 15:37:10)

0

Поделиться182015-03-16 11:09:02

Автор: Елена
Откуда: Владивосток
Зарегистрирован: 2012-10-14
Приглашений: 4
Сообщений: 1872
Уважение: +181
Позитив: +382
Пол: Женский
Возраст: 10 [2013-06-18]
ICQ: 5294645
Skype: hellen9837
Провел на форуме:
24 дня 19 часов
Баллы: -175
Достижения:
Последний визит:
2019-02-12 13:45:58

Это оформление прокрутки для фрейма окна сообщений я показала.
У меня на оформление прокрутки во всех фреймах уходит в среднем 5-7 минут на одном дизе.

0

Поделиться192015-03-16 19:37:29

Автор: Лимонад
Зарегистрирован: 2013-04-04
Приглашений: 1
Сообщений: 7488
Уважение: +1767
Позитив: +1450
Пол: Женский
Возраст: 34 [1990-02-15]
Провел на форуме:
2 месяца 14 дней
Баллы: -1735
Достижения:
Награды:
Последний визит:
2017-08-23 09:56:18

получилось

вопрос.
а чтобы в личных настройках покрасить, то где устанавливать?

0

Поделиться202015-03-17 21:57:37

Автор: Хэйтли
☆ - 404 Not Found - ☆
Зарегистрирован: 2012-03-01
Приглашений: 0
Сообщений: 4712
Уважение: +1752
Позитив: +1767
Пол: Женский
Skype: Heitli
Провел на форуме:
7 дней 13 часов
Мои темы:
Баллы: -940
Достижения:
Последний визит:
2023-10-22 13:38:01

Лимонад
Для личных настроек: Дизайн чата - Основные стили

0

Поделиться212015-11-29 12:37:35

Автор: Antonida
Зарегистрирован: 2012-03-02
Приглашений: 0
Сообщений: 23
Уважение: +6
Позитив: +20
Провел на форуме:
1 день 10 часов
Последний визит:
2023-08-20 16:12:11

канабля
спасибо большое за такую подсказку и не трудно вовсе.мне понравилось..плюсик поставила. :cool:

0

Поделиться222016-10-22 14:25:55

Автор: mama ama kriminal
Откуда: Москва
Зарегистрирован: 2014-11-08
Приглашений: 0
Сообщений: 399
Уважение: +79
Позитив: +124
Пол: Мужской
Возраст: 38 [1985-10-11]
ICQ: 5759666
Skype: mamaamakrim
Провел на форуме:
9 дней 11 часов
Баллы: -120
Последний визит:
2020-07-03 13:21:32

Всем привет.Кому сложно и не понятно как это сделать,я поделюсь с вами кодом для скролла.Вам лишь стоит поставить в самый вверх всех шаблонов,код работает абсолютно во всех шаблонах.

Код:

<style>
::-webkit-scrollbar { background: #000000; width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #090909; }
::-webkit-scrollbar-thumb:vertical { background-image: -webkit-linear-gradient(left, #333, #111); border: 1px solid #444; border-color: #444 #111 #111 #444; }
::-webkit-scrollbar-thumb:horizontal { background-image: -webkit-linear-gradient(top, #333, #111); border: 1px solid #444; border-color: #444 #111 #111 #444; }
::-webkit-scrollbar-corner { background: #090909; }
</style>

+1

Graf-Art форум графики

Меню навигации

Пользовательские ссылки

Информация о пользователе