ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как преобразить стиль спойлер на сайте

Как преобразить стиль спойлер на сайте

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

Сейчас он настроен так:

Как изменить стиль спойлера ?

Приступаем к установке:

1) Для начало нужно убрать в CSS стиль, который отвечает за стандартный.

2) Потом копируем этот и можно его прописать в самом низу CSS сайта.

Код
.uSpoilerButton {background: #2C3B73;border: 1px solid #121644;color: #FFF;font-family:Verdana, Tahoma, helvetica, sans-serif;font-size:11px;vertical-align:middle;height:26px;margin:2px;padding:4px;width:100%}  
.uSpoilerButton:hover {background:#CCC;border:1px solid #888;color:#111;font-family:Verdana, Tahoma, helvetica, sans-serif;font-size:11px;vertical-align:middle;height:26px;margin:2px;padding:4px;width:100%}


На этом установка закончена, только осталось все сохранить.
05 Декабря 2016 Просмотров: 1284 Комментариев: (8)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 8
FeStemBer
FeStemBer 06 Декабря 2016 00:101
0
Так все устраивает, и сделать его можно как нужно, но подскажите, как так сделать, чтоб при наведение не была стрелка. А как на изображение появлялся клик.
Kolinkor
Kolinkor 06 Декабря 2016 00:172
0
Какая разница, стрелка или клик, возможно в стиль нужно добавить, что за клик отвечает.
VIP9514
VIP9514 06 Декабря 2016 13:454
0
установить значение: cursor: pointer;
VIP9514
VIP9514 06 Декабря 2016 13:455
+1
установить значение: cursor: pointer;
Kosten
Kosten 06 Декабря 2016 15:596
0
И что получается?
VIP9514
VIP9514 06 Декабря 2016 16:068
0
Будет выводить указательный палец при наведении на элемент. (htmlbook)
Kosten
Kosten 06 Декабря 2016 16:007
0
Все понятно, тут тема за клик идет, это как раз не помешает.
tsakonter
tsakonter 06 Декабря 2016 00:213
0
Здесь просто лучше добавить, какой стиль отвечает за какой дизайн.

Вид спойлеров можно полностью настраивать через CSS.
.uSpoilerOpened — вид блока с кнопкой и открытым спойлером.
.uSpoilerButBl — вид блока с кнопкой, с помощью него можно сделать например отступы от кнопки или обтекание справа.
.uSpoilerButton — вид самой кнопки, можете оформить ее так, как вам хочется.
.uSpoilerText — вид блока с текстом спойлера. Интерлиньяж, фон, шрифт, размер, цвет.
avatar