» »

Красивый вид опроса 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.11.2015 Просмотров: 555 Комментарий: (3)

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

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

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