Слушать радио LIVE MUSIC

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

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Graf-Art форум графики » Настройка чата » Скролл через стили ‡ как покрасить скролл под каждый дизайн


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

Сообщений 1 страница 22 из 22

1

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

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

скрин 1

http://se.uploads.ru/t/kwuEe.jpg

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

скрин 2

http://se.uploads.ru/t/eC7Bx.jpg

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

скрин 3

http://se.uploads.ru/t/rcB5C.jpg

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

скрин 4

http://se.uploads.ru/t/rcB5C.jpg

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

скрин 5

http://se.uploads.ru/t/gKBiM.jpg

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

скрин 6

http://se.uploads.ru/t/yJebA.jpg

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

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

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

+4

2

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

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

0

3

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

0

4

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

0

5

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

0

6

Лимонад
Света, зачем создавать велосипед, если его уже создали?) в 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

7

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

0

8

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

0

9

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

0

10

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

0

11

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

0

12

Открываем дизайн. Любой. Там выбираем  "Дизайн окна сообщений". Находим "Пользовательские стили", они все одинаковы. Ищем те, что не заняты.
http://ipic.su/img/img7/fs/1414681356.1426490803.png

0

13

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

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

http://ipic.su/img/img7/fs/Slajd1.1426491510.jpg

прокручиваем ниже и обязательно назначаем ширину и высоту в пикселях, например я взяла 4 и ширину и высоту. у вас может быть и 5-3 и 8-8 и 12-12 соответственно. все зависит от вашей фантазии
http://ipic.su/img/img7/fs/Slajd1.1426491408.jpg

0

14

Выбираем следующий незанятый стиль. Пишем ему селектор:
::-webkit-scrollbar-track
Этот селектор отвечает за фон полосы прокрутки.
для него также выбираете фон, я взяла черный, но вы можете взять и серый и желтый и красный. фантазия ваша.
http://ipic.su/img/img7/fs/Slajd1.1426491722.jpg
если пожелаете, то можете в рамке скруглить углы. для этого выберете тип рамки solid

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

0

15

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

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

и допустим мы делаем цвета #444444, #111111, #111111, #444444 (эти цвета мы вписываем в раздел "рамка" менять цифры в коде в произвольных параметрах не надо). в результате это будет так:
http://ipic.su/img/img7/fs/16.1426492580.jpg

http://ipic.su/img/img7/fs/Slajd1.1426504978.jpg

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

0

16

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

::-webkit-scrollbar-thumb:horizontal

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

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

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

0

17

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

::-webkit-scrollbar-corner
Назначаем ему фон #000000 либо такой же, как у ::-webkit-scrollbar-track (по желанию).
http://ipic.su/img/img7/fs/Slajd1.1426509407.jpg

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

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

0

18

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

0

19

получилось
http://se.uploads.ru/t/c0avV.png
вопрос.
а чтобы в личных настройках покрасить, то где устанавливать?

0

20

Лимонад
Для личных настроек: Дизайн чата - Основные стили
http://www.kolobok.us/smiles/madhouse/mail1.gif

0

21

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

0

22

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

Код:
<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 форум графики » Настройка чата » Скролл через стили ‡ как покрасить скролл под каждый дизайн