Вид формы опроса для uCoz

03.08.201242942

Стандартный вид опросов не красив, да и иногда не подходит для определенного дизайна сайта. Данный вид формы опроса для uCoz строится на стилях CSS, поэтому цвета можно будет поменять в зависимости от того, на какой сайт вы хотите его установить.

Если вам не нравится шрифт, примененный в данном виде, можете просто его заменить на свой, прописав в CSS вместо Lobster, название своего шрифта, который вы бы хотели видеть.


Код HTML



Code
<div class="opros">Внимание опрос!</div>
<div class="poll_style">
$POLLC_3$
</div>
Вставляем данный код соответственно в первый или второй контейнер (НЕ В БЛОК, а именно В КОНТЕЙНЕР), в зависимости, от того, какой из них присутствует у Вас на сайте.  
<br><br>
Соответственно $POLLC_3$ заменяем на номер своего опроса
<br><br>
Это вставить в вид формы опроса

<div class="pollBlock" style="font-family: Century Gothic;">
<div class="pollQue" style="font-size:8pt;padding-top:2px;text-align:left;"><div class="QUESTION">$QUESTION$</div></div>
<div class="pollAns" style="font-size:8pt;text-align:left;"><div class="ANSWERS">$ANSWERS$</div></div>
<div class="pollLnk" style="padding-top:4px;text-align:center;"> <a style="font-size:7pt;" href="$RESULTS_LINK$"><div class="text_style">Результаты</div></a></div>
<div class="pollTot" style="padding-top:4px;font-size:7pt;text-align:center;"><div class="golos">Проголосовало: <b>$TOTAL_VOTES$</b></div></div>
</div>


Код CSS (или заключив в теги <style></style> вставить так же в вид формы опроса)



Code
.poll_style {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #b22222; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CD5C5C', endColorstr='#b22222'); /* for IE */
background: -webkit-linear-gradient(top, #CD5C5C, #b22222); /* for webkit browsers */
background: -moz-linear-gradient(top, #CD5C5C, #b22222); /* for firefox 3.6+ */  
background: -o-linear-gradient(top, #CD5C5C, #b22222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #CD5C5C, #b22222); /* IE10+ */
}
.QUESTION {
font-family: Lobster;
color: #ffffff;
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
}
.ANSWERS {
font-family: Lobster;
color: #ffffff;
font-size: 15px;
padding-left: 10px;
padding-right: 10px;
}
.golos{
font-family: Lobster;
color: #ffffff;
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.text_style{
font-family: Century Gothic;
color: #ffffff;
font-size: 12px;
}
.opros {
font-family: Lobster;
color: #CD5C5C;
font-size: 32px;
padding-left: 10px;
padding-right: 10px;
padding-bottom:2px;
}

И у кого не установлен на сайте шрифт Lobster, пишем в CSS такую строчку


Code
@font-face
{
font-family: "Lobster";
src : url("http://mult-on.ucoz.ru/fonts/564_lobster.ttf");
}

Данная часть кода CSS отвечает за скругление углов слева сверху и справа сверху соответственно:


Code
border-top-left-radius: 10px;
border-top-right-radius: 10px;

А теперь разберем, что к чему, и как поменять вид под себя.


Code
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CD5C5C', endColorstr='#b22222'); /* for IE */
background: -webkit-linear-gradient(top, #CD5C5C, #b22222); /* for webkit browsers */
background: -moz-linear-gradient(top, #CD5C5C, #b22222); /* for firefox 3.6+ */  
background: -o-linear-gradient(top, #CD5C5C, #b22222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #CD5C5C, #b22222); /* IE10+ */

Данная часть кода отвечает за градиент фона блока. #CD5C5C - цвет сверху блока, #b22222 - цвет внизу блока.


Code
background: #b22222; /* for non-css3 browsers */

Эта часть стиля, как подписано, для браузеров, которые не поддерживают CSS3. В них градиент не может отображаться, поэтому он будет цвет блока будет однотонным.




Сохраните в социальную сеть
Комментарии (2)
Без "Лобстера" никуда
0
Гость 03.08.2012 в 18:44Спам
Просто он выглядит красиво, и как мне показалось, хорошо подходит сюда) В любом случае, если он вам не нравится, вы запросто его можете поменять)
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт