Оформление скроллбаров (полосочка прокрутки)
Наверное, многих дизайнеров бесят серые дефолтные скроллбары, которые к тому же имеют обыкновение вклиниваться между фреймом разговора и списком посетителей. Но немногие знают про псевдоселектор ::-webkit-scrollbar, позволяющий задать стиль скроллбаров. Работает оно в Google Chrome и Сафари, но учитывая, что Хром используют 40% посетителей - оно того стоит, если не влом, конечно же)

Итак посмотрим. До того как мы начнем наши скроллы выглядят вот так: Оформление скроллбаров (полосочка прокрутки)

1) Открываем нужный дизайн. Там выбираем фрейм "Дизайн окна сообщений". Внизу находим Поьзовательские стили, их несколько, но все они равносильны, возьмём к примеру пользовательские стили 2.
2) Нажимаем на любой не занятый стиль. Там пишем селектор:
Внимание! У Вас нет прав для просмотра скрытого текста.

Назначаем ему фон #000000 (черный)
Обязательно назначаем ширину и высоту в пикселях, например 12px и 12px
3) Выбираем ещё один незанятый стиль (например, следующий по счёту). Пишем ему селектор:
Внимание! У Вас нет прав для просмотра скрытого текста.

Этот стиль будет применяться к фону полосы прокрутки.
Выбираем для него фон: #090909 (едва заметный серый, к примеру)
По желанию можно к примеру скруглить углы, в общем, смотрите сами, вы дизайнер.
4) Назначаем стиль вертикального бегунка. Для этого создаём ещё один селектор:
Внимание! У Вас нет прав для просмотра скрытого текста.

Выбираем для него фон. Я выбрал градиент, но так как август не позволяет их задавать напрямую, пишем его в поле "дополнительные параметры":
Внимание! У Вас нет прав для просмотра скрытого текста.

Ставим рамку 1px, стиль рамки solid, цвета #444444, #111111, #111111, #444444
5) Теперь то же самое делаем и для горизонтальной полосы прокрутки. Создаём селектор:
Внимание! У Вас нет прав для просмотра скрытого текста.

Рамку ставим такую же, как на прошлом шаге, в дополнительные параметры пишем:
Внимание! У Вас нет прав для просмотра скрытого текста.

Обратите внимание, что я заменил left на top, потому что изменил направление градиента. Если вы желаете сделать одинаковый стиль для горизонтальной и вертикальной полосы, достаточно один стиль "::-webkit-scrollbar-thumb", без :vertical и :horizontal. Точно также и наоборот, если хотите стилизовать ::-webkit-scrollbar-track для разных направлений по-разному - можете его разбить на :vertical и :hotizontal.
6) Теперь осталось стилизовать уголок между вертикальной и горизонтальной полосой прокрутки (если есть горизонтальная). Создаём ещё один селектор:
Внимание! У Вас нет прав для просмотра скрытого текста.

Назначаем ему фон #000000 либо такой же, как у ::-webkit-scrollbar-track (по желанию).
7) Сохраняем. Проделываем эти же 6 шагов для остальных фреймов, например для фрейма "Список посетителей".

После этого открываем чат в Хроме и глядим, какие у нас стали полосы прокрутки. Значительно красивее бездушных белых. Если в чате много дизайнов, а у вас много свободного времени - проделываем ту же процедуру и для остальных дизайнов) Также можно эксперментировать с различными стилями, и даже использовать изображения в качестве фона элементов скроллбара (заливать на хост и прописывать через доп.параметры стиля, но БЕЗ КАВЫЧЕК, август их экранирует). Картинки выкладывать не буду, кто сделает к уроку иллюстрации в виде картинок - буду благодарен.
В данном уроке не касался такой темы как стрелки по краям скроллбара, но если хотите оформить их, вот вам селекторы:

Теперь наши скроллы выглядят вот так: скачать dle 12.1




html-cсылка
BB-cсылка
Прямая ссылка
Сайт/форум/чат Направление Админ Онлайн Вход
» Anime Chat (чат) Аниме Cheza Без реги
» Desert Rose (радио) Радио с минимальными ограничениями Нервная баба
Кисточка
1k Гостевой
» Не определен Вы можете занять данное место)) Пишите нам Всего 50 р. в месяц
Обновление сервисов на 1-м месте
Выбрать другой дизайн
KING
Переключится на дизайн «KING»
MOUSE
Переключится на дизайн «MOUSE»
PROMO кодыnew
Стоимость купона перекрывается скидкой которую он предоставляет.
Радио партнер
Найм тех. админа
Для найма доступны Развратник и Darkness
VIP партнеры


Облако тегов
25.03.2018 ^_^ augus4u august4u back CID Close CSS CSS3 Da Vinchi Desert Rose Fike GRADIENT HTML IP JS RIP Stephen Hawking Stephen William Hawking TrTd АдминЛопух Анимешники Бан Баны Безопасность Бот ВКонтакте Градиент Гуру Давненько Даже Дети Достоевский Евой Есть Ждали Женя Закончили Идиот Интересно Кемерово Киллка Мистик Мистика Многие Мобильная версия Нарушу Не останься равнодушным. Обновление Окно смайлов Оформление Панин Пожар в Кемерово Приятная мелочь Просили Радио СМАЙЛЫ Секретарь Скончался физик Скрипт Слились Старая таверна Стартовые Стивен Хокинг Страница Страницы бана Страшная трагедия Таверна Трагедия Утрата ХАК Халявчик Читайте ШАБЛОН Шаблоны Этим август август4ю августТоп админа админам администраторов админов аниме антивзлом апреля базе банов более было быстренько важно вводится весьма восхищена встроили выкладывается выкладывали выкладываю гей глав года голосованием городов группа группе группы давно данная данное данной дать двух делюсь дизайн дизайна длинном добротой дождались дополнение дополнения доступ дьявола жиробас завидно знать зоофил иероглифы информация к размышлению кнопки кнопку кого контейнер координаты которой которые курсора люблю люди мало мною модуль молодой назад написан начали нашем наши разработки наши сервисы нашла небольшое небольшой ничего новости новость общее определяет остались остальных пару пидарас пидераст платные услуги по поведении позволяет показывает полезное полной полную получается получили пользование помнит поприкалываться пояснениями правом пришли простенький проходят прочее разработки разрешению разрешения расскажу рассчитать расшифровка сайт сайтам сайте сайты сделали сделан сделать себя сегодня сервисы сказать слово случайно смотря спрашивают стартовая страницу страницы такие такое такой теги тексте тоже топик топчике удобный узнать украсить ВК украшения умными услуги форумам форумы хорошо чат чата чатам чатов чаты человек шуток элементы японского
Статистика посещений
6 посетителей сейчас на сайте
Из них:
Гости66

Добро пожаловать на dvscr.ru!

Для того чтобы стать полноценным пользователем нашего сайта, вам необходимо пройти регистрацию.
Зарегистрироваться
Создайте собственную учетную запить!
Авторизоваться
Уже зарегистрированны? А ну-ка живо авторизуйтесь!

Войти на сайт


Da Vinchi
Помогалка