XenForo 1 XF Arcade Trophie and Ranking Images - How To

Was asked a couple times how I achieved the look of ranks and such, so here ya go:

First, you have to have a "Champion Image". I am using free images, but you can choose whatever you want. It has to be 32x32 to look correct.

I have chose this one: View attachment 1918

Now, the next part is tricky, it has to be one image file, but with 5 more ranks on it. Again, free images used, so I created this:

The dimensions of this file are 12x72. About as small as you can get, unless we can drop that #6 ranking, and expand the images a bit.

Now, on to your arcade edits.

Extra CSS

/* Arcade Edits */

.champion .infoContainer {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("/images/arcadechamp.png");
    background-origin: padding-box;
    background-position: 60px 0;
    background-repeat: no-repeat;
    background-size: 18px auto !important;

.listBlock.scores {
  background: url("/images/arcaderanks.png") no-repeat scroll 50px 9px transparent;

/* Arcade Edits */
Obviously, you can edit and change the CSS to suit your needs, this is just how it worked on one of my installs.
First release
Last update
0.00 star(s) 0 ratings