Мини-МОД "Голосование + bootstrap"

Morgan

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

открываем
viewtopic_body.html
Найти

Код:

<dd class="resultbar">

Заменить на

Код:

<dd class="resultbar"><div class="meter">

Найти

Код:

{poll_option.POLL_OPTION_RESULT}</div></dd>

Заменить на

Код:

{poll_option.POLL_OPTION_RESULT} </div></div></dd>

открываем 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;
}