Как изменить на веб-страницах цвет выделяемого текста и полосы прокрутки



Меняем цвет полосы прокрутки и выделяемого текста на страницах блога


Всем доброго времени суток Уважаемые блоггеры! Подчищаю свои черновики и сегодня для тех, кто любит разные красивости на страницах своих блогов, информация об изменении цвета выделяемого текста и полосы прокрутки.

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

В черновике blogger нажимаем шаблон, делаем резервную копию шаблона, изменить шаблон. Рядом с первым маркером (черной стрелочкой), есть строка <b:skin>...</b:skin>. Нажимаем на стрелочку, спускаемся вниз и выше строки ]]></b:skin> вставляем стиль CSS ниже

::selection { 
background: #ff6200
color: #fff; }
::-moz-selection { 
background: #ff6200
color: #fff
}


Можете посмотреть пример в демо блоге, выделите на странице код, цвет коричневый. Так же обратите внимание на полосу прокрутки. Или выделите код в этом блоге. Кто не знает как найти раздел CSS в шаблоне, чтобы вставить код, почитайте мой пост как быстро и красиво оформить текст  блога.

Теперь о цвете полосы прокрутки. Хочу заметить, что если на страницах блога у Вас есть текст или коды в прокрутке, цвет полосы так же изменится. К большому сожалению, код CSS может не поддерживаться браузерами ранних версий. 

Я просмотрела во всех своих установленных браузерах: Google Chrome и Yandex цвет изменен, Mozilla Firefox и Опера (12.17) ничего не изменилось. Об ИЕ ( у меня версия 8), вообще помолчу, там не только цвет текста и полосы прокрутки не изменился, там все снизу вверх. Это как имя Оля прочитать справа налево Яло, так у меня в этом браузере блоги отображаются. Расстроилась, даже хотела отложить написание этого поста, но чашка кофе вернула к деятельности. Итак продолжим, вот код CSS

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #cccccc;}
::-webkit-scrollbar-thumb {
background-color: #ca88b3;
-moz-border-radius: 7px;
border-radius: 7px;
}

Выделенное синим-ширина и высота полосы; лиловым-фон полосы; коричневым-цвет ползунка; красным-закругление углов полосы;

А это стиль CSS с изменением цвета при наведении мыши на ползунок

::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
background:#029d74;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
::-webkit-scrollbar-thumb {
background:#ca88b3;
border: thin solid gray;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background:#ff9900;
}


Выделенное зеленым-фон полосы; синим-цвет ползунка; оранжевым-цвет при наведении; Пример при желании посмотрите в тестовом блоге.

На сегодня у меня все. Пробуйте вставить коды CSS, меняйте мои цвета на свои, делитесь с друзьями и знакомыми в социальных сетях. А я говорю Вам До свидания и до новых встреч.

Может быть интересно:  виджеты для изменения цвета фона и ссылок блога; гаджет информер посещений блога читателями; как подобрать совместимость фонового цвета; эффектное оформление ссылок в блоге;


Автор статьи ✎ Olga Protasova Выпуск ✹ 8/24/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *