1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Move postbit horizontally above posts

Discussion in 'Template Modifications [Archive]' started by Trombones13, Oct 20, 2010.

  1. Trombones13

    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:
    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;
    }
    3b. Replace it with:
    Code:
    #QuickReply
    {
    	padding-top: 10px;
    }
    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
    Code:
    .message .messageInfo
    {
    margin-left: 140px;
    }
    to
    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.

    XF Postbit at top 3.png
     
    kkm323, Nonstopname, Shelley and 4 others like this.
  2. Blandt

    Blandt Well-Known Member

    Quick note:

    The screen capture you took doesn't look comforting :D

    Make another !!
     
    Rob Fritz likes this.
  3. Trombones13

    Trombones13 Well-Known Member

    *makes another*
    Not sure what you're looking for by "comforting," but how's that, haha? :D *grumbles at smaller-than-desired image and goes to bed*
     
    Rob Fritz likes this.
  4. Blandt

    Blandt Well-Known Member

    haha By pasting the code up there, it looks like everything went haywire :D not something anyone would want to see :D
     
    Trombones13 likes this.
  5. anotheralias

    anotheralias Well-Known Member

    Thanks so much! Some people do prefer this layout, and there was no way I was going to attempt it myself.
     
  6. Nonstopname

    Nonstopname Member

    hey this is good, however dont forget to add the " > " to \/

    you know what i mean right? just like in Xenforo avatar using >
    so it would be good if you put it \/ under the avatar
    just my 2cents
     
  7. Trombones13

    Trombones13 Well-Known Member

    Sure--I left it off originally, but that can be added back fairly easily:

    1. In message_user_info:
    Above the final two </div> codes, add this code (note: it's already there in the original):
    Code:
    <span class="arrow"><span></span></span>
    2. In message_user_info.css:
    Replace everything below .messageUserBlock .arrow with this (just changing directions here):
    Code:
    		.messageUserBlock .arrow
    		{
    			position: absolute;
    			left: 10px;
    			bottom: -10px;
    			display: block;
    			width: 0px;
    			height: 0px;
    			line-height: 0px;
    			border: 10px solid transparent;
    			border-top-color: @messageUserBlock.border-color;
    			border-bottom: none;
    			/* Hide from IE6 */
    			_display: none;
    		}
    			.messageUserBlock .arrow span
    			{
    				position: absolute;
    				right: -10px;
    				top: -11px;
    				display: block;
    				width: 0px;
    				height: 0px;
    				line-height: 0px;
    				border: 10px solid transparent;
    				border-top-color: @messageAvatarHolder.background-color;
    				border-bottom: none;
    			}
    XF Postbit at top arrow.png
     
  8. Peggy

    Peggy Well-Known Member

    Interesting. I'm sure that this will be a popular mod.
    Thanks for your work on it. :)
     
  9. Shelley

    Shelley Well-Known Member

    Interesting indeed. I'll give this a try later. Thanks for posting. :)
     
  10. Nonstopname

    Nonstopname Member

    my style is messed up after the edit, is this because im using the fixed width?
     
  11. Trombones13

    Trombones13 Well-Known Member

    Could I see a link/screen cap? (Or is there somewhere to switch to or download the fixed width style on my board to check?)

    Thanks for the feedback so far, everyone. :)
     
  12. Nonstopname

    Nonstopname Member

    in admincp

    Style Properties: General
    Page width controller
    set to width 976px
    blah.png
     
  13. Trombones13

    Trombones13 Well-Known Member

    Hmm; this seems to fix it:

    In message_user_info.css, edit lines 6 and 7:
    Code:
    min-width: {xen:calc '{$pageWidth'}px;
    _width: {xen:calc '{$pageWidth'}px;
    I'll edit the code in the original post. Thanks for alerting me to it.

    Quick Reply seems to go with whatever size you're at when you load the page (for example, when I have the window smaller, QR doesn't resize when I maximize the window). :/
     
  14. Nonstopname

    Nonstopname Member

    edit, and it works, but in my attachment
    testing code testing isnt under avatar, but stays in the middle.

    [​IMG]
     
  15. Shelley

    Shelley Well-Known Member

    It's a nice idea but it still needs a bit of work. After testing it on my local hosting there are padding/size issues (code box) was one I noticed. I'll re-visit this template modification at a later date though. :)
     
    D37 likes this.
  16. Trombones13

    Trombones13 Well-Known Member

    Hrm... I'll take a look at things and see if there's stuff I can fix. Sorry about that! :(
     
  17. Nonstopname

    Nonstopname Member

    its okay, take it easy trombones, you have brought a new level of postbit system :)
     
  18. Floris

    Floris Guest

    I really don't like this. I can't imagine why people want this. Unless they want to throw in a huge banner in that whitespace it creates on every post. It breaks the flow of reading dramatically.
     
    Miko likes this.
  19. Trombones13

    Trombones13 Well-Known Member

    I quite like the way XF handles the postbit on the left side, but some people (see quote) will want to continue using the style they're used to in vB, and this would provide that option if they so choose to use it. *shrug* To each his own, I suppose... :)
     
  20. Nonstopname

    Nonstopname Member

    Hey Flo, we need info about message count, trophy, likes, and if it stay like xf default, you will see one post will take too much space, if using this postbit, then messagecount,trophy will stay on the right, and save space.
     

Share This Page