• 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?

Lone Wolf

Well-known member
#1
I'm currently using the following code in the message_user_info template and it's working fine...

Code:
<!-- Start User Ranks -->

<xen:if is="{$user.is_admin}">
<span class="userrank"><img src="styles/flexile/xenforo/ranks/admin.png"></span>
</xen:if>
 
<xen:if is="{xen:helper ismemberof, $user, 2}">
<span class="userrank"><img src="styles/flexile/xenforo/ranks/member.png"></span>
</xen:if>
 
<!-- 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.
 

Jake Bunce

XenForo moderator
Staff member
#2
Use this code:

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:
http://www.w3schools.com/css/css_image_sprites.asp
 

Lone Wolf

Well-known member
#3
Use this code:

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:
http://www.w3schools.com/css/css_image_sprites.asp
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?
 
#7
They only thing I have in extra css to do with user ranks is this...

Code:
.userrank {
                                text-align: center;
}
/* End User Ranks */
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