• 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
As requested here.

buttons.webp

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).
 
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.
 
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
 
loved
smile.png
Nice job
 
Open:
ACP > Appearance > Templates > find "message.css"

Replace the entire content with: ........

Our user love this item.

But ... now we have Beta 6 and "message.css" has outdated and must/shall replace.
What can we do?
 
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.
 
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.webp


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

What can I do?
Please, can every body help me. :)
 
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.webp
 
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?
 
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;
}
 
  • Like
Reactions: DSF
Top Bottom