User Rank Ribbons

[Quiver]

Hello, I have some ready-made images that I'd like to use as rank ribbons.
For example, this is one of them: http://i.imgur.com/EMuLYxi.png
How do I make this work?

I've followed this tutorial: http://xenforo.com/community/threads/user-status-ribbons-based-on-usergroups.11602/

It worked for the text only ribbons.
But I wish to use my preset images.

 

[TPerry]

Hello, I have some ready-made images that I'd like to use as rank ribbons.
For example, this is one of them: http://i.imgur.com/EMuLYxi.png
How do I make this work?

I've followed this tutorial: http://xenforo.com/community/threads/user-status-ribbons-based-on-usergroups.11602/

It worked for the text only ribbons.
But I wish to use my preset images.

In your user group listing select the User Title OverRide then place <img src="path_to_your_image/image">
Where the path_to_y0ur_image is (of course) the path, and then the image name.
If I remember correctly I also had to add

.messageUserBlock .userTitle {
display: none !important;
}
into the EXTRA.css
You also need to use the display styling priority in the usergroup settings.

 

[dtmcl]

Play about with the code from this: http://www.bbsmiley.com/threads/double-ribbon-ranks.158/

 

[TPerry]

Play about with the code from this: http://www.bbsmiley.com/threads/double-ribbon-ranks.158/

That is one way of doing it... but it does require template edits (preferably via TMS). The way I listed uses all built in features with no need to look up your user groups and then edit the template each time you add/delete a group.
Further, Shelley's instructions uses the built in titles to fill in the image (which is just the background). It would still require the EXTRA.css entry for him to block the text so that it does not overlay his image.