ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивый вид опроса Garmony для uCoz

Красивый вид опроса Garmony для uCoz

Красивый вид опроса Garmony для uCoz
Когда вы ставите на свой сайт вид опроса, здесь все зависит, какой темы будет он и безусловно дизайн его. Но тему вы сами подберете а вот стили можно поставить такие. Они во первых яркие и сам скрипт очень стильно будет смотреться на сайте и если у вас светлый дизайн, то впишется в него очень хорошо. Можете посмотреть с право, он стоит по умолчанию и слева, когда вы сделаете выбор и можно увидеть какая разница.

Установка:

В вид формы опросов вставляем код:

Код
<div class="pollBlock">  
<div class="titles" style="text-align: center;">$QUESTION$</div>  
<div class="pollAns">$ANSWERS$</div>  
<center>  
<a id="arch" class="button_poll arhiv_rez_poll" href="$ARCHIVE_LINK$">Архив</a>  
<a id="resLink" class="button_poll arhiv_rez_poll" href="$RESULTS_LINK$">Результат</a>  
</center>  
<div class="pollTot">Всего ответов: <b>$TOTAL_VOTES$</b></div>  
</div>  

<script type="text/javascript">  
var a = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];  
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress');$('div.answer div div').eq(i).addClass('progress-'+[i]);}  
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});  
</script>  
<script>  
  $(function () {  
if($('.pollBut').size() > 0) {  
$('#arch, #resLink').hide();  
}  
})  
</script>


Но и как здесь без стиля, копируем и в CSS.

Код
.progress {  
  height: 15px;  
  overflow: hidden;  
  margin: 5px 0px 5px 0px;  
  height: 15px!important;  
  background: #F4F8F9!important;  
}  

.progress-0,  
.progress-1,  
.progress-2,  
.progress-3,  
.progress-4,  
.progress-5,  
.progress-6,  
.progress-7,  
.progress-8,  
.progress-9,  
.progress-10,  
.progress-11,  
.progress-12,  
.progress-13,  
.progress-14 {  
  height: 18px!important;  
  display: block!important;  
  overflow: hidden!important;  
  margin-top: -3px;  
}  

.progress-0 {background: #5D9AD3!important;}  
.progress-1 {background: #E96465!important;}  
.progress-2 {background: #F6954E!important;}  
.progress-3 {background: #dd8cd2!important;}  
.progress-4 {background: #75D0ED!important;}  
.progress-5 {background: #5BC254!important;}  
.progress-6 {background: #CFC72D!important;}  
.progress-7 {background: #DD3344!important;}  
.progress-8 {background: #FE9B6F!important;}  
.progress-9 {background: #8CC84B!important;}  
.progress-10 {background: #DD8CD2!important;}  
.progress-11 {background: #e9eb5b!important;}  
.progress-12 {background: #E96465!important;}  
.progress-13 {background: #75D0ED!important;}  
.progress-14 {background: #5D9AD3!important;}  
  .answer {  
color: black;  
background-image: none;  
background-repeat: no-repeat;  
background-position: bottom left;  
line-height: 22px;  
display: block;  
text-align: left;  
font-size: 11px;  
}  
  .pollAns {margin: 0 3px 4px 3px;padding: 5px;text-align: center!important;}  
  .titles {display: block;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px; border-radius: 3px;background: #22A5DC;color: white;text-shadow: 0 1px 0 #22A5DC;padding: 4px 5px 5px 5px;font-size: 13px;  
}  

.button_poll {  
  cursor:pointer;  
  text-decoration:none!important;  
  display:inline-block;  
  font-size: 13px;  
  margin:0 10px 20px 0;  
  padding: 7px 11px 7px;  
  position:relative;  
  outline:none;  
  border:none;  
   
  -webkit-transition:all 0.2s linear;  
  -moz-transition:all 0.2s linear;  
  -o-transition:all 0.2s linear;  
  transition:all 0.2s linear;  
}  
.arhiv_rez_poll {  
  background:#3C75CE;  
  color: #fff;  
}  
.arhiv_rez_poll:hover {  
  background:#2859A3;  
  color:#fff;  
}  
.pollTot {  
border: 0;  
background:#006EEE;  
color: #fff;  
font-size: 13px;  
padding: 5px 10px;  
margin-top: 0px;  
text-align:center;  
}
29 Ноября 2015 Просмотров: 1774 Комментариев: (3)

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

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

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

Комментарии: 3
FeStemBer
FeStemBer 29 Ноября 2015 17:241
0
Сейчас их так много, вот недавно не плохой был, здесь бы углы закруглить и сразу вид измениться. Просто нужно делать выбор, если он возможен, тем с углами а другим без них и тогда будет всегда согласие.
Сопрано
Сопрано 29 Ноября 2015 17:302
0
Но название совершенно другое у этого опроса, но думаю это не страшно. Просто ставил и видел как он на сайте смотриться, но лучше того, который идет от системы, это плюс.
ZruBkul
ZruBkul 29 Ноября 2015 17:433
0
Так смотрится очень даже прилично для светлого дизайна, но сейчас мне лично редко где встречаются опросы, и то основном игровые сайты, где не чего не понимаю.
avatar