Пользователь
Доп. информация
|
Регистрация: 18.10.2014
Сообщений: 16
Поблагодарил(а): 6
Поблагодарили: 3 / 3
|
|
Postbit [Severov]
Копался сегодня в пятерочке, решил немного стилизовать дефолтный postbit.
Вот, что из этого вышло:
1) Открываем шаблон - conversation_userinfo, удаляем содержимое целиком и полностью) И вставляем следующее:
Нажми для просмотра
Код:
{vb:set schemaAuthor.itemprop, author}
{vb:set schemaAuthor.itemscope, 1}
{vb:set schemaAuthor.itemtype, http://schema.org/Person}
<div class="userinfo b-userinfo b-post__hide-when-deleted" {vb:schema {vb:raw schemaAuthor}}>
{vb:set userInfo, {vb:raw conversation.userinfo}}
<div style="padding-right: 30px;width: 150px;" class="b-userinfo__details">
<div class="author h-text-size--14"><strong><vb:if condition="$conversation['userid'] > 0"><a href="{vb:url 'profile', {vb:raw conversation}}" {vb:schema schemaAuthor}><vb:if condition="isset($conversation['musername'])">{vb:raw conversation.musername}<vb:else />{vb:raw conversation.authorname}</vb:if></a><vb:else />{vb:phrase guest}</vb:if></strong></div>
<vb:if condition="$user['showavatars']">
<vb:if condition="!$conversation['userid']">
<span class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw baseurl_corecdn}/images/default/default_avatar_medium.png" width="64" height="64" alt="{vb:phrase guest_avatar}" title="{vb:phrase guest_avatar}" /></span>
<vb:elseif condition="$conversation['senderAvatar'] AND $conversation['senderAvatar']['avatarpath'] AND $conversation['senderAvatar']['hascustom']" />
<a href="{vb:url 'profile', {vb:raw conversation}}" class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw baseurl_corecdn}/{vb:raw conversation.senderAvatar.avatarpath}" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></a>
<vb:elseif condition="$conversation['avatar'] AND $conversation['avatar']['avatarpath'] AND $conversation['avatar']['hascustom']" />
<a href="{vb:url 'profile', {vb:raw conversation}}" class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw baseurl_corecdn}/{vb:raw conversation.avatar.avatarpath}" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></a>
<vb:else />
<div class="post_avatar"><a href="{vb:url 'profile', {vb:raw conversation}}" class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw baseurl_corecdn}/images/default/default_avatar_medium.png" width="64" height="64" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></a></div>
</vb:if>
</vb:if>
<!-- responsive alteration: Added userinfo-details wrapper in order to
support left floated avatar with all other information on the right. -->
<div class="postbit_field">
{vb:set schemaAuthor.itemprop, name}
<vb:if condition="!empty($userInfo['usertitle'])">
<div class="usertitle">
<vb:if condition="$userInfo['customtitle'] == 2">
{vb:var userInfo.usertitle}
<vb:else />
{vb:raw userInfo.usertitle}
</vb:if>
</div>
</vb:if>
{vb:set reputationimglevel {vb:raw conversation.reputationimg.level}}
<div class="b-userinfo__rank h-margin-top-s{vb:if empty($userInfo['rank']), ' h-hide'}">{vb:raw userInfo.rank}</div>
<ul class="b-userinfo__additional-info-block h-margin-top-xl">
<vb:if condition="$conversation['userid'] > 0">
<li class="b-userinfo__additional-info"><label>С нами:</label> <span>{vb:date {vb:raw userInfo['joindate']}, 'registered'}</span></li>
<li class="b-userinfo__additional-info"><label>{vb:phrase posts}:</label> <span>{vb:raw userInfo['posts']}</span></li>
<vb:if condition="$conversation['postelements'] == 4">
<li class="b-userinfo__additional-info"><label>{vb:phrase infractions}:</phrase><span>{vb:raw conversation.warnings}/{vb:raw conversation.infractions} ({vb:raw conversation.ipoints})</span></li>
</vb:if>
</vb:if>
{vb:hook 'conversation_userstats'}
</ul>
<ul class="b-userinfo__icons h-margin-none OLD__userinfo-extra OLD__icons">
<vb:if condition="$conversation['online'] == 'online'">
{vb:set olstatus, ' online'}
<vb:else />
{vb:set olstatus, ' offline'}
</vb:if>
<li class="b-userinfo__icon h-left OLD__online-status{vb:raw olstatus}" title="<vb:if condition="$olstatus == ' online'">{vb:rawphrase x_is_online_now, {vb:raw conversation.authorname}}<vb:else />{vb:rawphrase x_is_offline, {vb:raw conversation.authorname}}</vb:if>"><span class="b-icon b-icon__status--<vb:if condition="$conversation['online']=='online'">green<vb:else />gray</vb:if>"></span></li>
{vb:template conversation_signature, type=collapsed, conversation={vb:raw conversation}, collapsedClass="b-userinfo__icon h-left"}
</ul>
</div>
</div>
</div>
2) Открываем css_additional.css (По дефолту он пустой). вставляем следующее:
Нажми для просмотра
Код:
.postbit_field {
margin-top: -4px;
}
.usertitle {
width: 150px;
height: 20px;
padding-top: 3px;
background: rgb(245, 245, 245);
border: 1px solid rgb(160, 160, 160);
border-radius: 4px;
margin-top: 2px;
}
.b-userinfo__additional-info {
width: 150px;
height: 20px;
padding-top: 3px;
background: rgb(245, 245, 245);
border: 1px solid rgb(160, 160, 160);
border-radius: 4px;
margin-top: 2px;
}
3) Открываем шаблон - css_b_avatar.css, удаляем содержимое, вставляем следующее:
Код:
<vb:if condition="!empty($example)">
<vb:comment>BEGIN DOCUMENTATION</vb:comment>
<vb:comment>END DOCUMENTATION</vb:comment>
<vb:else />
<vb:comment>BEGIN CSS RULES</vb:comment>
<vb:comment>
/*--------------------------------------
* AVATAR
*------------------------------------*/
</vb:comment>
.b-avatar {
display: inline-block;
height:32px;
width:32px;
border: {vb:stylevar activity_stream_avatar_border};
}
.b-avatar > img {
max-height:32px;
max-width:32px;
}
.b-avatar--m {
height:150px;
width:150px;
}
.b-avatar--m > img {
max-height:150px;
max-width:150px !important;
}
.b-avatar--s {
height:55px;
width:55px;
}
.b-avatar--s > img {
max-height:55px;
max-width:55px !important;
}
.b-avatar--xs {
height:24px;
width:24px;
}
.b-avatar--xs > img {
max-height:24px;
max-width:24px !important;
}
.b-avatar--xxs {
height:18px;
width:18px;
}
.b-avatar--xxsm > img {
max-height:18px;
max-width:18px !important;
}
.b-avatar--thread {
border: {vb:stylevar thread_view_avatar_border};
}
<vb:comment>END CSS RULES</vb:comment>
</vb:if>
4) Открываем шаблон - css_b_userinfo, удаляем содержимое, вставляем следующее:
Нажми для просмотра
Код:
<vb:if condition="!empty($example)">
<vb:comment>BEGIN DOCUMENTATION</vb:comment>
<vb:comment>END DOCUMENTATION</vb:comment>
<vb:else />
<vb:comment>BEGIN CSS RULES</vb:comment>
<vb:comment>
/*--------------------------------------
* USER INFO
*------------------------------------*/
</vb:comment>
.b-userinfo {
text-align: center;
color: {vb:stylevar post_user_info_color};
padding-top: 10px;
}
.b-userinfo__rank {
/* TODO: is this really the stylevar we want to use? */
color: {vb:stylevar post_controls_text_color};
}
.b-userinfo__icons {
position: absolute;
bottom: 10px;
{vb:stylevar left}: 10px;
}
.b-userinfo__icon {
text-align: center;
width: 16px;
height: 16px;
margin-{vb:stylevar right}: 4px;
}
.b-userinfo__icon:last-child {
margin-{vb:stylevar right}: 0;
}
.l-small .b-userinfo {
text-align: {vb:stylevar left};
padding: 10px;
}
.l-small .b-userinfo .b-avatar,
.l-small .b-userinfo__details,
.l-small .b-userinfo__additional-info {
display: inline-block;
vertical-align: top;
}
.l-small .b-userinfo .b-avatar {
margin-{vb:stylevar right}: 5px;
}
.l-small .b-userinfo__details .b-meter,
.l-small .b-userinfo__additional-info-block {
margin-top: 5px;
}
.l-small .b-userinfo__additional-info {
margin-{vb:stylevar right}: 10px;
}
.l-small .b-userinfo__icons {
top: 10px;
bottom: auto;
{vb:stylevar left}: auto;
{vb:stylevar right}: 10px;
}
<vb:comment>END CSS RULES</vb:comment>
</vb:if>
5) Открываем шаблон - css_utilities.css, ищем:
Код:
.h-margin-top-xl {
margin-top: 10px;
}
Заменяем на:
Код:
.h-margin-top-xl {
margin-top: 0px;
}
6) Открываем шаблон - display_contenttype_threadview_header, удаляем содержимое, вставляем следующее:
Нажми для просмотра
Код:
<vb:if condition="$conversationtype == 'starter' and $contenttype == 'poll'">
{vb:data canVote, user, hasPermissions, forumpermissions, canvote, {vb:raw conversation.nodeid}}
<vb:if condition="!$user['userid']">{vb:set canVote, 0}</vb:if>
</vb:if>
{vb:set postStatus, ''}
<vb:if condition="$conversationtype == 'starter'">
{vb:set optionsArray['showInlineMod'], {vb:raw showInlineMod}}
{vb:action enableInlineMod, permission, showInlinemodMenu, {vb:raw conversation}, '', {vb:raw optionsArray}}
</vb:if>
<vb:if condition="$conversationtype == 'reply'">
<vb:comment>Matched from display_contenttype_threadview_footer. @TODO refactor</vb:comment>
<vb:if condition="isset($showInlineMod) AND $showInlineMod AND !empty($conversation['permissions']) AND $conversation['permissions']['canmoderate']">
{vb:set enableInlineMod, 1}
</vb:if>
</vb:if>
<vb:if condition="$conversation['approved'] == 0">
{vb:strcat postStatus, ' unapproved b-post--unapproved'}
</vb:if>
<vb:if condition="$conversation['featured']">
{vb:strcat postStatus, ' featured b-post--featured'}
</vb:if>
<vb:if condition="$conversation['unpublishdate']">
{vb:strcat postStatus, ' deleted b-post--deleted'}
</vb:if>
{vb:set nodeSchemaInfo.itemscope, 1}
<vb:if condition="$conversationtype == 'starter'">
<vb:if condition="$contenttype == 'video'">
{vb:set nodeSchemaInfo.itemtype, http://schema.org/VideoObject}
<vb:else />
{vb:set nodeSchemaInfo.itemtype, http://schema.org/CreativeWork}
</vb:if>
<vb:else />
{vb:set nodeSchemaInfo.itemtype, http://schema.org/Comment}
</vb:if>
{vb:set nodeMicrodata, {vb:schema {vb:raw nodeSchemaInfo}}}
<li data-node-id="{vb:raw conversation.nodeid}" class="b-post js-post js-comment-entry__parent h-restore--on-preview b-post--{vb:raw contenttype} <vb:if condition="$conversationtype == 'starter'">b-post--first</vb:if> OLD__list-item{vb:raw postStatus} OLD__list-item-{vb:raw contenttype} OLD__conversation-{vb:raw conversationtype} js-conversation-{vb:raw conversationtype} h-left h-clear<vb:if condition="$enableInlineMod"> inlinemod-item</vb:if> js-slideshow__gallery-node js-poll__parent" {vb:raw nodeMicrodata}>
<a id="post{vb:raw conversation.nodeid}" class="anchor"></a>
<vb:if condition="!empty($nodeMicrodata)">
{vb:set schemaInfo.tag, meta}
{vb:set schemaInfo.itemprop, name}
{vb:set schemaInfo.content, {vb:raw conversation.title}}
<vb:if condition="$contenttype == 'link'">
{vb:set urlInfo, {vb:raw conversation}}
{vb:set urlInfo.innerPost, {vb:raw conversation.nodeid}}
</vb:if>
{vb:set schemaInfo.itemprop, url}
{vb:set schemaInfo.content, {vb:url {vb:raw conversation.routeid}, {vb:raw conversation}}}
{vb:schema {vb:raw schemaInfo}}
</vb:if>
<a id="post{vb:raw nodeid}" class="anchor"></a>
<div style="padding-left: 10px;" class="l-row l-row__fixed--left">
<div class="l-col__fixed-3 l-col__small--full h-hide--on-preview h-padding-right-l">
{vb:template conversation_userinfo, conversation={vb:raw conversation}}
</div>
<div class="js-post__content-wrapper l-col__flex-3 l-col__small--full h-restore--on-preview OLD__list-item-body-wrapper">
<div class="b-post__body h-restore--on-preview h-padding-horiz-xxl h-padding-top-xl h-padding-bottom-m h-clearfix">
<vb:if condition="$conversation['unpublishdate']">
<vb:if condition="
($conversation['moderatorperms']['canundeleteposts'] > 0) OR
($conversation['moderatorperms']['canremoveposts'] > 0)
">
{vb:set canViewSoftdeletedNode, 1}
<vb:else />
{vb:set canViewSoftdeletedNode, 0}
</vb:if>
<div class="b-media b-post__unpublish-info h-padding-bottom-l">
<div class="b-media__img--rev">
<vb:if condition="$canViewSoftdeletedNode">
<label class="js-post__manage b-link OLD__manage OLD__jsPseudoLink">{vb:phrase manage}</label>
| <label class="js-post__show-hide js-post__show-hide--show b-link" data-toggle-text="{vb:phrase hide}">{vb:phrase show}</label>
</vb:if>
</div>
<div class="b-media__body">
<div class="b-post__date OLD__post-date">
{vb:datetime {vb:raw conversation.unpublishdate}}
</div>
<vb:if condition="!empty($conversation['deleteuserid']) AND !empty($conversation['deleteusername'])">
{vb:set deleteUserInfo.userid, {vb:var conversation.deleteuserid}}
{vb:set deleteuserlink, {vb:url 'profile', {vb:raw deleteUserInfo}}}
{vb:set deleteusername, {vb:raw conversation.deleteusername}}
<vb:else />
{vb:set deleteusername, {vb:rawphrase unknown}}
{vb:set deleteuserlink, '#'}
</vb:if>
<div class="b-post__delete-note OLD__delete-note">
{vb:rawphrase this_topic_by_x_has_been_deleted_by_y_link, {vb:raw conversation.authorname}, {vb:raw deleteuserlink}, {vb:raw deleteusername}}
</div>
<vb:if condition="!empty($conversation['deletereason'])">
<div class="b-post__delete-reason OLD__delete-reason"><label>{vb:phrase reason}:</label> {vb:var conversation.deletereason}</div>
</vb:if>
</div>
</div>
</vb:if>
<!-- REPLY -->
<!--vb:if condition="!$conversation['unpublishdate'] OR $canPhysicallyDeletePost"-->
<!-- /REPLY -->
<div class="b-post__content js-post__content b-post__hide-when-deleted">
<hr class="b-divider--section OLD__section-divider" />
<div class="b-media h-hide--on-preview">
<div class="b-media__img--rev">
<vb:if condition="!empty($contentHook)">
{vb:hook {vb:raw contentHook}}
</vb:if>
{vb:set starterRoute, {vb:raw conversation.starterroute}}
{vb:set starterPost.nodeid, {vb:raw conversation.starter}}
{vb:set starterPost.innerPost, {vb:raw conversation.nodeid}}
{vb:set starterPost.innerPostParent, {vb:raw conversation.starter}}
<vb:if condition="$conversationtype == 'starter' AND !$hidePostIndex">
<a class="b-post__count" href="{vb:url {vb:raw starterRoute}, {vb:raw starterPost}}">#<vb:if condition="isset($postIndex) AND intval($postIndex) >= 0">{vb:raw postIndex}<vb:else />1</vb:if>
</a>
</vb:if>
<vb:if condition="$conversationtype == 'reply' AND !$hidePostIndex AND isset($postIndex) AND $postIndex >= 0 AND !empty($pagingInfo)">
<a class="b-post__count" href="{vb:url {vb:raw starterRoute}, {vb:raw starterPost}}">#{vb:math ({vb:var postIndex} + ({vb:var pagingInfo.currentpage} - 1) * {vb:var pagingInfo.perpage}) + 1}</a>
</vb:if>
<vb:if condition="!empty($enableInlineMod)">
<span class="b-inlinemod__checkbox OLD__checkbox">
<vb:if condition="$conversation['approved'] == 0">
<span class="js-unapprove-label b-inlinemod__checkbox-text">{vb:phrase unapproved}</span>
</vb:if>
<input class="cb_inlinemod b-form-control__control" type="checkbox" name="node[]" value="{vb:raw conversation.nodeid}" />
</span>
</vb:if>
</div>
<div class="b-media__body">
<vb:if condition="$conversationtype == 'starter'">
<h2 class="b-post__title OLD__post-title">
<vb:if condition="$conversation['iconid']">
<img src="{vb:var baseurl_core}/images/icons/icon{vb:var conversation.iconid}.png" width="16" height="16" alt="" />
</vb:if>
<vb:if condition="$conversation['prefixid']">
{vb:set searchStr, '{"prefix":["'}
{vb:strcat searchStr, {vb:var conversation.prefixid}, '"]}'}
<a href="{vb:url 'search'}?searchJSON={vb:urlencode {vb:raw searchStr}}">{vb:raw conversation.prefix_rich}</a>
</vb:if>
{vb:raw conversation.title}
</h2>
</vb:if>
{vb:set createdSchema.itemprop, dateCreated}
{vb:set createdSchema.datetime, {vb:raw conversation.created}}
<div class="b-post__timestamp OLD__post-date"><time {vb:schema {vb:raw createdSchema}}>{vb:datetime {vb:raw conversation.created}}</time></div>
</div>
</div>
<div class="OLD__post-content h-padding-vert-xl">
<vb:if condition="$adlocation">
<div class="axd axd_{vb:raw adlocation}">
{vb:set adtemplatename, 'ad_'}
{vb:strcat adtemplatename, {vb:raw adlocation}}
{vb:template {vb:raw adtemplatename}}
</div>
</vb:if>
{vb:set textSchema.itemprop, text}
<div class="js-post__content-text OLD__post-content-text restore h-wordwrap" {vb:schema {vb:raw textSchema}}>
{vb:action parsedText, bbcode, parseNodeText, {vb:var conversation.nodeid}, 0, {vb:var page.contentpagenum}}
{vb:raw parsedText}
</div>
</div>
<!-- REPLY -->
<!--/vb:if-->
<!-- /REPLY -->
Сохраняем, выходим, смотрим результат.
|