Делаем вывод комментариев на форуме phpbb необычным.
Для реализации такого вывода комментариев нам потребуется внести небольшие правки в шаблон
В примере используется стандартный prosilver, и версии с jquery и без.
Открываете шаблон
добавляете к найденному новый класс
Чуть ниже находите:
и меняете на:
jQuery. Если вы хотите использовать версию с jquery, то меняете содержимое на:
Без jquery. Если у вас не подключена библиотека jquery и вы не собираетесь её подключать, то меняете содержимое на:
Находите:
и меняете на:
Для версии без jquery ничего добавлять не требуется, открытие и закрытие профиля прописано прямо в шаблоне и выглядеть будет так:
Если вы используете версию с jquery, то необходимо добавить скрипт для открытия профиля. Открываете шаблон
С правками шаблонов закончено. Осталось добавить стили, чтобы вся наша конструкция правильно отображалась. Открываете ваш стиль (
Добавляете после:
Для версии без jquery. В конце стиля:
заменить на:
Для реализации такого вывода комментариев нам потребуется внести небольшие правки в шаблон
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> » {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}">
Код: Выделить всё
<!-- 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">
Код: Выделить всё
<!-- 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;">✕</span></dd>
Код: Выделить всё
</dl>
<!-- ENDIF -->
Код: Выделить всё
</dl>
</div>
<!-- ENDIF -->
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;
}
Код: Выделить всё
.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
Ну если смотреть логически, если вы видите свою аватарку на главной странице, то понятное дело вы в онлайне!
Но если хочется, то почему и нет.
Найти
Добавить:
И уже по месту выставить оптимальные значения.
Но если хочется, то почему и нет.
Найти
.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;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Картинку онлайн в этом моде? Или речь о стандартном профиле?BezDelnik » Сегодня, 07:20 писал(а):Ну а как в профиль добавить онлайн картинку ?
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
За основу можно взять расширение Application Form
Источник: Название расширения - Автор формы заявки
Скачать: для версий phpBB 3.1.x, phpBB 3.2.x,... -
1) Название расширения: loginredirect редирект - Войти Перенаправить
Скачать: Версия 2.1.0 - RC2 github.com вроде даже как для 3.3.2 ( страница...