XF 1.2 Increasing Extra User Info Box Size

[Amaury]

How do I increase its size? I want the location to be on the same line as Location.

 

[Jeremy]

Edit the width of messageUserInfoBox. I believe there is a style property for it.

 

[Amaury]

Edit the width of messageUserInfoBox. I believe there is a style property for it.

There is indeed a style property for it: User Info Block. By default, the width box is blank, so I made the width 175px. Additionally, I had to, of course, increase the left margin in Content Container to accommodate that.

The only problem is that now the avatar isn't centered in the highlighted areas. How do I center it?

 

[Jeremy]

.messageUserInfo .avatar should allow you to apply CSS.

 

[Amaury]

.messageUserInfo .avatar should allow you to apply CSS.

That would be in EXTRA.css, right? I don't think there's a style property for it.

 

[Jeremy]

Yes.

 

[Amaury]

Yes.

Would this be right?

.messageUserInfo .avatar {
    position: center;
}

 

[Amaury]

Yes.

I'm having no luck.

 

[Jeremy]

That's because position: center isn't valid CSS. Use an auto left margin.

 

[Amaury]

That's because position: center isn't valid CSS. Use an auto left margin.

left-margin; something px?

 

[Jeremy]

Use an auto margin.

 

[Amaury]

Use an auto margin.

What's an auto margin? (Sorry.)

 

[Jeremy]

left-margin: auto;

margin: auto 0;

 

[Amaury]

left-margin: auto;

margin: auto 0;

Sorry, I should have known that.

Anyway, I tried this, and it isn't working:

.messageUserInfo .avatar {
    left-margin: auto;
    margin: auto 0;
}

 

[Paul B]

Try:

.messageUserBlock div.avatarHolder .avatar
{
text-align: center;
}

That works on the default style for me.

 

[Amaury]

Try:

.messageUserBlock div.avatarHolder .avatar
{
text-align: center;
}

That works on the default style for me.

That did it!

Thanks, Paul!

 

[Amaury]

Hm.

@Brogan: I'm curious. Why wasn't @Jeremy's code working for me?