« Отличный и в тоже время простой вид опроса для uCoz »

Описание материала:

Отличный и в тоже время простой в стиле минимализма вид опроса, для сайтов системы uCoz. При замене стандартного вида опроса, Вы получите яркий и очень приятный вид. Вид подойдет под светлые дизайны сайтов и отлично будет с ним сочетаться. Данный вид очень прост в установке и с ним справится как продвинутый мастер, так и новичок.

Установка:
1. Заходим в ПУ - Управление дизайном - модуль Опросы - Вид формы опросов и заменяем текущий код на этот:

Код
<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>

2.Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и ставим в самый низ данный код:
Код
/* Отличный и в тоже время простой вид опроса для uCoz */
.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;  
}
/*------------------------------------*/

Готова!


Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Всего комментариев: 1
А что красиво выглядит
0
avatar