ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Темный Вид спойлера на всю ширину

Темный Вид спойлера на всю ширину

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

Установка:

Все очень просто, с начало находим от стандартного спойлера стили и убираем их. И потом ставим в самый низ эти.

Код

/* spoiler style */
  .uSpoilerButton {width: 100%; color: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); background: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); padding: 3px; text-align: left; border: 1px solid url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png');}
  .uSpoilerText {color: url('http://stalker.ucoz.ae/1/scr/ggg.png'); background: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); padding: 3px; text-align: left; border: 1px solid url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); border-top: 0px;}
  /* ----------------------- */
  /* Кнопки */

  input[type=submit], input[type=reset], input[type=button] {
  color: #505050;
  font: 9px 'Verdana';
  border: 1px solid #333;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -khtml-border-radius:2px;
  background: #1c1c1c;
  margin: 1px;
  }

  input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
  color: #598189;
  font: 9px 'Verdana';
  border: 1px solid #555;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -khtml-border-radius:2px
  background: #101010;
  cursor: pointer;
  margin: 1px;
  }

  input[type=submit]:active, input[type=reset]:active, input[type=button]:active {
  color: #4c6e75;
  font: 9px 'Verdana';
  border: 1px solid #444444;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -khtml-border-radius:2px
  background: #101010;
  cursor: pointer;
  margin: 1px;
  }

  /* Поля ввода */
  input, textarea, select, input.securityCode {
  background:#1c1c1c;
  border:1px solid #333;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  color:#767676;
  font-family:Verdana,Arial,sans-serif,Helvetica;
  font-size:10px;
  padding:2px;
  outline: none;
  }

  input:hover, textarea:hover, select:hover, input.securityCode:hover {
  border:1px dashed #555;
  color:#767676;
  font-family:Verdana,Arial,sans-serif,Helvetica;
  font-size:10px;
  padding:2px;
  outline: none;
  }

17 Декабря 2015 Просмотров: 1451 Комментариев: (6)

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

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

Kosten

Похожие материалы

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

Комментарии: 6
Порядок вывода комментариев: FeStemBer 17 Декабря 2015 22:57¹ 0 С начало подумал, что сто то подобное уже видел, но там стили другие были и гораздо меньше, про этот спойлер говорю. Kosten 17 Декабря 2015 23:16³ 0 Tventum, с начало также подумал, что тот же скрипт, но дизайн не помнил такой. И вот тот скрипт нашел и стили сравнил, и они реально другие, здесь главное убрать код стандартный. ZruBkul 17 Декабря 2015 23:02² 0 Здесь по сути всего обвод, а так много стилей, даже и не знаю. А так на темном сайте должно очень красиво смотреться. FeStemBer 18 Декабря 2015 17:13⁴ 0 Установил так попробовать, так не чего смориться под описание и работает нормально и все показывает, что закрыто или открыто. Kosten 18 Декабря 2015 17:15⁵ 0 На светлый видел какой то светло желтый, но его заливал не помню, даже проверять не стал, что то не понравился, просто его в работе видел и как он смотрится. Maryges 21 Января 2016 00:00⁶ 0 Отличный вид, стоит такой, но явно лучше смотрится, чем стандартный.