.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 .muted, .messageSimple .privateControls .item {
background: repeat-x scroll center bottom #D14836;
border-radius: 3px 3px 3px 3px;
border: 1px solid #FFFFFF;
box-shadow: 0pt 0pt 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 0pt 0pt 0pt transparent, 2px 0pt 2px #4E6008;
}
.message .ReplyQuote, .report, .ip, .delete, .edit, .hashPermalink, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like {
background: repeat-x scroll center bottom #ABCC27 ! important;
border-radius: 3px 3px 3px 3px;
border: 1px solid #FFFFFF;
box-shadow: 0pt 0pt 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 0pt 0pt 0pt transparent, 2px 0pt 2px #4E6008;
}
.message .muted a:hover {
background-color: transparent;
}
.message .publicControls a, .privateControls a {
color: white ! important;
}
.message .publicControls a:hover, .privateControls a:hover {
background: repeat-x scroll center bottom #93B312;
}
.message .unlike, .messageSimple .LikeLink .item .control .unlike {
background: repeat-x scroll center bottom #D14836;
border-radius: 3px 3px 3px 3px;
border: 1px solid #FFFFFF;
box-shadow: 0pt 0pt 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 0pt 0pt 0pt transparent, 1px 0pt 2px #4E6008;
}
.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;
}
Thanks, I've used style properties and I've achieved this
View attachment 22646
but, seeing the bbsmiley ones the differences are
1 - The username and post date and the number of the post are not styled. Where do I've to go?
2 - Shelley text is slightly shadowed and I don't know how to do that
3 - Between the background and the border in Shelley's button there is a white space and I don't know how to do this.
Thanks for any help...
.message .muted, .messageSimple .privateControls .item {
background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #D14836;
border: 1px solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0;
padding: 3px 7px;
text-align: center;
text-shadow: 0 0 0 transparent, 2px 0 2px #4E6008;
}
.message .ReplyQuote, .report, .ip, .delete, .edit, .hashPermalink, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like {
background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #ABCC27!important;
border: 1px solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 2px 0 2px #4E6008;
}
text-shadow: 2px 0 2px #4E6008;
border: 1px solid #FFFFFF;
box-shadow: 0 0 1px #B2B2B2;
.message .ReplyQuote, .report, .ip, .delete, .edit, .hashPermalink, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like {
background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #ABCC27!important;
border: 1px solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 2px 0 2px #4E6008;
}
.message .muted, .messageSimple .privateControls .item {
background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #D14836;
border: 1px solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px #B2B2B2;
color: white ;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 2px 0 2px #4E6008;
}
.message .muted a:hover {
background-color: transparent;
}
.memberList .ip a, {
color: white;
}
.message .publicControls a, .privateControls a {
color: white !important;
}
.message .publicControls a:hover, .privateControls a:hover {
background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #93b312;
}
.message .unlike, .messageSimple .LikeLink .item .control .unlike{
background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #D14836;
border: 1px solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px #B2B2B2;
color: white;
display: block;
font-size: 11px;
margin-top: 0px;
padding: 3px 7px;
text-align: center;
text-shadow: 1px 0 2px #4E6008;
}
I like this button styling but I've never used it because it prevents me from turning the Like link into the facebook style button. How would I be able to use the code you posted but exclude the Like link so I can still use the facebook-like style button?This is everything I think related to the buttons that's in my extra.css. I'm not a 100% sure as stated it's terribly messy in my extra.css it's starting to scare me. Anyway, hopefully the css will help you in getting your areas styled again this should be tested on a test style.
Code:.message .ReplyQuote, .report, .ip, .delete, .edit, .hashPermalink, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like { background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #ABCC27!important; border: 1px solid #FFFFFF; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 1px #B2B2B2; color: white; display: block; font-size: 11px; margin-top: 0px; padding: 3px 7px; text-align: center; text-shadow: 2px 0 2px #4E6008; } .message .muted, .messageSimple .privateControls .item { background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #D14836; border: 1px solid #FFFFFF; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 1px #B2B2B2; color: white ; display: block; font-size: 11px; margin-top: 0px; padding: 3px 7px; text-align: center; text-shadow: 2px 0 2px #4E6008; } .message .muted a:hover { background-color: transparent; } .memberList .ip a, { color: white; } .message .publicControls a, .privateControls a { color: white !important; } .message .publicControls a:hover, .privateControls a:hover { background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #93b312; } .message .unlike, .messageSimple .LikeLink .item .control .unlike{ background: url("styles/test/xenforo/gradients/post-grad.png") repeat-x scroll center bottom #D14836; border: 1px solid #FFFFFF; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 1px #B2B2B2; color: white; display: block; font-size: 11px; margin-top: 0px; padding: 3px 7px; text-align: center; text-shadow: 1px 0 2px #4E6008; }
okay thank you!Just remove the instances of .like & .unlike from the custom css and apply them to another set of styling properties in your case your facebook styling preferences would include .like
As stated above I suggest just experimenting with the code on a test style first and tinker around.
.message .muted, .messageSimple .privateControls .item {
background: #fff6e5;
border: 1px solid #f9c66d;
border-radius: 3px 3px 3px 3px;
color: #8f723f;
display: block;
font-size: 11px;
margin-top: 3px;
padding: 3px 3px;
text-align: center;
}
We use essential cookies to make this site work, and optional cookies to enhance your experience.