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

css message text

Discussion in 'Styling and Customization Questions' started by Morgain, Dec 2, 2011.

  1. Morgain

    Morgain Well-Known Member

    I wanted more margin around the message text for posts - on my board with a contrast colour background it shows up that the text has no margin.

    Found message.css

    added margin controls to this section - margin-left etc
        .message .messageContent
            @property "messageContent";
            min-height: 100px;
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 25px;
    however margin-top: governs the margin OUTSIDE the text area.
    I tried adding it a few other places in this template but haven't found the right one to make the white content area bigger immediately above the content text.

    ps. love to Brogan's daughter.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add padding instead of margin.

    BTW, don't forget to add it to Style Properties or EXTRA.css, not directly in the template.
  3. Morgain

    Morgain Well-Known Member

    I DID IT - added it to EXTRA.css
    now I know how to do that! I wasn't sure of the first line how to direct the controls to the right place but I can see now.
    I do like EXTRA.css brilliant idea.

    /* message margin */
        .message .messageContent
        padding: 25px;
    A tiny thing to you but huge step to independence for me.
    I've learned so much from you Brogan. I'm trying to pass on some of the basics to newies to repay you.

    Hope you don't mind me asking but what's your avatar? Is it a film star?
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Just so you're aware, you can also do it in Style Properties.


    You need to change that closing bracket from ) to }.
  5. Morgain

    Morgain Well-Known Member

    To finish off the message design here is what the bottom bit looks like.

    Where is the section to add padding here?
    What I mean is I don't know the class. I can't figure it from View Source.

    Also I want the author to be spaced a bit further over - another margin: somehow? Plus larger font.
    Like, Reply, larger font too.

    End result:
  6. Kier

    Kier XenForo Developer Staff Member

    No, that's the man himself. :)
  7. Morgain

    Morgain Well-Known Member

    I thought it was supposed to be better in EXTRA.css because of upgrades?
    Also atm this is test install so it will be easy to copy EXTRA.css over to the new live one in about 2 weeks - can't wait but got to because of 2 add-ons on the way.

    Done, O Lord of Code.
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties aren't affected during upgrades, any changes are retained.
    I only ever use EXTRA.css when there isn't an equivalent Style Property.
  9. Morgain

    Morgain Well-Known Member

    Well I'll stick to EXTRA for now so as to copy it over to the new live site.

    Where can I govern the bottom row of a message?
    Edit - Report on left / author, time of posting/ Like Reply
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties -> Message Elements -> 'Private' Controls Container

    Style Properties -> Message Elements -> 'Public' Controls Container
  11. Morgain

    Morgain Well-Known Member

    mm I got the bits n pieces done like that
    but not the post author and date
    I tried Author Username in that list no luck

    want it to have a margin gap on the left
    I put margin-left: 25px;
    but it didn't move

Share This Page