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

Using images as user ranks, can I use a sprite sheet?

Discussion in 'Styling and Customization Questions' started by Lone Wolf, Oct 11, 2011.

  1. Lone Wolf

    Lone Wolf Well-Known Member

    I'm currently using the following code in the message_user_info template and it's working fine...

    <!-- Start User Ranks -->
    <xen:if is="{$user.is_admin}">
    <span class="userrank"><img src="styles/flexile/xenforo/ranks/admin.png"></span>
    <xen:if is="{xen:helper ismemberof, $user, 2}">
    <span class="userrank"><img src="styles/flexile/xenforo/ranks/member.png"></span>
    <!-- End User Ranks -->
    However I could be using upto 2 dozen images so I was wondering how to achieve the above with a CSS Sprite sheet to reduce the number of images loading, etc.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Use this code:

    <img style="width:46px; height:44px; background:url(path/to/rankimage.gif) 20px 0;" src="styles/default/xenforo/clear.png" />
    Per the guide linked below, the src points to a transparent image to satisfy the src requirement. Then I added inline styling to the img tag to specify the necessary CSS attributes to use a sprite image.

    For reference:
    Lone Wolf likes this.
  3. Lone Wolf

    Lone Wolf Well-Known Member

    Thanks Jake but bearing in mind I know nothing about coding, have I understand this correctly...

    the width and height relate to the size of the image within the sheet and the 20px 0 relates to the location of the top left pixel within the sheet?

    What's the transparent image and why is it needed?
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Exactly correct.

    That is needed because img tags must have a src, even though it isn't useful in this case.
  5. namalinowski

    namalinowski Member

    What did u put in the extra.css?
  6. Lone Wolf

    Lone Wolf Well-Known Member

    They only thing I have in extra css to do with user ranks is this...

    .userrank {
                                    text-align: center;
    /* End User Ranks */
  7. namalinowski

    namalinowski Member

    It still doesn't work for me, Do you have a Skype where we can talk and sort this out because i really need this to work. Just pm me your name if you do

Share This Page