Resource icon

XenForo XF Arcade Trophie and Ranking Images - How To

Joined
Jan 27, 2012
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: arcadechamp.png

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:

arcaderanks.png

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

Code:
/* 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.
 

kankan

Cadet
Joined
Nov 14, 2012
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 :
/img/arcadechamp.png
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.
 
Top Bottom