Resource icon

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

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.
Author
stewart1champ
First release
Last update
Rating
0.00 star(s) 0 ratings
Top Bottom