Красивый вид опроса 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; } |
Поделиться в социальных сетях
Материал разместил
Комментарии: 3 | |
| |