Уважаемые пользователи!
C 7 ноября 2020 года phpBB Group прекратила выпуск обновлений и завершила дальнейшее развитие phpBB версии 3.2.
С 1 августа 2024 года phpBB Group прекращает поддержку phpBB 3.2 на официальном сайте.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.
С учетом этого, настоятельно рекомендуется обновить конференции до версии 3.3.

[proSilver] Красивые результаты опроса (css3).

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 12372
Стаж: 12 лет 7 месяцев
Благодарил (а): 223 раза
Поблагодарили: 3517 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Татьяна5 »

CoolPoll v. 1.0.1
Проверялось на Opera 12, Opera 15, Google Chrome 28, Firefox 22 - тени, градиенты и анимация поддерживаются
Спасибо Smayliks что предоставил первоначальный код

Цвета:
0-19% - синий
20-39% - зеленый
40-59% - желтый
60-79% - оранжевый
80-100% - красный

styles/prosilver/template/viewtopic_body.html
Найти

Код: Выделить всё

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar">
Заменить на

Код: Выделить всё

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="meter">
Найти

Код: Выделить всё

{poll_option.POLL_OPTION_RESULT}</div></dd>
Заменить на

Код: Выделить всё

{poll_option.POLL_OPTION_RESULT}&nbsp;</div></div></dd>
styles/prosilver/theme/colours.css
Найти

Код: Выделить всё

.rtl .pollbar5 {
	border-left-color: #D11A4E;
}
Добавить после

Код: Выделить всё

/* CoolPoll (http://phpbb.tttz.ru)
-----------------------------v.1.0.1--- */

.pollbar1 {
	background-color: #0000ff; /* blue */
	background-image: linear-gradient(
	135deg, rgba(0, 0, 128, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(0, 0, 128, 0.2) 50%, 
	rgba(0, 0, 128, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar2 {
	background-color: #2BC253; /* green */
	background-image: linear-gradient(
	135deg, 
	rgba(84, 240, 84, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(84, 240, 84, 0.2) 50%, 
	rgba(84, 240, 84, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar3 {
	background-color: #FFD800; /* yellow */
	background-image: linear-gradient(
	135deg, 
	rgba(216, 177, 0, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(216, 177, 0, 0.2) 50%, 
	rgba(216, 177, 0, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar4 {
	background-color: #f1a165; /* orange */
	background-image: linear-gradient(
	135deg, 
	rgba(243, 109, 10, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(243, 109, 10, 0.2) 50%, 
	rgba(243, 109, 10, 0.2) 75%, 
	transparent 75%, 
	transparent);
}

.pollbar5 {
	background-color: #f0a3a3; /* red */
	background-image: linear-gradient(
	135deg, rgba(244, 35, 35, 0.2) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(244, 35, 35, 0.2) 50%, 
	rgba(244, 35, 35, 0.2) 75%, 
	transparent 75%, 
	transparent);
}


@-webkit-keyframes move {
	0% {background-position: 0 0;}
	100% {background-position: 100px 50px;}
}

@keyframes move {
  from { background-position: 0 0; }
  to   { background-position: 100px 50px; }
}

.meter{ 
	height: 15px;
	position: relative;
	margin: 0;
	padding: 0 !important;
	background: #7DA0D3;
	border-radius: 25px;
	box-shadow: inset 0 -4px 1px rgba(255,255,255,0.3);
}

.meter > div {
	position: relative;
	height: 100%;
	padding: 0 !important;
	border: none;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	box-shadow:
		inset 0 2px 9px  rgba(255,255,255,0.3),
		inset 0 -2px 6px rgba(0,0,0,0.4);
	overflow: hidden;
    animation: move 3s linear 0s normal none infinite ;
	-webkit-animation: move 3s linear infinite;
	background-size: 50px 50px;
}
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Пчелкин »

О как! И в Опросы на главной странице (Polls on index) тож все смотрится отлично!!!
Аватара пользователя
Balamut
Former team member
Сообщения: 2213
Стаж: 19 лет
Откуда: {postrow.POSTER_FROM}
Поблагодарили: 146 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Balamut »

Первый пост поправлен с сылкой на вариант Татьяны. Спасибо за кроссбраузерное решение.
//
// That's all, Folks!
// -------------------------------------------------
Аватара пользователя
Romnik
phpBB 2.0.2
Сообщения: 338
Стаж: 13 лет 1 месяц
Откуда: Москва/Выдропужск
Благодарил (а): 39 раз
Поблагодарили: 64 раза
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Romnik »

Спасибо Татьяна.
Установил, смотрится прикольно.

Но,
Синий цвет явно вылезает из общей гаммы.
Поэтому:

Файл colours.css
Найти:

Код: Выделить всё

.pollbar1 {
   background-color: #0000ff; /* blue */
   background-image: linear-gradient(
   135deg, rgba(0, 0, 128, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(0, 0, 128, 0.2) 50%,
   rgba(0, 0, 128, 0.2) 75%,
   transparent 75%,
   transparent);
}
Заменить на:

Код: Выделить всё

.pollbar1 {
   background-color: #4069D1; /* blue */
   background-image: linear-gradient(
   135deg, rgba(0, 0, 128, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(0, 0, 128, 0.2) 50%,
   rgba(0, 0, 128, 0.2) 75%,
   transparent 75%,
   transparent);
}
Теперь всё ровно и красиво.
er107
phpBB 2.0.14
Сообщения: 973
Стаж: 13 лет
Благодарил (а): 285 раз
Поблагодарили: 57 раз

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение er107 »

Извиняюсь, а эти правки (от Татьяна5) надо вносить в оригинальные файлы или уже после модификации от Smayliks?
Последний раз редактировалось er107 01.08.2013 10:09, всего редактировалось 2 раза.
er107
phpBB 2.0.14
Сообщения: 973
Стаж: 13 лет
Благодарил (а): 285 раз
Поблагодарили: 57 раз

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение er107 »

Немного не точно задал вопрос, правки от Татьяна5 вносить в какие файлы, оригинальные, или уже модифицированные от Smayliks?
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Пчелкин »

А....млин...не врубился...Смайловские убери, а Татьянины сделай...
Аватара пользователя
Balamut
Former team member
Сообщения: 2213
Стаж: 19 лет
Откуда: {postrow.POSTER_FROM}
Поблагодарили: 146 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Balamut »

Делать только Татьяныны. Мои не надо.
//
// That's all, Folks!
// -------------------------------------------------
er107
phpBB 2.0.14
Сообщения: 973
Стаж: 13 лет
Благодарил (а): 285 раз
Поблагодарили: 57 раз

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение er107 »

Найти бы еще Ваши:)) Они то уже стерты, хорошо, спасибо, попробую разобраться:)
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11234
Стаж: 14 лет 2 месяца
Откуда: fotovideoforum.ru
Благодарил (а): 1782 раза
Поблагодарили: 1340 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Пчелкин »

Всего используется 4 цвета:
0% - 24% - синий;
25% - 49% - зелёный;
50% - 74% - оранжевый;
75% - 100% - красный.

Для владельцев браузеров, сделанных на основе WebKit графики будут с анимацией. Посмотреть можно здесь:
30 и 70% (зелёный и оранжевый цвета) - http://phpbb.tttz.ru/viewtopic.php?f=2&t=2
24 и 76% (синий и красный цвета) - http://phpbb.tttz.ru/viewtopic.php?f=2&t=3
(проверялось в браузерах Chrome и Opera)

К сожалению, если вы "счастливый" обладатель IE, то вам необходимо сначала установить другой браузер, а потом то, что описано в этой теме.

Чтобы сделать у себя на форуме такую красоту, вам поможет вот такая небольшая модификация:

Открыть:
КОД: ВЫДЕЛИТЬ ВСЁ
styles/prosilver/template/viewtopic_body.html

Найти:

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}</div></dd>
<dd><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd><!-- ENDIF -->

И заменить на:

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="meter<!-- IF poll_option.POLL_OPTION_PCT < 25 --> blue"<!-- ELSEIF poll_option.POLL_OPTION_PCT < 50 -->"<!-- ELSEIF poll_option.POLL_OPTION_PCT < 75 --> orange"<!-- ELSE --> red"<!-- ENDIF -->><span style="width:{poll_option.POLL_OPTION_PERCENT};"></span></div></dd>
<dd><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{L_TOTAL_VOTES}: {poll_option.POLL_OPTION_RESULT} ({poll_option.POLL_OPTION_PERCENT})<!-- ENDIF --></dd><!-- ENDIF -->

Открыть:

styles/prosilver/theme/common.css

Найти:

.clear {
display: block;
clear: both;
font-size: 1px;
line-height: 1px;
background: transparent;
}

И после добавить:

/* CoolPoll (http://phpbb.tttz.ru)
-----------------------------v.1.0.0--- */

.meter {
height: 15px;
position: relative;
margin: 0px 0 0px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -4px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -4px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -4px 1px rgba(255,255,255,0.3);
}

.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}

.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 3s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}

@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}

.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.blue > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #0000ff, #000080);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0000ff),color-stop(1, #000080));
background-image: -webkit-linear-gradient(#0000ff, #000080);
}


Вот и всё ;)
Не забудьте очистить кэш (Администраторский раздел - Общие) и обновить шаблон и тему (Администраторский раздел - Стили - Шаблоны || Темы - Обновить).
Аватара пользователя
Romnik
phpBB 2.0.2
Сообщения: 338
Стаж: 13 лет 1 месяц
Откуда: Москва/Выдропужск
Благодарил (а): 39 раз
Поблагодарили: 64 раза
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Romnik »

Можно ещё такой вариант:

Файл стилей colours.css (от Татьяны)

Найти:

Код: Выделить всё

.meter{ 
	height: 15px;
	position: relative;
	margin: 0;
	padding: 0 !important;
	background: #7DA0D3;
	border-radius: 25px;
	box-shadow: inset 0 -4px 1px rgba(255,255,255,0.3);
}
Заменить на:

Код: Выделить всё

.meter {
   background-color: #E0E3E0;
   height: 15px;
   padding: 0px !important;
   margin: 0;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
   -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
   box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
}
Выглядит вот так:
opros.jpg
opros2.jpg
Полную версию можно посмотреть здесь - http://www.electric-house.ru/forum/view ... 91&t=4692&
Аватара пользователя
clubforum
phpBB 2.0.0
Сообщения: 216
Стаж: 12 лет 5 месяцев
Благодарил (а): 57 раз
Поблагодарили: 3 раза

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение clubforum »

Где отрегулировать отступы цифр от краёв на цветных линейках?
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 12372
Стаж: 12 лет 7 месяцев
Благодарил (а): 223 раза
Поблагодарили: 3517 раз
Контактная информация:

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение Татьяна5 »

clubforum
viewtopic_body.html
{poll_option.POLL_OPTION_RESULT}&nbsp; - поставить побольше &nbsp;
Аватара пользователя
clubforum
phpBB 2.0.0
Сообщения: 216
Стаж: 12 лет 5 месяцев
Благодарил (а): 57 раз
Поблагодарили: 3 раза

Re: [proSilver] Красивые результаты опроса (css3).

Сообщение clubforum »

Татьяна5
оно почему-то на нолик не распространяется.
Закрыто

Вернуться в «Стили для phpBB 3.0.x»