Тюнинг отображения линий голосований phpBB 3 - раскрасить и анимировать линии результатов

[Valery]

viewtopic_body.html найти:

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

<dd class="resultbar<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><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_REL};">{poll_option.POLL_OPTION_RESULT}</div></dd>

Заменить на:

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

<dd class="resultbar<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><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_REL};">{poll_option.POLL_OPTION_RESULT}&nbsp;</div></div></dd>

content.css добавить:

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

/*Color Poll*/
.meter{height:15px;padding:1px!important}
.meter > div{position:relative;height:100%;padding:0 2px 0 0 !important;border:none;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;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 5s linear 0 normal none infinite;-webkit-animation:move 5s linear infinite;background-size:50px 50px}
.pollbar1{background-color:#4069D1;background-image:linear-gradient(135deg,rgba(0,0,128,.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;background-image:linear-gradient(135deg,rgba(84,240,84,.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:#efca00;background-image:linear-gradient(135deg,rgba(216,177,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;background-image:linear-gradient(135deg,rgba(243,109,10,.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;background-image:linear-gradient(135deg,rgba(244,35,35,.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}
}

Проголосуй, чтобы видеть действо: