Dismiss Notice
Alien Soup is a free community for fans of science-fiction, horror, & fantasy! Everybody is welcome here.

XenForo XF Arcade Trophie and Ranking Images - How To

Add small medals to the XFA score listings

  1. stewart1champ
    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 (Text):
    /* 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.