info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  Страница 1 из 1
  [ 1 сообщение ]  Просмотры: 3925

Красивые результаты опроса в phpbb 3
  Версия для печати Пред. тема | След. тема 

Опрос
а нафига?
чтобы было
 
  0%  [ 0 ]
пофиг
 
  0%  [ 0 ]
мне интересно
 
  100%  [ 1 ]
круть
 
  0%  [ 0 ]
Всего голосов : 1

Автор Сообщение
В сети
 (Андрей)  
 Красивые результаты опроса в phpbb 3
Администратор
Аватара пользователя

Стаж: 9 лет 19 дней
Сообщения: 1230
Откуда: здешние мы

Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя

Красивые результаты опроса в phpbb 3

наткнулся на очередную "красивость" для форума. как видите - работает (опрос сверху страницы). если не видно - очистите кэш браузера. :-D

оригинальная страничка красивости: https://www.phpbbguru.net/community/viewtopic.php?t=39938

описание от автора: Замена стандартного вывода результатов опросов разноцветными анимированными, с использованием CSS3.

Цвета:
0-20% - синий
20-40% - зеленый
40-60% - желтый
60-80% - оранжевый
90-100% - красный
(Возможна замена цветов вывода на любые свои)

Анимация представляет собой "наполнение" шкалы результатов голосования "бегущими живыми градиентами".
При обновлении страниц браузеров каждая шкала вывода опросов наполняется заново.

Для большей "разноцветности" введён иной пересчёт результатов опросов: 100% это максимум проголосовавших за 1 пункт опроса, остальные данные выводятся в процентах от максимального.


для этого необходимы только правки файлов:

Открыть viewtopic.php
Найти

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

   $poll_total = 0;


Вставить после найденного

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

   $max_pool_option = 0;

Найти

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

      $poll_total += $poll_option['poll_option_total'];


Вставить после найденного

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

      $max_pool_option = ($poll_option['poll_option_total'] > $max_pool_option) ? $poll_option['poll_option_total'] : $max_pool_option;

Найти

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

      $option_pct = ($poll_total > 0) ? $poll_option['poll_option_total'] / $poll_total : 0;


Заменить найденное на

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

      //$option_pct = ($poll_total > 0) ? $poll_option['poll_option_total'] / $poll_total : 0;
      $option_pct = ($poll_total > 0) ? $poll_option['poll_option_total'] / $max_pool_option : 0;


для prosilver:

Открыть styles/prosilver/template/overall_header.html
Найти

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

</head>


Вставить перед найденным

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

<!-- IF S_HAS_POLL -->
   <!-- BEGIN poll_option -->
      <style type="text/css">
         @-webkit-keyframes move{poll_option.POLL_OPTION_PCT} {
            0% { width: 0;}
            100% { width: {poll_option.POLL_OPTION_PERCENT}; }
         }

         @keyframes move{poll_option.POLL_OPTION_PCT} {
            0% { width: 0; }
            100%   { width: {poll_option.POLL_OPTION_PERCENT}; }
         }
                     
         div.poll_animation{poll_option.POLL_OPTION_PCT} {
            -webkit-animation: move 3s linear 0s normal none infinite, move{poll_option.POLL_OPTION_PCT} 6s linear 0s normal none 1;
            animation: move 3s linear 0s normal none infinite, move{poll_option.POLL_OPTION_PCT} 6s linear 0s normal none 1;
         }
      </style>
   <!-- END poll_option -->
<!-- ENDIF -->


Открыть styles/prosilver/template/viewtopic_body.html
Найти

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

<div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->


Заменить найденное на

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

<div class="meter"><div class="poll_animation{poll_option.POLL_OPTION_PCT} <!-- IF poll_option.POLL_OPTION_PCT < 20 -->

Найти

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

style="width:{poll_option.POLL_OPTION_PERCENT};


В данную строку в конец добавить

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

 max-width:{poll_option.POLL_OPTION_PERCENT};

Найти

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

{poll_option.POLL_OPTION_RESULT}


В данную строку в конец добавить

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

&nbsp;</div>


Открыть styles/prosilver/theme/colours.css
Найти

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

.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 {
   border-right-color: transparent;
}


Вставить после найденного

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

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

.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);
}

.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: #E0E3E0;
   -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 {
   position: relative;
   height: 100%;
   padding: 0 !important;
   border: none;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-shadow:
      inset 0 2px 9px  rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);   
   -webkit-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);
   overflow: hidden;
   -o-background-size: 50px 50px;
   -moz-background-size: 50px 50px;
   -webkit-background-size: 50px 50px;
   background-size: 50px 50px;
}


для subsilver2:

Открыть styles/subsilver2/template/overall_header.html
Найти

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

</head>


Вставить перед найденным

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

<!-- IF S_HAS_POLL -->
   <!-- BEGIN poll_option -->
      <style type="text/css">
         @-webkit-keyframes move{poll_option.POLL_OPTION_PCT} {
            0% { width: 0;}
            100% { width: {poll_option.POLL_OPTION_PERCENT}; }
         }

         @keyframes move{poll_option.POLL_OPTION_PCT} {
            0% { width: 0; }
            100%   { width: {poll_option.POLL_OPTION_PERCENT}; }
         }
                     
         div.poll_animation{poll_option.POLL_OPTION_PCT} {
            -webkit-animation: move 3s linear 0s normal none infinite, move{poll_option.POLL_OPTION_PCT} 6s linear 0s normal none 1;
            animation: move 3s linear 0s normal none infinite, move{poll_option.POLL_OPTION_PCT} 6s linear 0s normal none 1;
         }
      </style>
   <!-- END poll_option -->
<!-- ENDIF -->


Открыть styles/subsilver2/template/viewtopic_body.html
Найти

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

{POLL_LEFT_CAP_IMG}{poll_option.POLL_OPTION_IMG}{POLL_RIGHT_CAP_IMG}


Заменить найденное на

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

<div class="meter"><div class="poll_animation{poll_option.POLL_OPTION_PCT} <!-- 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}; max-width:{poll_option.POLL_OPTION_PERCENT};">&nbsp;</div></div>


Открыть styles/subsilver2/theme/stylesheet.css
Найти

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

.username-coloured {
   font-weight: bold;
}


Вставить после найденного

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

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

.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);
}

.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{
   width: 258px;
   height: 12px;
   position: relative;
   margin: 0;
   padding: 0 !important;
   background: #E0E3E0;
   -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 {
   position: relative;
   height: 100%;
   padding: 0 !important;
   border: none;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -moz-box-shadow:
      inset 0 2px 9px  rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);   
   -webkit-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);
   overflow: hidden;
   -o-background-size: 50px 50px;
   -moz-background-size: 50px 50px;
   -webkit-background-size: 50px 50px;
   background-size: 50px 50px;
}



Всё. теперь очистить кэш шаблона, браузера и темы и можно любоваться результатами. :-D
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
опрос,форум,вид,phpbb 3
Показать сообщения за:  Поле сортировки  
Ответить на тему  Страница 1 из 1
  [ 1 сообщение ] 

Кто сейчас на сайте:
Всего посетителей: 1, из них зарегистрированных: 0, скрытых: 0 и гостей: 1 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 1

» »

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы не можете защищать свои темы паролем

Найти:
Перейти:  



cron

Текущее время: 11 окт 2024, 05:21

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид