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
Obviously, you can edit and change the CSS to suit your needs, this is just how it worked on one of my installs.
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.