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

css message text

Morgain

Well-known member
#1
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
Code:
    .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.
margin.png
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.
 

Brogan

XenForo moderator
Staff member
#2
Add padding instead of margin.

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

Morgain

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

Code:
/* 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?
 

Brogan

XenForo moderator
Staff member
#4
Just so you're aware, you can also do it in Style Properties.

message-text.PNG

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

Morgain

Well-known member
#5
To finish off the message design here is what the bottom bit looks like.
message-footer.png

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:
message-footer2.png
 

Morgain

Well-known member
#7
Just so you're aware, you can also do it in Style Properties.
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.

You need to change that closing bracket from ) to }.
Done, O Lord of Code.
 

Brogan

XenForo moderator
Staff member
#8
I thought it was supposed to be better in EXTRA.css because of upgrades?
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.
 

Morgain

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

Brogan

XenForo moderator
Staff member
#10
Style Properties -> Message Elements -> 'Private' Controls Container

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

Morgain

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