ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Рейтинг и голосование за пост (Полезность поста, Реакции к посту)


Рейтинг и голосование за пост (Полезность поста, Реакции к посту)

Сообщений 1 страница 10 из 10

1

Полезность поста

http://se.uploads.ru/7Rjfe.png

Автор: Reysler
Стилизация рейтинга поста — своего рода ребрединг. Чем хороша такая система отношений? Во-первых, для ресурсов, занимающихся поддержкой пользователей, это отличный способ оценки ответа на поставленные вопросы. То есть не будет "минусов", будет несогласие пользователя с ответом. Во-вторых, как известно, вопрос/ответ всегда считался эффективным способом управления, не даром админка сервиса mybb интуитивно понятна.

CSS код
Код:
    /* Полезность поста */
    .post-vote {
      display: block !important;
      position: relative;
    }
    .post-vote .container {
      background: transparent !important;
      padding: 0 !important;
    }
    .post-rating p.container {
      background: #8d8d8d !important;
      font-weight: 700;
      padding: 2px 7px!important;
      display: inline-block;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
    }
    .post-rating p.container a {
      color: #fff;
      font-size: 11px !important;
    }
    .post-vote p.container {
      margin-right: 0 !important;
    }
    .post-vote p.container:before {
      content: "Полезное сообщение?";
      position: relative;
      top: 4px;
      right: 32px;
    }
    .post-vote .container a {
      font-size: 0!important;
      margin: 0!important;
    }
    .post-vote .container a:first-child:after,
    .post-vote .container a:first-child:before,
    .post-vote .container a:last-child:before {
      display: inline-block;
      position: relative;
      font-size: 13px;
    }
    .post-vote .container a:first-child:before {
      content: "Да";
      right: 24px;
      top: 2px;
      color: #2b805d;
      border-bottom: 1px solid #cadcd5;
    }
    .post-vote .container a:first-child:after {
      content: "/";
      right: 16px;
      top: 2px;
    }
    .post-vote .container a:last-child:before {
      content: "Нет";
      right: 10px;
      top: 2px;
      color: #b42222;
      border-bottom: 1px solid #bd9393;
    }

Не хотите портить карму? И не нужно! Благодаря "недоработке" рейтинга (а может специально так задумано) посетителю в уважение не ставится отрицательная репутация в профиль, тем самым давая безграничную возможность остальным пользователям в полной мере оценивать старания пользователей без негативных эмоций и ответных реакций на них. Чтобы "минус" не заносился в профиль, идем в Администрирование - Настройки - Система отношений - Тип оценок, выставляем "Только плюсы".

http://se.uploads.ru/J39BT.png


Реакции на пост

http://forumfiles.ru/uploads/0007/e3/f7/2/46357.jpg

Автор: Герда

Это также вариация полезности поста, но с добавкой скрипта.

  • Заменяет рейтинг поста на три типа смайлов: положительное сообщение, отрицательное и еще не оцененное

  • К смайлам в рейтинге поста добавлены всплывающие пояснения при наведении курсора

  • Голосовалка за пост появляется только по клику на смайл с текущим рейтингом поста

  • Плюс и минус в голосовалке за пост заменены на два смайла: негативный и позитивный

  • Добавлено мини-пояснение, что добавление реакции влияет на репутацию

  • Добавлены всплывающие подсказки к смайликам голосования

  • Добавлено обновление текущей страницы после голосования (чтобы при добавлении реакции картинка рейтинга обновлялась)

Коды

Стиль (в html-верх или свой стиль БЕЗ тегов <style>)

Код:
.post-vote {
text-align: right;
}

.punbb .post-rating p,
.punbb .post-vote p {
padding: 0 !important;
margin: 0 !important;
float: none !important;
}

.post-vote:before {
content: 'Реакция на сообщение:';
font-size: 11px;
display: block;
}
.post-vote .container:before {
content: 'Внимание! Реакция отражается на репутации пользователя!';
font-size: 11px;
display: block;
color: #e63737;
} 

.post-vote .container a {
display: inline-block;
font-size: 0 !important;
width: 50px;
height: 50px;
background-size: contain;
opacity: 0.5;
transition: all 0.6s;
-webkit-transition: all 0.6s;
position: relative;
top: -5px;
}
.tipsy, .post-vote .container a:hover {opacity: 1 !important;}

.post-vote .container a[href*="&v=1"] {
background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_001.png);
}
.post-vote .container a[href*="&v=0"] {
background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_017.png);
}

.post-rating {
text-align: right;
max-height: 70px;
max-width: 70px;
float: right;
margin-left: 10px;
}

.punbb .post-rating a {
cursor: help !important;
display: inline-block;
font-size: 0 !important;
width: 70px;
height: 70px;
background-size: contain;
position: relative;
}

.punbb .post-rating a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_013.png);}
.post-rating.good a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_003.png);}
.post-rating.bad a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_022.png);}
.post-rating.super a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_004.png);}
.post-rating.awfull a {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_024.png);}


.post-rating a:before {
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
font-size: 13px;
position: absolute;
top: 20px;
padding: 5px;
background-color: #535252;
color: #fff;
border-radius: 5px;
}
.post-rating a:before {
content: 'На пост еще не реагировали';
left: -190px;
}

.post-rating.good a:before {
content: 'Большинству пост понравился :)';
left: -200px;
}
.post-rating.bad a:before {
content: 'Большинству пост не зашёл :(';
left: -190px;
}
.post-rating.super a:before {
content: 'Большинство в восторге от поста ^^';
left: -250px;
}
.post-rating.awfull a:before {
content: 'Большинство ненавидит пост %(';
left: -210px;
}

.post-rating:hover a:before {opacity: 1;}

Скрипт в html-низ

Код:
<!-- Реакции на пост -->
<script language="javascript">
(function(){

  function processRating() {
    $('.post-rating').removeClass('good bad super awful').each(function () {
      var b = parseInt($(this).text());
      if (b > 0) $(this).addClass('good');
      if (b < 0) $(this).addClass('bad');
      if (b > 4) $(this).addClass('super');
      if (b < -1) $(this).addClass('awfull');
    });

    $('.post-vote .container a[href*="&v=1"]').attr('title', 'Мне нравится!');
    $('.post-vote .container a[href*="&v=0"]').attr('title', 'Отстой...');
    $('.post-rating a').attr('title', 'Добавить реакцию (кликай)');

    $('.post-vote .container a[title], .post-rating a[title]').tipsy({fade: true, gravity: 's'});
  }

  processRating();

  $(document).ajaxSuccess(function(e, xhr, data) {
    if (!~data.url.indexOf('relation.php')) return;
    if (JSON.parse(xhr.responseText).response) setTimeout(processRating, 0);
  });

})();
</script>

Настройка: супер-классный и мега-ужасный пост
http://forumfiles.ru/uploads/0007/e3/f7/2/761640.jpg

В скрипте находим строчки:

if(b>4)$(this).addClass('super');
  if(b<-1)$(this).addClass('awfull');

Первая цифра - количество плюсов для отображения "супер-поста"
Вторая цифра - количество минусов для отображение ужасного поста
По аналогии можно добавлять свои классы для супер-пупер классных заплючованных постов или очень-очень заминусованных

Добавка: реакции в контейнере проголосовавших
http://forumfiles.ru/uploads/0007/e3/f7/2/929899.jpg

код

Добавляем в стиль (в html-верх между тегами <style> или свой стиль БЕЗ тегов <style>)

Код:
figure .vote:before {font-size: 0 !important;}
figure .vote {
width: 50px;
height: 50px;
background-size: contain !important;
background-color: #000 !important;
border-radius: 0 !important;
opacity: 1;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
figure .vote.plus {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_001.png);}
figure .vote.minus {background-image: url(https://vkclub.su/_data/stickers/poppy/sticker_vk_poppy_017.png);}

#respect figure:hover .vote {
display: inline !important;
opacity: 0;
}
#all_voters figure:hover .vote {display: inline !important;}

#respect figcaption {margin-top: 0px !important;}
#respect .person {
width: 50px !important;
height: 50px !important;
}
#respect figure {width: 60px !important;}

.rating_theme .vote {
border-radius: 50% !important;
width: 30px;
height: 30px;
}

+2

2

nou написал(а):

Полезность поста

А на rusff будет работать?

0

3

Мэрилин Мэрис
В теории - да
На практике - могут быть проблемы из-за функции комментариев за пост. :D

Точно не помню, но по-моему здесь в процессе установки кнопок лайк/дизлайк было обнаружено, что они не жмякаются из-за этой функции. Хотя это могло быть связано с другими вещами.

Проэксперементирую на тестовике - отпишусь.

В любом случае репутацию с комментами можно отключить - тогда всё будет ок. :)

0

4

Мэрилин Мэрис
пока делала другую фичу с голосовалкой за пост потестила - да, все работает на русфф
только комментарии к репутации НЕ будут работать.
ребята на русфф недальновидные в этом плане - привязали ее только в + и - в поле профиля.
но это даже к лучшему, т.к. если б они тронули контейнер голосовалок, то по-любому они "сломались" бы  :D  я вспомнила, после чего у себя отключила эту функцию - раньше лайки были реализованны именно через поле профиля и при желании как-то нестандартно эти кнопки оформить все ломалось и не работало. :)

0

5

добавлены коды для превращения рейтинга и голосование в добавление реакций

0

6

1000 раз "Вы супер" 🌹🌹🌹

0

7

код обновлен.
добавлено больше отображений реакций на пост, поправлен стиль под просмотр проголосовавших

+1

8

омг! лисички божественны! :love:

0

9

Гуру написал(а):

омг! лисички божественны! :love:

по-моему все кайфуют не от скрипта, а от стыренных стикеров-лисичек... :D

0

10

Герда написал(а):
Гуру написал(а):

омг! лисички божественны! :love:

по-моему все кайфуют не от скрипта, а от стыренных стикеров-лисичек... :D

а то!
нам, юзерам, лиш бы мимими
на ЕФП ромыч уже все сделал для отгрузки из топика в профиль, а все тебя ждут - дизайн подавай. :crazy:

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Рейтинг и голосование за пост (Полезность поста, Реакции к посту)