Postbit vBulletin 5.X.X

Severov · 09.02.2016

Копался в пятерке, решил немного стилизовать дефолтный postbit.
Может кому пригодится

Вот, что из этого вышло:

1) Открываем шаблон - conversation_userinfo, удаляем содержимое целиком и полностью) И вставляем следующее:
HTML:
{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>

	
		<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 (По дефолту он пустой). вставляем следующее:

PHP:

.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, удаляем содержимое, вставляем следующее:

PHP:

<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, удаляем содержимое, вставляем следующее:

PHP:

<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, удаляем содержимое, вставляем следующее:

PHP:

<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>    <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>   

Сохраняем, выходим, смотрим результат.

Postbit vBulletin 5.X.X

Severov