|
21.10.2014, 00:08 Вверх | #1 | |||
Пользователь
|
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; } Код:
<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; } Нажми для просмотра
Код:
<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 --> Сохраняем, выходим, смотрим результат. |
|||