Levelling system ra...
 
Notifications
Clear all

Levelling system rank images

teebling
(@teebling)
Noble Member


Forum levelling system rank images

by teebling • 13th April 2018

downloads/colorprev.png


images/tech/downloadicon.png Download (.zip, 620 KB)


This .zip includes 271 rank images that form a levelling system going from one to sixty. I designed them for use with my World of Warcraft: Classic forum hence the limit being sixty Smile
Each level's progress bar has five states - empty, quarter full, half full, three-quarters full and totally full. Every ten levels the progress bar changes colour. Levels one to nine only have two states - half-empty and totally full. This is to make levelling faster at the beginning.

Each image is named in the following manner. Let's use level 12 as an example:

  • 12-0.png (empty)

  • 12-1.png (quarter full)

  • 12-2.png (half full)

  • 12-3.png (three quarters full)

  • 12.png (full)

  • Each rank image is 101x25 in dimensions. All images have been compressed (removal of meta data) for web usage.
    I have also included a master sprite for use as a CSS sprite where performance concerns exist.
    The font used for numbers is Friz Quadrata TT (bold), I do not own this font.
    Instructions for installation in phpBB are included in the readme.md file.

    Any questions, suggestions or other comments please feel free to leave a post!

    Quote
    Topic starter Posted : 12/04/2018 11:03 am
    slud
     slud
    (@slud)
    Trusted Member

    I love the graphic for 60! It's so cool.

    ReplyQuote
    Posted : 23/05/2018 4:35 am
    Anonymous
    (@anonymous_1607109007)
    Honorable Member

    Hey, these are great, would you mind sharing a license for them? I'd like to use them on my own personal website.

    Do you plan to share the stone banner at the top too?

    ReplyQuote
    Posted : 08/06/2018 3:39 pm
    teebling
    (@teebling)
    Noble Member

    Hey, these are great, would you mind sharing a license for them? I'd like to use them on my own personal website.

    Do you plan to share the stone banner at the top too?

    They're under a Creative Commons license so yeah go ahead (please read the link first).

    The stone banner is from Fanny Vergne.

    You might be interested in checking out my credits page too for resources and the like Smile

    ReplyQuote
    Topic starter Posted : 19/06/2018 11:57 am
    Anonymous
    (@anonymous_1607109007)
    Honorable Member

    Was wondering, where do you put the images and the css file? Also, the sprite file, is that needed to be somewhere as well?

    ReplyQuote
    Posted : 25/08/2018 10:21 pm
    teebling
    (@teebling)
    Noble Member

    Was wondering, where do you put the images and the css file? Also, the sprite file, is that needed to be somewhere as well?

    Hey Dyagan,

    Full instructions should be in the readme file.

    You can put them anywhere you want really - so long as you specify a path to each image in the ‘Ranks’ section of the admin control panel.

    The sprite isn’t required for a standard install, it’s a custom feature in case you are already familiar with CSS sprites.

    Let me know if you have any other questions Smile

    ReplyQuote
    Topic starter Posted : 12/09/2018 10:14 am
    Anonymous
    (@anonymous_1607109007)
    Honorable Member

    Hey,

    Just wondering if you could share the post counts that you assigned to each image?

    cheers,
    rb

    ReplyQuote
    Posted : 26/04/2019 3:44 am
    teebling
    (@teebling)
    Noble Member

    Hey beef,

    Kind of varies from level to level to emulate XP curve in wow so difficult to share that with you without making a post with a line for each of the 300 levels progress images.

    You can see the post totals for each breakpoint here: https://barrens.chat/viewtopic.php?f=9&t=869&p=1871#levels

    ReplyQuote
    Topic starter Posted : 26/04/2019 5:52 am
    Anonymous
    (@anonymous_1607109007)
    Honorable Member

    ahh ok, so its an exponent rather than being equidistant?

    thank you.

    ReplyQuote
    Posted : 26/04/2019 6:51 am
    D3rS3b
    (@d3rs3b)
    New Member

    teebling Hello, i trying to add rank system with CSS sprite, but my forum broken when write de Rank CSS.

    I added on stylesheet link to rank.css and upload de sprite in "/images/ranks" but doesn't work.. can you iluminate me please?

    Thanks you boss <3!

    ReplyQuote
    Posted : 15/10/2020 5:58 pm
    Scroll to Top