Изображение
Делаем вывод комментариев на форуме phpbb необычным.

Для реализации такого вывода комментариев нам потребуется внести небольшие правки в шаблон viewtopic_body.html и добавить стили.
В примере используется стандартный prosilver, и версии с jquery и без.


Открываете шаблон viewtopic_body.html, находите в нём:

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

<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">
добавляете к найденному новый класс modern_post:

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

<div id="p{postrow.POST_ID}" class="modern_post post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">
Чуть ниже находите:

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

<p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF -->{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> &raquo; {postrow.POST_DATE} </p>
и меняете на:

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

<p class="author">{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> <br /> {postrow.POST_DATE} <!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF --></p>
  • Здесь мы просто меняем данные местами. Листок ведущий на сообщение ставим последним и добавляем перенос строки <br />, между ником и датой.
Далее. Идём ниже, находим:

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

<!-- IF not postrow.S_IGNORE_POST -->
<dl class="postprofile" id="profile{postrow.POST_ID}">
jQuery. Если вы хотите использовать версию с jquery, то меняете содержимое на:

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

<!-- IF not postrow.S_IGNORE_POST -->
<div class="profile drop_down">
<!-- IF postrow.POSTER_AVATAR -->
<span class="profilebutton" title="{L_READ_PROFILE}"><!-- IF postrow.U_POST_AUTHOR -->{postrow.POSTER_AVATAR}<!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></span>
<!-- ELSE -->
<span class="profilebutton" title="{L_READ_PROFILE}"><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="avatar" /></span>
<!-- ENDIF -->
<dl class="postprofile" id="profile{postrow.POST_ID}" style="display: none">
Без jquery. Если у вас не подключена библиотека jquery и вы не собираетесь её подключать, то меняете содержимое на:

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

<!-- IF not postrow.S_IGNORE_POST -->
<div class="profile">
<!-- IF postrow.POSTER_AVATAR -->
<span class="profilebutton" title="{L_READ_PROFILE}" onclick="hm = document.getElementById('profile{postrow.POST_ID}'); if (hm.style.display == 'none') {hm.style.display='block'} else {hm.style.display='none'}return false;"><!-- IF postrow.U_POST_AUTHOR -->{postrow.POSTER_AVATAR}<!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></span>
<!-- ELSE -->
<span class="profilebutton" title="{L_READ_PROFILE}" onclick="hm = document.getElementById('profile{postrow.POST_ID}'); if (hm.style.display == 'none') {hm.style.display='block'} else {hm.style.display='none'}return false;"><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="avatar" /></span>
<!-- ENDIF -->
<dl class="postprofile" id="profile{postrow.POST_ID}" style="display: none">
<dd class="close"><span title="{L_COLLAPSE_VIEW}" onclick="document.getElementById('profile{postrow.POST_ID}').style.display='none'; return false;">&#10005;</span></dd>
Находите:

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

</dl>
<!-- ENDIF -->
и меняете на:

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

</dl>
</div>
<!-- ENDIF -->
Для версии без jquery ничего добавлять не требуется, открытие и закрытие профиля прописано прямо в шаблоне и выглядеть будет так:
Изображение
Если вы используете версию с jquery, то необходимо добавить скрипт для открытия профиля. Открываете шаблон overall_header.html, перед </head> добавляете:

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

<!-- IF S_VIEWTOPIC -->
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown( $('.drop_down') );
$(document).click(function() {
$('.drop_down').removeClass('active');
});
});
</script>
<!-- ENDIF -->
С правками шаблонов закончено. Осталось добавить стили, чтобы вся наша конструкция правильно отображалась. Открываете ваш стиль (content.css), находите:

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

dl.pmlist dd {
margin-left: 61% !important;
margin-bottom: 2px;
}
Добавляете после:

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

/* Modern comment styles :: v.1.0 (http://cabinetadmina.ru/)
----------------------------------------*/
.modern_post {
position: relative;
}

.modern_post.online {
background-image: none;
}

/* Post body styles */
.modern_post .postbody {
width: auto;
float: none;
padding-left: 65px;
}

.modern_post .postbody h3 {
display: none;
}

.modern_post .postbody p.author {
font-size: 1.1em;
font-family: Tahoma, Arial, sans-serif;
padding-top: 3px;
}

.modern_post .postbody p.author strong a {
font-size: 1.2em;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.4em;
}

/* Poster profile block */
.modern_post.online .profile:before {
position: absolute;
content: '';
width: 10px;
height: 10px;
bottom: -6px;
right: -6px;
color: #3DBE00;
font-size: 20px;
background: #3DBE00;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.modern_post.bg1.online .profile:before {
border: 3px solid #ECF3F7;
}

.modern_post.bg2.online .profile:before {
border: 3px solid #e1ebf2;
}

.modern_post .profile {
position: absolute;
top: 10px;
left: 10px;
}

.profilebutton {
cursor: pointer;
}

.profilebutton img {
max-width: 48px;
max-height: 48px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.modern_post .postprofile {
float: none;
width: auto;
display: none;
position: absolute;
top: 20px;
left: 50px;
background: #FFFFFF;
color: #666666;
z-index: 9;
min-width: 360px;
padding: 5px 0;
-moz-box-shadow: 0 2px 8px #999;
box-shadow: 0 2px 8px #999;
}

.modern_post .active .postprofile {
display: block !important;
}
Для версии без jquery. В конце стиля:

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

.modern_post .active .postprofile {
display: block !important;
}
заменить на:

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

.modern_post .close {
float: right;
padding-right: 8px;
}

.modern_post .close span {
cursor: pointer;
font-size: 1.3em;
}
Комментарии: 28

BezDelnikРафаил 01 дек 2014, 09:46 Сообщение

А онлайн иконку , можно сделать мигающей , ну что бы она не просто показывала, а мигала если пользователя онлайн ?
  • 0
http://forum.luckbb.ru/

silver073000Василий 01 дек 2014, 15:01 Сообщение

Как вариант, просто заменить стандартную картинку на меняющуюся :)
  • 0

CabinetAdmin 01 дек 2014, 16:49 Сообщение

Заменить цвет в background на мигающую картинку, размером 10x10px.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

BezDelnikРафаил 01 дек 2014, 17:49 Сообщение

А можно поднять картинку онлайн в верхний левый угол ?
  • 0
http://forum.luckbb.ru/

CabinetAdmin 01 дек 2014, 18:06 Сообщение

Можно. Поменять bottom: -6px; и right: -6px; на top: -6px; и left: -6px;.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

BezDelnikРафаил 02 дек 2014, 06:28 Сообщение

Да и ещё вопрос , а можно вот эту онлайн иконку вывести на главную к аватарке ?
  • 0
http://forum.luckbb.ru/

BezDelnikРафаил 02 дек 2014, 08:37 Сообщение

В профиль просто добавить иконку онлайн в уголок ,
Хочу сделать так !
Модернизация вывода комментариев. - bandicam 2014-12-02 11-33-36-531.jpg
И сюда ! добавить тоже иконку онлайн
Модернизация вывода комментариев. - bandicam 2014-12-02 11-33-47-390.jpg
Модернизация вывода комментариев. - bandicam 2014-12-02 11-33-47-390.jpg (13.18 КБ) 1299 просмотров
Так можно сделать ?
  • 0
http://forum.luckbb.ru/

CabinetAdmin 02 дек 2014, 15:55 Сообщение

Ну если смотреть логически, если вы видите свою аватарку на главной странице, то понятное дело вы в онлайне! :)

Но если хочется, то почему и нет.
Найти .user_menu_photo { и добавить к найденному position: relative;.
Добавить:

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

.user_menu_photo:before {
position: absolute;
content: '';
width: 10px;
height: 10px;
bottom: -6px;
right: -6px;
color: #3DBE00;
font-size: 20px;
background: #3DBE00;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
И уже по месту выставить оптимальные значения.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 02 дек 2014, 17:08 Сообщение

CabinetAdmin писал(а):Ну если смотреть логически, если вы видите свою аватарку на главной странице, то понятное дело вы в онлайне! :)
Да и плюс к тому рамка на аватарке светится :)
  • 0

BezDelnikРафаил 03 дек 2014, 05:20 Сообщение

Ну а как в профиль добавить онлайн картинку ?
Изображение
  • 0
http://forum.luckbb.ru/

CabinetAdmin 03 дек 2014, 20:39 Сообщение

BezDelnik » Сегодня, 07:20 писал(а):Ну а как в профиль добавить онлайн картинку ?
Картинку онлайн в этом моде? Или речь о стандартном профиле?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

BezDelnikРафаил 04 дек 2014, 07:53 Сообщение

В стандартный профиль , можно сделать или нет ?
  • 0
http://forum.luckbb.ru/

BezDelnikРафаил 04 дек 2014, 16:33 Сообщение

а то что-то не могу прикрутить
  • 0
http://forum.luckbb.ru/

CabinetAdmin 04 дек 2014, 20:21 Сообщение

Можно сделать. Только это не относится к обсуждаемой теме. Создавайте отдельную тему, разберём этот вопрос.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы