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.

[Beta 2] Transform message links into buttons (no images)

Discussion in 'Template Modifications [Archive]' started by dutchbb, Oct 28, 2010.

  1. dutchbb

    dutchbb Well-Known Member

    As requested here.

    buttons.png

    Open:
    ACP > Appearance > Templates > find "message.css"

    Replace the entire content with:
    Code:
    .messageList .message
    {
    	@property "message";
    	padding-top: 10px;
    	padding-bottom: 30px;
    	border-bottom: 1px solid @primaryLighterStill;
    	@property "/message";
    	/* note this change does offset quote/bbcode boxes by their top margin... maybe that doesn't matter?
    	padding-top: 10px;
    	padding-bottom: 30px; */
    }
    
    {xen:helper clearfix, '.messageList .message'}
    
    /*** Message block ***/
    
    .message .messageInfo
    {
    	@property "messageInfo";
    	margin-left: 140px;
    	@property "/messageInfo";
    }
    
    	.message .messageInfo.primaryContent
    	{
    		padding: 0;
    		border-bottom: none;
    	}
    
    	.message .newIndicator
    	{
    		@property "messageNewIndicator";
    		font-weight: bold;
    		font-size: 10px;
    		color: @contentBackground;
    		background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    		padding: 1px 5px;
    		margin: -5px -5px 5px 5px;
    		border: 1px solid @primaryLight;
    		border-radius: 3px;
    		border-top-right-radius: 0px;
    		display: block;
    		float: right;
    		position: relative;
    		box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    		@property "/messageNewIndicator";
    		margin-right: -{xen:calc '@content.padding-right + 5'}px;
    	}
    		.message .newIndicator span
    		{
    			@property "messageNewIndicatorInner";
    			background-color: @primaryLight;
    			border-top-right-radius: 3px;
    			position: absolute;
    			top: -4px;
    			right: -1px;
    			width: 5px;
    			height: 4px;
    			@property "/messageNewIndicatorInner";
    		}
    
    	.message .messageContent
    	{
    		@property "messageContent";
    		min-height: 100px;
    		@property "/messageContent";
    	}
    
    		.message .messageText,
    		.message .signature
    		{
    			@property "messageText";
    			font-size: 11pt;
    			font-family: Georgia, "Times New Roman", Times, serif;
    			line-height: 1.4;
    			@property "/messageText";
    		}
    
    		.message .signature
    		{
    			@property "messageSignature";
    			font-size: 9pt;
    			padding: 5px 0 0;
    			margin-top: 5px;
    			border-top: 1px dashed @primaryLighterStill;
    			@property "/messageSignature";
    		}
    
    	.message .messageMeta
    	{
    		@property "messageMeta";
    		font-size: 11px;
    		padding: 15px 5px 5px;
    		margin: -5px;
    		overflow: hidden;
    		zoom: 1;
    		@property "/messageMeta";
    	}
    
    		.message .privateControls
    		{
    			float: left;
    		}
    
    			.message .privateControls .item
    			{
    				float: left;
    				margin-right: 10px;
    			}
    
    		.message .publicControls
    		{
    			float: right;
    		}
    
    			.message .publicControls .item
    			{
    				float: left;
    				margin-left: 10px;
    			}
    
    				.message .publicControls .reply .MultiQuote
    				{
    					visibility: hidden;
    				}
    
    					.message .publicControls .reply:hover .MultiQuote
    					{
    						visibility: visible;
    					}
    .message .publicControls a
    		{
                                    display: block;
    				text-decoration: none;
    				padding: 2px 9px 2px 9px;
    				border: 1px solid @primaryLight;
    				background: @primaryLighterStill;
    				color: @primaryDark;
    				border-radius: 5px;
    				text-shadow: 1px 1px 0px @primaryLightest;
    				outline: 0;
    }
    	.message .messageNotices
    	{
    		@property "messageNotice";
    		font-size: 11px;
    		background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    		padding: 5px;
    		margin: 10px 0;
    		border: 1px solid @secondaryLight;
    		border-radius: 5px;
    		@property "/messageNotice";
    	}
    	.message .likesSummary
    	{
    		@property "messageLikesSummary";
    		padding: 5px;
    		margin-top: 10px;
    		border: 1px solid @primaryLighterStill;
    		border-radius: 5px;
    		@property "/messageLikesSummary";
    	}
    	.message .messageText > *:first-child
    	{
    		margin-top: 0;
    	}
    
    /* inline moderation changes */
    
    .InlineModChecked .messageUserBlock,
    .InlineModChecked .messageInfo,
    .InlineModChecked .messageNotices,
    .InlineModChecked .bbCodeBlock .type,
    .InlineModChecked .bbCodeBlock blockquote,
    .placeholder.InlineModChecked .placeholderContent
    {
    	@property "inlineModChecked";
    	background: @inlineMod url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    	@property "/inlineModChecked";
    }
    
    .InlineModChecked .messageUserBlock div.avatarHolder
    {
    	background: transparent;
    }
    
    .InlineModChecked .messageUserBlock .finisher .inner
    {
    	border-left-color: rgb(255,255,200);
    }
    
    /* message list */
    
    .messageList .newMessagesNotice
    {
    	margin: 10px auto;
    	padding: 5px 10px;
    	border-radius: 5px;
    	border: 1px solid @primaryLighter;
    	background: @primaryLighterStill url(@imagePath/xenforo/gradients/category-23px-light.png) repeat-x top;
    	font-size: 11px;
    }
    
    /* deleted / ignored message placeholder */
    
    .messageList .message.placeholder
    {
    	border: none;
    	margin: 10px 0;
    	padding: 0;
    }
    
    .messageList .placeholder .placeholderContent
    {
    	overflow: hidden; zoom: 1;
    	border: 1px solid @primaryLighterStill;
    	padding: 5px;
    	border-radius: 5px;
    	color: @primaryLightish;
    	font-size: 11px;
    }
    
    	.messageList .placeholder a.avatar
    	{
    		float: left;
    		margin-right: 5px;
    		display: block;
    	}
    		.messageList .placeholder a.avatar img
    		{
    			width: 24px;
    			height: 24px;
    			display: block;
    		}
    	.messageList .placeholder .privateControls
    	{
    		margin-top: 2px;
    	}
    
    /* messages remaining link */
    
    /*.postsRemaining
    {
    	margin: 5px 0 10px;
    	text-align: right;
    }*/
    
    	.postsRemaining a,
    	a.postsRemaining
    	{
    		font-size: 11px;
    		color: @mutedTextColor;
    	}
    Done!

    (Tested on Safari, Firefox & Chrome on Mac).
     
  2. cobra1162

    cobra1162 Active Member

    thx good job
     
  3. Allan

    Allan Well-Known Member

    yes, nice mod ;)
     
  4. kkm323

    kkm323 Well-Known Member

    when i tried this my forum it doesn't look as the demo in the attachment
     
  5. Nasr

    Nasr Well-Known Member

    It wont look like the attachment if you are using IE. IE doesnt support rounded corners.
     
  6. lms

    lms Well-Known Member

    Installed. Work fine. Thanks.

    Salud2
     
  7. Floris

    Floris Guest

    Nice job :)
     
  8. FredC

    FredC Well-Known Member

    Thank you, Probably something ill remove in the future but is a great way to bring attention to the buttons while my users get used to XF.
     
  9. Vincent

    Vincent Well-Known Member

    Can this also be done with the EDIT, IP, REPLY, REPORT buttons? :D
     
    kingston likes this.
  10. shenmuee

    shenmuee Active Member

    loved [​IMG] Nice job
     
  11. DSF

    DSF Well-Known Member

    Our user love this item.

    But ... now we have Beta 6 and "message.css" has outdated and must/shall replace.
    What can we do?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    There are new Style Properties for these links in Beta 6.

    Message Elements -> 'Private' Controls Container / 'Public' Controls Container

    You can now do any styling there.
     
    PET and Vincent like this.
  13. DSF

    DSF Well-Known Member

    Ok, I've tried.
    Code:
    float: right;
    padding: 5px;
    margin-top: 10px;
    border: 1px solid @primaryLighterStill;
    border-radius: 5px;
    
    Below it looks like this. Without spaces :(
    like-neu.jpg


    Below was my old style with the now outdatet message.css.
    like-alt.jpg

    What can I do?
    Please, can every body help me. :)
     
  14. DSF

    DSF Well-Known Member

    Have nobody a idea?
     
  15. Steve F

    Steve F Well-Known Member

    Go to: ACP -> Styles -> Style Properties -> Message Elements -> Control (@messageMetaControl)

    The screenshot here should get what you are looking for. I used @primaryLighterStill for the background color and @primaryLight for the border.

    Message_Controls.png
     
    otto, Trombones13, Alien and 3 others like this.
  16. DSF

    DSF Well-Known Member

    Thank you very much. [​IMG]
    Now it's perfect again.
     
  17. DSF

    DSF Well-Known Member

    For transform message links into buttons at the User Profile-Page
    I can not find the style properties for this element like as in posting #15

    Can everybody help me?
     
  18. Steve F

    Steve F Well-Known Member

    So far there is not any style properties for that but you can add this code to the EXTRA.css template for your style. You can also add a hover state in there if need be.

    Code:
    /* -- Custom Profile Controls -- */
    
    .messageSimple .privateControls .item
    {
             border-radius: 5px;
             background-color: @primaryLighterStill;
             border: 1px solid @primaryLight;
             padding: 1px 3px;
    }
    
    .messageSimple .publicControls .item
    {
             border-radius: 5px;
             background-color: @primaryLighterStill;
             border: 1px solid @primaryLight;
             padding: 1px 3px;
    }
    
    .messageSimple .privateControls .muted
    {
             background: none !important;
             border: none;
    }
     
    DSF likes this.
  19. DSF

    DSF Well-Known Member

    Oh very nice and thank you very much. [​IMG]
    [​IMG] How did you find this so fast?
     
  20. Steve F

    Steve F Well-Known Member

Share This Page