Изображение

Создаём красивое отображение вариантов опроса с помощью CSS3. Идея Smayliks, реализация Татьяна5, вариант от группы поддержки phpBB Guru.
Поддерживаемые версии браузеров - Opera 12, Opera 15, Google Chrome 28, Firefox 22, работают тени, градиенты и анимация.
Поддерживаемые стили - prosilver и его клоны.

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

Редактирование.
Открываем шаблон 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>
Далее редактируем тему вашего стиля (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);
}

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

@-webkit-keyframes move {
	0% {background-position: 0 0;}
	100% {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;
}
Настройки. В данном виде в полоске результата есть цифра, количество человек проголосовавших за этот вариант, если вы хотите убрать их от туда, либо переместить к процентам, то необходимо внести следующие правки в коде. Находим ранее отредактированный код:

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

{poll_option.POLL_OPTION_RESULT}&nbsp;</div></div></dd>
Меняем на:

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

</div></div></dd>
Чуть ниже находим:

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

<dd><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd><!-- ENDIF -->
Меняем на:

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

<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 -->
Получаем:
Изображение

Варианты от кабинета админа.
Спасибо гуру за предоставленную идею.

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

Открываем шаблон 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>
Меняем на:

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

</div></div></dd>
Чуть ниже находим:

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

<dd><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd><!-- ENDIF -->
Меняем на:

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

<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 -->
Далее редактируем тему вашего стиля (colours.css) находим:

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

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

Вариант 1

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

/* CoolPoll (http://phpbb.tttz.ru) :: Modified by: http://cabinetadmina.ru
----------------------------------------------------------------v.1.0.1--- */
.meter {
	background-color: #555;
	height: 15px;
	padding: 2px !important;
	margin: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-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;
}
.meter > div {
	height: 100%;
	background-color: #a5df41;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width .4s ease-in-out;
	-ms-transition: width .4s ease-in-out;
	-o-transition: width .4s ease-in-out;
	transition: width .4s ease-in-out;
}
.meter .pollbar1 {background-color: #34c2e3;}
.meter .pollbar2 {background-color: #2BC253;}
.meter .pollbar3 {background-color: #FFD800;}
.meter .pollbar4 {background-color: #f1a165;}
.meter .pollbar5 {background-color: #f0a3a3;}
.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;
	background-image: -webkit-gradient(linear,left top,right bottom,color-stop(.25,rgba(255,255,255,.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.15)),color-stop(.75,rgba(255,255,255,.15)),color-stop(.75,transparent),to(transparent));
	background-image: -webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: -moz-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: -ms-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes { 
	0% {background-position: 0 0;}
	100% {background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;}
	100% {background-position: 60px 0;}
}
Получаем:
Изображение

Вариант 2

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

/* CoolPoll (http://phpbb.tttz.ru) :: Modified by: http://cabinetadmina.ru
----------------------------------------------------------------v.1.0.2--- */
.meter {
	background-color: #555;
	height: 15px;
	padding: 2px !important;
	margin: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-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;
}
.meter > div {
	height: 100%;
	background-color: #a5df41;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width .4s ease-in-out;
	-ms-transition: width .4s ease-in-out;
	-o-transition: width .4s ease-in-out;
	transition: width .4s ease-in-out;
}
.meter .pollbar1 {
	background-color: #34c2e3;
	background-image: -moz-linear-gradient(top, #34c2e3 0%, #00a6d8 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34c2e3), color-stop(100%,#00a6d8));
	background-image: -webkit-linear-gradient(top, #34c2e3 0%,#00a6d8 100%);
	background-image: -o-linear-gradient(top, #34c2e3 0%,#00a6d8 100%);
	background-image: -ms-linear-gradient(top, #34c2e3 0%,#00a6d8 100%);
	background-image: linear-gradient(to bottom, #34c2e3 0%,#00a6d8 100%);
}
.meter .pollbar2 {
	background-color: #2bc253;
	background-image: -moz-linear-gradient(top, #2bc253 0%, #4ca916 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2bc253), color-stop(100%,#4ca916));
	background-image: -webkit-linear-gradient(top, #2bc253 0%,#4ca916 100%);
	background-image: -o-linear-gradient(top, #2bc253 0%,#4ca916 100%);
	background-image: -ms-linear-gradient(top, #2bc253 0%,#4ca916 100%);
	background-image: linear-gradient(to bottom, #2bc253 0%,#4ca916 100%);
}
.meter .pollbar3 {
	background-color: #ffd800;
	background-image: -moz-linear-gradient(top, #ffd800 0%, #e0af00 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd800), color-stop(100%,#e0af00));
	background-image: -webkit-linear-gradient(top, #ffd800 0%,#e0af00 100%);
	background-image: -o-linear-gradient(top, #ffd800 0%,#e0af00 100%);
	background-image: -ms-linear-gradient(top, #ffd800 0%,#e0af00 100%);
	background-image: linear-gradient(to bottom, #ffd800 0%,#e0af00 100%);
}
.meter .pollbar4 {
	background-color: #f1a165;
	background-image: -moz-linear-gradient(top, #f1a165 0%, #ef6604 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1a165), color-stop(100%,#ef6604));
	background-image: -webkit-linear-gradient(top, #f1a165 0%,#ef6604 100%);
	background-image: -o-linear-gradient(top, #f1a165 0%,#ef6604 100%);
	background-image: -ms-linear-gradient(top, #f1a165 0%,#ef6604 100%);
	background-image: linear-gradient(to bottom, #f1a165 0%,#ef6604 100%);
}
.meter .pollbar5 {
	background-color: #f0a3a3;
	background-image: -moz-linear-gradient(top, #f0a3a3 0%, #ef4f4f 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0a3a3), color-stop(100%,#ef4f4f));
	background-image: -webkit-linear-gradient(top, #f0a3a3 0%,#ef4f4f 100%);
	background-image: -o-linear-gradient(top, #f0a3a3 0%,#ef4f4f 100%);
	background-image: -ms-linear-gradient(top, #f0a3a3 0%,#ef4f4f 100%);
	background-image: linear-gradient(to bottom, #f0a3a3 0%,#ef4f4f 100%);
}
.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 {
	position: relative;
}
.pollbar1::after, .pollbar2::after, .pollbar3::after, .pollbar4::after, .pollbar5::after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-animation: animate-shine 2s ease-out infinite;
	-moz-animation: animate-shine 2s ease-out infinite;
}

@-webkit-keyframes animate-shine { 
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}
@-moz-keyframes animate-shine {
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}
Получаем:
Изображение

Вариант 3

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

/* CoolPoll (http://phpbb.tttz.ru) :: Modified by: http://cabinetadmina.ru
----------------------------------------------------------------v.1.0.3--- */
.meter {
	background-color: #555;
	height: 15px;
	padding: 2px !important;
	margin: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-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;
}
.meter > div {
	height: 100%;
	background-color: #a5df41;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	-webkit-animation: animate-glow 1s ease-out infinite;
	-moz-animation: animate-glow 1s ease-out infinite;
}
.meter .pollbar1 {
	background-color: #34c2e3;
	background-image: -moz-linear-gradient(top, #34c2e3 0%, #00a6d8 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34c2e3), color-stop(100%,#00a6d8));
	background-image: -webkit-linear-gradient(top, #34c2e3 0%,#00a6d8 100%);
	background-image: -o-linear-gradient(top, #34c2e3 0%,#00a6d8 100%);
	background-image: -ms-linear-gradient(top, #34c2e3 0%,#00a6d8 100%);
	background-image: linear-gradient(to bottom, #34c2e3 0%,#00a6d8 100%);
}
.meter .pollbar2 {
	background-color: #2bc253;
	background-image: -moz-linear-gradient(top, #2bc253 0%, #4ca916 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2bc253), color-stop(100%,#4ca916));
	background-image: -webkit-linear-gradient(top, #2bc253 0%,#4ca916 100%);
	background-image: -o-linear-gradient(top, #2bc253 0%,#4ca916 100%);
	background-image: -ms-linear-gradient(top, #2bc253 0%,#4ca916 100%);
	background-image: linear-gradient(to bottom, #2bc253 0%,#4ca916 100%);
}
.meter .pollbar3 {
	background-color: #ffd800;
	background-image: -moz-linear-gradient(top, #ffd800 0%, #e0af00 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd800), color-stop(100%,#e0af00));
	background-image: -webkit-linear-gradient(top, #ffd800 0%,#e0af00 100%);
	background-image: -o-linear-gradient(top, #ffd800 0%,#e0af00 100%);
	background-image: -ms-linear-gradient(top, #ffd800 0%,#e0af00 100%);
	background-image: linear-gradient(to bottom, #ffd800 0%,#e0af00 100%);
}
.meter .pollbar4 {
	background-color: #f1a165;
	background-image: -moz-linear-gradient(top, #f1a165 0%, #ef6604 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1a165), color-stop(100%,#ef6604));
	background-image: -webkit-linear-gradient(top, #f1a165 0%,#ef6604 100%);
	background-image: -o-linear-gradient(top, #f1a165 0%,#ef6604 100%);
	background-image: -ms-linear-gradient(top, #f1a165 0%,#ef6604 100%);
	background-image: linear-gradient(to bottom, #f1a165 0%,#ef6604 100%);
}
.meter .pollbar5 {
	background-color: #f0a3a3;
	background-image: -moz-linear-gradient(top, #f0a3a3 0%, #ef4f4f 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0a3a3), color-stop(100%,#ef4f4f));
	background-image: -webkit-linear-gradient(top, #f0a3a3 0%,#ef4f4f 100%);
	background-image: -o-linear-gradient(top, #f0a3a3 0%,#ef4f4f 100%);
	background-image: -ms-linear-gradient(top, #f0a3a3 0%,#ef4f4f 100%);
	background-image: linear-gradient(to bottom, #f0a3a3 0%,#ef4f4f 100%);
}

@-webkit-keyframes animate-glow {
	0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
	50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
	100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}
@-moz-keyframes animate-glow {
	0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
	50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
	100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}
Получаем:
Изображение

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

Во всех вариантах стиля, цветовое оформление полос находится в .meter .pollbar1 { 2, 3 и так далее.
В первом варианте цвета без градиента, в случае необходимости просто меняете цвет на свой. В двух других цвета имеют градиент, чтобы создать градиент со своими цветами воспользуйтесь генератором - Онлайн градиент генератор.

Изменить цветовое оформление незаполненную, тёмную часть полосы можно здесь:

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

.meter {
	background-color: #555;
...
Комментарии: 15

romaamor 27 июл 2013, 14:14 Сообщение

CabinetAdmin » Сегодня, 12:55 писал(а):Поддерживаемые стили - prosilver и его клоны.
Жалко для subsilver2 нету. :(
  • 0

CabinetAdmin 27 июл 2013, 17:13 Сообщение

romaamor » Сегодня, 17:14 писал(а):Жалко для subsilver2 нету.
Если время позволит - покумекаю, но не обещаю.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 28 июл 2013, 15:27 Сообщение

Посмотрел я как устроен опрос на клонах subsilver2, в принципе ничего сложного то и нет.

Для subsilver2 и его клонов, в шаблоне viewtopic_body.html найти:

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

<td dir="ltr">{POLL_LEFT_CAP_IMG}{poll_option.POLL_OPTION_IMG}{POLL_RIGHT_CAP_IMG}</td>
Заменить на:

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

<td dir="ltr" width="300px"><div class="meter"><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};"></div></div></td>
width="300px" - ширина полосы.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 28 июл 2013, 18:45 Сообщение

А тему редактировать ?
  • 0

CabinetAdmin 28 июл 2013, 18:53 Сообщение

Конечно, как оно без стилей работать то будет?!
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Bukovka_ 29 июл 2013, 00:00 Сообщение

Какая прелесть, сижу играюсь. :Bravo:
А почему в моем опросе, вроде и 6 вариантов ответа отображено, а цвета все равно только 2 - голубой и зеленый? :cry:
+
  • 0

romaamor 29 июл 2013, 12:28 Сообщение

CabinetAdmin » Вчера, 19:53 писал(а):Конечно, как оно без стилей работать то будет?!
Не, тоже самое как и в просильвере ?
  • 0

CabinetAdmin 29 июл 2013, 14:05 Сообщение

Bukovka_
Ну правильно, цвет разный в зависимости от количества голосов, до 20% синий, до 40 зелёный и далее... До ста доберётся красненьким станет.

romaamor
А я говорю? Если бы стили были другие, я бы это обязательно указал.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Bukovka_ 29 июл 2013, 16:04 Сообщение

CabinetAdmin » Сегодня, 13:05 писал(а):вет разный в зависимости от количества голосов, до 20% синий, до 40 зелёный и далее...
Изображение До чего техника дошла. :Bravo:
  • 0

silver073000Василий 31 июл 2013, 19:29 Сообщение

Установил себе тоже :) А можно ли в subsilver`e количество проголосовавших перенести в полоску?
  • 0

CabinetAdmin 01 авг 2013, 13:51 Сообщение

Можно конечно. Нужно отредактировать ранее вставленный фрагмент:

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

<td dir="ltr" width="300px"><div class="meter"><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};"></div></div></td>
В найденном перед </div></div></td> вставляем

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

{poll_option.POLL_OPTION_RESULT}
Чуть ниже находим и удаляем:

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

<td class="gen" align="center">[ {poll_option.POLL_OPTION_RESULT} ]</td>
Можно оформить цвет текста также как и на просильвере (как на первом скриншоте в первом сообщении), в теме к .meter > div { (перед }) добавить:

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

	text-align: right;
	color: #fff;
	padding: 0 2px;
	font-weight: bold;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 02 авг 2013, 17:14 Сообщение

Всё отлично получилось :Yahoo!: Только цифры показались маленькие в полосе, то я ещё добавил

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

	font-size: 1.2em;

Благодарю за совет :)
  • 0

АрианАндрей 13 авг 2013, 22:35 Сообщение

Установил. На форуме всё работает. А вот на портале в окне "Голосование" существенно ничего не изменилось. Что надо исправить?
  • 0

CabinetAdmin 14 авг 2013, 13:51 Сообщение

Ариан
В портале за голосование отвечает шаблон portal/block/poll.html, код должен быть таким же, правки в тех же местах.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!