1. 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

Discussion in 'Styling and Customization Questions' started by PAPPACLART, Apr 17, 2014.

  1. PAPPACLART

    PAPPACLART Active Member

    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)

    [​IMG]

    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
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Difficult to say without seeing the page with the code on but try adding margin 0 auto.
     
  3. PAPPACLART

    PAPPACLART Active Member

    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: Apr 18, 2014
  4. PAPPACLART

    PAPPACLART Active Member

    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
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     

Share This Page