• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to style some message elements?

AndreaMarucci

Well-known member
#1
Hello, I've visited the beautiful bbsmiley forum and liked very much these

Screenshot 12-2455905 alle 15.00.56.png

So I'm asking myself what exactly are the values to put in the style property editor on XF. If Shelly could help I'd appreciate :)
 

AndreaMarucci

Well-known member
#4
Thanks, I've used style properties and I've achieved this

Screenshot 12-2455911 alle 18.29.01.png
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...
 

AndreaMarucci

Well-known member
#7
Using Style properties I achieved a good result

Screenshot 12-2455911 alle 19.03.49.png
But I don't know how to style accordingly the name of the user and date on the left and the post number on the right. I've asked in another thread but was for another request so I've posted it here more clearly.

Can someone help?
 

kkm323

Well-known member
#8
replace your message.css to
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 .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;
    }
 

Shelley

Well-known member
#9
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...
The reason I didn't reply is because it's still a mess in my extra.css template and it's still undergoing some styling.

1. the username and post date is as follows.

Code:
.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;
}
and some of the code to style the buttons including the .hashPermalink
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;
}
2. the text is text-shadow

Code:
    text-shadow: 2px 0 2px #4E6008;
3.the white part is a border and the grey a box-shadow.

Code:
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 1px #B2B2B2;
I advise you tinker on a test style and then apply any changes to your live style this is posted as an example for you to work off.
 

Shelley

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

DRE

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

Shelley

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

DRE

Well-known member
#13
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.
okay thank you!
 

AndreaMarucci

Well-known member
#15
Ok to style the username, date and hsh permalink I've inserted this (modified) in extra.css

Code:
.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;
}
and this is the result

Screenshot 12-2455912 alle 10.02.08.png
I've not inserted anything other in Extra.css, just that code above. I've also noticed that the text of username and date is grey but I don't know how to style it and the little checkbox to the left (i'm the admin) is misaligned but it's not a problem. I'm very satisfied of the result...
 

Shelley

Well-known member
#16
The checkbox not aligning is like mine I simply haven't got around in trying to align that yet.

Try in the above code adding !important to color: #8f723f !important;