Trombones13
Well-known member
This modification, consisting merely of a few template edits, will move the postbit above the post, similar to many vB forums.
1. Open template message_user_info
1a. Replace template as follows:
2. Open (or switch tab from the other template) template message_user_info.css
2a. Replace template as follows:
3. Now that the postbit is moved to the top, Quick Reply looks odd with a big margin on the left side, so let's open template quick_reply.css.
3a. Find this snippet of code:
3b. Replace it with:
Note that the "padding-top: 10px;" is optional, but I felt it looked better to add some space between the "blank" postbit and the Quick Reply box.
4. In message.css, change
to
I should also note that I split the "extra info" (post count, likes count, etc.) into two columns (see attachment below) so it wouldn't become too lengthy; that can be changed at your discretion by moving the different parts of .extraUserInfo and .extraUserInfo2.
Let me know if you find any problems or have suggestions to improve the code/design. Thanks; hope you enjoy!
To add the "speech bubble" arrow back, click here for directions.
1. Open template message_user_info
1a. Replace template as follows:
Code:
<xen:require css="message_user_info.css" />
<div class="messageUserInfo" itemscope itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock">
<xen:if is="!{$isQuickReply}"><xen:if hascontent="true">
<div class="extraUserInfo">
<xen:contentcheck>
<xen:if is="@messageShowMessageCount">
<xen:if is="@messageShowRegisterDate">
<dl class="pairsInline">
<dt>{xen:phrase member_since}:</dt>
<dd>{xen:date $user.register_date}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowGender AND {$user.gender}">
<dl class="pairsInline">
<dt>{xen:phrase gender}:</dt>
<dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
</dl>
</xen:if>
<xen:if is="@messageShowOccupation AND {$user.occupation}">
<dl class="pairsInline">
<dt>{xen:phrase occupation}:</dt>
<dd itemprop="role">{xen:string censor, $user.occupation}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowLocation AND {$user.location}">
<dl class="pairsInline">
<dt>{xen:phrase location}:</dt>
<dd><a href="http://maps.google.com/maps?q={xen:urlencode {xen:string censor, $user.location}}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
</dl>
</xen:if>
<xen:if is="@messageShowHomepage AND {$user.homepage}">
<dl class="pairsInline">
<dt>{xen:phrase homepage}:</dt>
<dd><a href="{$user.homepage}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
</dl>
</xen:if>
<xen:comment>
<xen:foreach loop="{$user.identities}" key="$service" value="$account">
<dl class="pairsInline">
<dt>{$service}</dt>
<dd>{$account}</dd>
</dl>
</xen:foreach>
</xen:comment></xen:if>
</xen:contentcheck>
</div>
<div class="extraUserInfo2">
<xen:contentcheck>
<xen:if is="@messageShowMessageCount">
<dl class="pairsInline">
<dt>{xen:phrase message_count}:</dt>
<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a></dd>
</dl>
</xen:if>
<xen:if is="@messageShowTotalLikes">
<dl class="pairsInline">
<dt>{xen:phrase likes_received}:</dt>
<dd>{xen:number $user.like_count}</dd>
</dl>
</xen:if>
<xen:if is="@messageShowTrophyPoints">
<dl class="pairsInline">
<dt>{xen:phrase trophy_points}:</dt>
<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
</dl>
</xen:if>
</xen:contentcheck>
</div>
</xen:if></xen:if>
<div class="avatarHolder"><xen:avatar user="$user" size="m" itemprop="photo" /><xen:if is="!{$isQuickReply}"><h3 class="userText"><a {xen:if $user.user_id, 'href="{xen:link members, $user}" '}class="username" itemprop="name">{xen:helper richUserName, $user}</a><xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if></h3></xen:if></div>
</div>
</div>
2. Open (or switch tab from the other template) template message_user_info.css
2a. Replace template as follows:
Code:
.messageUserInfo
{
float: top;
width: {xen:calc '@property "pageWidth";
margin: 0 35px;
min-width: {xen:calc '{$pageWidth'}px;
_width: {xen:calc '{$pageWidth'}px;
_margin: 0 auto;
/*width: 976px;
margin: 0 auto;*/
@property "/pageWidth";'}px;
}
.messageUserBlock
{
@property "messageUserBlock";
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
border: 1px solid @primaryLighterStill;
border-radius: 5px;
@property "/messageUserBlock";
position: relative;
}
.messageUserBlock div.avatarHolder
{
@property "messageAvatarHolder";
background-color: @primaryLightest;
padding: 10px;
border-radius: 4px;
@property "/messageAvatarHolder";
}
.messageUserBlock div.avatarHolder a
{
display: block;
}
.messageUserBlock h3.userText
{
@property "messageUserText";
padding: 6px;
@property "/messageUserText";
}
.messageUserBlock a.username
{
@property "messageUsername";
font-weight: bold;
display: block;
overflow: hidden;
@property "/messageUsername";
}
.messageUserBlock .userTitle
{
@property "messageUserTitle";
font-size: 11px;
display: block;
@property "/messageUserTitle";
}
.messageUserBlock .extraUserInfo2
{
@property "messageExtraUserInfo2";
font-size: 11px;
background-color: @primaryLightest;
padding: 10px;
border-radius: 4px;
float: right;
@property "/messageExtraUserInfo2";
}
.messageUserBlock .extraUserInfo2 dl
{
margin: 2px 0;
}
.messageUserBlock .extraUserInfo2 dt
{
font-size: 9px;
display: block;
}
.messageUserBlock .extraUserInfo
{
@property "messageExtraUserInfo";
font-size: 11px;
background-color: @primaryLightest;
padding: 10px;
border-radius: 4px;
float: right;
@property "/messageExtraUserInfo";
}
.messageUserBlock .extraUserInfo dl
{
margin: 2px 0;
}
.messageUserBlock .extraUserInfo dt
{
font-size: 9px;
display: block;
}
.messageUserBlock .arrow
{
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageUserBlock.border-color;
border-right: none;
/* Hide from IE6 */
_display: none;
}
.messageUserBlock .arrow span
{
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageAvatarHolder.background-color;
border-right: none;
}
3. Now that the postbit is moved to the top, Quick Reply looks odd with a big margin on the left side, so let's open template quick_reply.css.
3a. Find this snippet of code:
Code:
#QuickReply
{
margin-left: 140px;
}
Code:
#QuickReply
{
padding-top: 10px;
}
4. In message.css, change
Code:
.message .messageInfo
{
margin-left: 140px;
}
Code:
.message .messageInfo
{
margin-top: 20px;
}
I should also note that I split the "extra info" (post count, likes count, etc.) into two columns (see attachment below) so it wouldn't become too lengthy; that can be changed at your discretion by moving the different parts of .extraUserInfo and .extraUserInfo2.
Let me know if you find any problems or have suggestions to improve the code/design. Thanks; hope you enjoy!
To add the "speech bubble" arrow back, click here for directions.