1. 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?

Discussion in 'Styling and Customization Questions' started by AndreaMarucci, Dec 9, 2011.

  1. AndreaMarucci

    AndreaMarucci Well-Known Member

    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 :)
     
  2. AndreaMarucci

    AndreaMarucci Well-Known Member

    No help on this?
     
  3. DRE

    DRE Well-Known Member

  4. AndreaMarucci

    AndreaMarucci Well-Known Member

    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...
     
  5. DRE

    DRE Well-Known Member

    I don't know css well enough to do that stuff. Everything I learn has been by trial and error sorry.
     
  6. AndreaMarucci

    AndreaMarucci Well-Known Member

    Thanks anyway, I'll wait for someone's help ;)
     
  7. AndreaMarucci

    AndreaMarucci Well-Known Member

    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?
     
  8. kkm323

    kkm323 Well-Known Member

    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;
        }
     
  9. Shelley

    Shelley Well-Known Member

    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.
     
    AndreaMarucci and The8thLegion like this.
  10. Shelley

    Shelley Well-Known Member

    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;
    }
    
    
     
    The8thLegion likes this.
  11. DRE

    DRE Well-Known Member

    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?
     
  12. Shelley

    Shelley Well-Known Member

    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.
     
    The8thLegion likes this.
  13. DRE

    DRE Well-Known Member

    okay thank you!
     
  14. DRE

    DRE Well-Known Member

    Works fine!
     
  15. AndreaMarucci

    AndreaMarucci Well-Known Member

    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...
     
  16. Shelley

    Shelley Well-Known Member

    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;
     
  17. kkm323

    kkm323 Well-Known Member

    bug found:
    after soft deleting the "show" link doesn't appear !
     

Share This Page