• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • 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.
  • 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)

dutchbb

Well-known member
#1
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).
 

FredC

Well-known member
#8
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.
 

Vincent

Well-known member
#9
As requested here.

View attachment 5245

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).
Can this also be done with the EDIT, IP, REPLY, REPORT buttons? :D
 

Brogan

XenForo moderator
Staff member
#12
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.
 

DSF

Well-known member
#13
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.
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. :)
 

DSF

Well-known member
#17
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?
 

Steve F

Well-known member
#18
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;
}