Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

На страницу : Предыдущий  1, 2

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 2 из 2]


Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Первое сообщение в теме :

Сейчас мы сделаем что-то вроде этого:


Такие лайки есть и на этом сайте - можете потыкать)

Чем полезны именно такие лайки?
Они асинхронны, т.е. не перегружают страницу. Благодаря этому пользователь может "полайкать" сразу несколько сообщений за раз - это удобно, и не надо ждать, пока форум не перенаправит юзера обратно.

Плюс они выглядят гораздо симпотичней :)

Готовимся
Подберём картинку для лайков размером ровно в 32х32 пикселей.

Некоторые модели (можете взять эти, а можете свою загрузить):


Копируем ссылку на изображение в блокнот - она нам не раз понадобится!

Для forum2x2
Для начала убедимся, что у нас движок punBB и мы можем редактировать шаблон.

Теперь давайте зайдём в админпанель - оформление - шаблоны - общие настройки. Редактируем шаблон viewtopic_body.

Ищем такое:
Код:
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->

<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->

<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->

<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->

<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
Удаляем всё это дело. Мы поставим немного другой код в другом месте.

Ищем следующую строку:
Код:
<!-- BEGIN switch_signature -->
Перед ней вставляем этот код:
Код:
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" title="Нравится!"><img src="ССЫЛКА" /></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-br">
<span class="votehid">{postrow.displayed.switch_vote_active.L_VOTE_TITLE}</span>
<span class="voteshow"></span>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<span class="voteshow">0</span>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->
Заменяем "ССЫЛКА" на ссылку на иконку, которую мы выбрали.

Сохраняем, публикуем шаблон.

Если у вас на форуме включены блоги, надо будет провести похожую процедуру в шаблоне viewcomments_body.

Вырезаем ненужные стандартные коды голосования за пост, как в первом случае (там этих блоков два!).

Вставляем новый код, как делали в первом случае. Плюс к этому после фрагмента:
Код:
<p> {comment.displayed.EDITED_MESSAGE}
</p>
надо будет вставить:
Код:
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{comment.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" title="Подарить любовь :3"><img src="ССЫЛКА" /></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-br">
<span class="votehid">{comment.displayed.switch_vote_active.L_VOTE_TITLE}</span>
<span class="voteshow"></span>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<span class="voteshow">0</span>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->

Сохраняем, публикуем  :yes:

Далее заходим в админпанель - оформление - цвета - каскадная таблица стилей CSS. Добавим в конец:
Код:
.voteshow {
font-size: 24px;
position: relative;
top: -6px;
left: 6px;
}
.votehid {
display: none;
}
.vote {
float: left;
width: auto;
}
.vote-br {
    display: inline;
}

Последний этап - установим скрипты. Заходим в админпанель - модули - управление цветами яваскрипт (в самом низу). Создаём скрипт. Называем "Лайки". Показывать - только в темах.
В содержимое вставляем:
Код:
copyrightnotice = 'Скрипт от your.roll.tv . Распространение и использование разрешено только с прикреплением этой строки.';
$(document).ready(function() {
  $('.vote').each(function() {
    if ($(this).find('.votehid').length > 0) {
     $(this).find('.voteshow').html(/[0-9]+/.exec($(this).find('.votehid').html().replace('Рейтинг сообщения: 100% (',''))[0]);
    }
   if ($(this).find('a').length > 0){
      $(this).find('a').click(function() {
        $.get($(this).attr('href'));
        $(this).find('img').css('opacity','0.5');
        $(this).next()[0].innerHTML = Number($(this).next()[0].innerHTML) + 1;
        return false;
      });
    } else {
      $(this).find('.vote-br').prepend('<img style="opacity: 0.5;" src="ССЫЛКА" />');
    }
  });
});
Тут также надо будет заменить ССЫЛКА на ссыль к картинке.

Сохраняем. Готово!  :clap:

Для myBB
В админке - настройки - Система отношений указываем точь в точь такие настройки:


Далее в админке - настройки - Основные в HTML верх или HTML низ пишем:
Вариант с кнопкой и надписью "Нравится!:

Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).appendTo(jQuery(this).closest('.container').find('.post-content')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').after('<span class="likeme">Нравится!</span>');
  }).click(function () {
    if (! this.plused) {
     $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
      $(this).next().html('+' + (Number($(this).next().html()) + 1));
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-content').append('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.likeme {
  font-size: 18px;
  position: relative;
  top: 6px;
  margin-left: 8px;
  vertical-align: top;
}
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>
Вариант просто с кнопкой:

Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).appendTo(jQuery(this).closest('.container').find('.post-content')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').attr('title','Нравится!');
  }).click(function () {
    if (! this.plused) {
     $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
      $(this).next().html('+' + (Number($(this).next().html()) + 1));
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-content').append('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>

Ссылку
Код:
http://i80.servimg.com/u/f80/16/50/61/52/heart11.png
заменяем на ссылку на изображение-кнопку.

Сохраняем. Всё :)

Проверьте, всё ли работает; если ВДРУГ возникли проблемы - пишите здесь, поможем!



Последний раз редактировалось: Космо (03.04.14 9:28), всего редактировалось 4 раз(а)


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль
Космо, слушай, ты же в стилях разбираешься? Если я в другой темке задам пару вопросов - поможешь? Огромной разницы в стилях на мубб и форумошн вроде нет. Просто решила сама дизайн создать, изменив при том всю цветовую гамму, поэтому много несостыковок и ляпов. Вот ссылка на тест - http://supertest.0bb.ru/. Думаю, невооруженным глазом видно эти ляпы...

Посмотреть профиль

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Да, можешь задавать вопросы по дизу и цсс.
Косяков пока особо не вижу... Разве что "дизайн" пишется как Design (четыре ошибки в одном слове, боже! >.< признайся, что ты не учишь английский в школе хдд), а "специально" как "Special".

Я, оказывается, так серьёзно накосячил, что эти лайки работали только для постов с подписями.
В первом посте всё исправил, а твой вариант кода вот такой (я видел твои мучения с цсс ;) ):
Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).appendTo(jQuery(this).closest('.container').find('.post-content')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').attr('title','Лайкнуть!');
  }).click(function () {
    if (! this.plused) {
      $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
      $(this).next().html('+' + (Number($(this).next().html()) + 1));
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-content').append('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.rateme {
float: right;
font-size: 18px;
color: #1A1002;
background: #BEA683;
padding: 3px 5px;
border-radius: 5px;
cursor: default;
opacity: 0.8;
}
</style>
Проверь, всё ли нормально располагается, а то у меня сначала надпись поехала.


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль
Космо пишет:Разве что "дизайн" пишется как Design (четыре ошибки в одном слове, боже! >.< признайся, что ты не учишь английский в школе хдд), а "специально" как "Special".
(Позорище). Да я писала это на ночь глядя, записывая, как говорю. Попробую исправить.
Косяки можно заметить, если перейти в тему. Там фальшивый цвет цитат, кодов, спойлеров, формы ответа, фона фразы "Напишите ваше сообщение и нажмите отправить", а так же кнопок "дополнительные смайлы", модераторского меню и разделителя между профилем и сообщением. Есть еще косяк в окантовке профиле - она перестала работать. А, да, меня смущает цвет окна переадресации. В общем, достаточно много. Если что, я разрешила гостям писать в темах.

Посмотреть профиль

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Ок. Давай темку отдельную создадим, чтобы тут не оффтопить?


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль
Космо, конечно.

Посмотреть профиль
Космо огромное спасибо, за все ваши коды, скрипты,  фишечки и позитив)) у меня Pun, вопросик по этим лайкам, пока зашла, увидела и тут так же.. может и не стоит теперь))  нельзя ли сделать, чтобы  кол-во голосов всегда было рядом с иконкой сбоку, а не сползало вниз   , когда сам проголосовал или у постов еще нет лайков все ровно по горизонтали, а когда попадется пост  у которого есть уже голос, выглядит немножко неаккуратно (размеры 32х32).
Еще такой момент, на лайке у мня появляется сердечко и оно гораздо светлее на форуме, в ФШ делала поярче но там словно осветляется на несколько тонов. Это не критично, просто любопытно, так и задумано?)

Посмотреть профиль

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
там словно осветляется на несколько тонов.
Так и задумано - если вами уже залайкано сообщение и новый лайк, соответственно, поставить нельзя, то кнопка становится полупрозрачной, показывая, что она неактивна.

У меня Фаерфокс и счётчик лайков располагается нормально. Какой ваш браузер? и киньте пж ссылку на свой форум.


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль
У меня IE9,  есть другие, но.. привычка) в гугле тоже внизу,   форум
аа, вон оно что с цветом, у меня из-за разных иконок не понятно)))
может не сразу отвечу, у нас в городе массированные ddos-атаки на провайдеров, все вырубает ((



Последний раз редактировалось: Ксандра (29.03.14 15:57), всего редактировалось 2 раз(а)

Посмотреть профиль

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
IE - как религия: стоял по умолчанию.
Хоть убейте, но у меня в опере, хроме, мазилке и ИЕ всё стоит ровнёхонько сбоку как на вашем, так и на моём форуме. ИЕ конкретно 9-й версии открыть не смогу, ибо юзаю сейчас везде Вин8.1 и там по умолчанию стоит 11-й.

Чтобы картинка не становилась полупрозрачной, используйте нижеследующий код. Там также косяк с надписью при кол-ве голосов больше одного исправлен.
Код:
copyrightnotice = 'Скрипт от your.roll.tv . Распространение и использование разрешено только с прикреплением этой строки.';
$(document).ready(function() {
  $('.vote').each(function() {
    if ($(this).find('.votehid').length > 0) {
      $(this).find('.voteshow').html(/[0-9]+/.exec($(this).find('.votehid').html().replace('Рейтинг сообщения: 100% (',''))[0]);
    }
    if ($(this).find('a').length > 0){
      $(this).find('a').click(function() {
        $.get($(this).attr('href'));
        $(this).next()[0].innerHTML = Number($(this).next()[0].innerHTML) + 1;
        return false;
      });
    } else {
      $(this).find('.vote-br').prepend('<img src="ССЫЛКА" />');
    }
  });
});


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль
усё поменяла, здорово, спасибо!)
я бы поставила 11, но винда неоф. катца, сижу не рыпаюсь)

Посмотреть профиль

Спонсируемый контент


Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 2 из 2]

На страницу : Предыдущий  1, 2

Права доступа к этому форуму:
Вы не можете отвечать на сообщения