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

XF 1.1 Centering Avatar

Amaury

Well-known member
#1
Just so I don't derail this.

The postbit user info area at DOTATalk is a bit wider than the default, and now that the info is centered, I want the avatar centered as well.

How do I accomplish this?

Thanks!
 

Jeremy

Well-known member
#2
Use chromes inspector or firebug to inspect the avatar. Use the classes attached to it or it's container element and utilize similar CSS as you were given by Paul.
 

Amaury

Well-known member
#3
Use chromes inspector or firebug to inspect the avatar. Use the classes attached to it or it's container element and utilize similar CSS as you were given by Paul.
Looks like it would be this, though I'm not sure:

HTML:
<a data-avatarhtml="true" class="avatar Av10560m" href="members/nights.10560/"><span style="background-image: url('data/avatars/m/10/10560.jpg?1373188674')" class="img m"></span></a>
However, when I add text-align: center;, nothing happens.
 

Tracy Perry

Well-known member
#4
Try
Code:
.messageUserBlock .avatar .img.m  {
margin:auto;
}
I know that it will work with just the .avatar .img.m, but that would apply everywhere it calls it - I think adding the .messageUserBlock in front will add specificity to it.
 

Tracy Perry

Well-known member
#6
Time for my coffee :coffee:
I should know better than to get on the computer immediately upon getting out of bed. :whistle:
Need a few cups anyway - APC is not playing nicely on one server (users can't register) but on the other (same hardware and OS setup) it works fine. Install xcache on the one APC doesn't work on and it works - install xcache on the one that APC DOES work on and then xenForo complains about xcache not being initialized. ARGGHHH!
 

Amaury

Well-known member
#7
Use the following:
Code:
.messageUserBlock .avatar .img {
  background-position: center;
}
Hm. This didn't work for some reason.

Try
Code:
.messageUserBlock .avatar .img.m  {
margin:auto;
}
I know that it will work with just the .avatar .img.m, but that would apply everywhere it calls it - I think adding the .messageUserBlock in front will add specificity to it.
This, however, did. I wanted the quick reply avatar centered as well.