Resource icon

XenForo 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:

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.
Hello stewart1champ

Thank you for this tuto

A question :
Is the function champion seal in forum posts working ?
  • Enable champion seal
    Displays a champion seal in forum posts.
Champion seal image :
Enter the path relative to your forum root of an image to use for champion seals. If this is left blank, the phrase arcade_champion_of_x will be used instead.