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

XF 1.3 Help Centering User Banner Image

PAPPACLART

Active member
#1
Hello Gents

Finally got my custom user banner image to display on my test migration site but I can't get the images to center. I have google searched and looked on the site and have scanned some CSS guides but centering is not working for me. I was hoping one of you chaps could help?

(Note: I am using my own images and not Xen's generated banners)



Here is my code minus my poor effort at centering (which is a copy an paste of somebody else's)

Code:
.userBanner.admin
{
background: url("@imagePath/xenforo/gradients/admin.png")no-repeat;
width: 89px;
height: 17px;
color: transparent;
display: block;

}

.userBanner.gbrc
{
background: url("@imagePath/xenforo/gradients/gbrcclub.png") no-repeat;
  width: 89px;
  height: 17px;
  color: transparent;
  display: block;

}

I am loving Xenforo, great work chaps and have just started customizing my test installation but User Rank implementation is Poor. Why can't it be like uploading an avatar, even VB can get that right! lol

Any help would be great as I have spent too many hours messing lol

Thanks in advance.

Ryan
 

PAPPACLART

Active member
#3
Hey there thanks

I added but does not work still. Here is a link to the test site

Code:
.userBanner.admin
{
background: url("@imagePath/xenforo/gradients/admin.png")no-repeat;
width: 89px;
height: 17px;
color: transparent;
display: block;
margin: 0 auto;

}


EDIT

I inspected the element in google chrome and found this code. If I change the margin left to + 5 it centres. what part of this code do I add to my extra.css?

Code:
.messageUserBlock .userBanner {
display: block;
margin-bottom: 5px;
margin-left: -12px;
margin-right: -12px;
}
 
Last edited:

PAPPACLART

Active member
#4
looks like I fixed it. Copied that code I found after inspecting the element in chrome to extra css. and added .admin after .userbanner and did the same for the gbrc banner.

Thanks
 

Brogan

XenForo moderator
Staff member
#5
You have different left and right margins.
Setting margin 0 auto seems to resolve it.

upload_2014-4-18_10-14-7.png

You may need to use !important to override some of the default CSS.