Professional Clean User Ranks (and PSD)

[Jonathan]

Professional clean user ranks.

Ranks:

--special--
Administraor
Affiliate
Banned
Beta Tester
Team Leader
Community Team
Podcaster
Restricted
Unverified
VIP

--member--
New Member
Member
Senior Member
Great Member
Elite Member
King Member
Uber Member
No life Member

example:




PSD and all ranks attached, PSD very easily editable

 

[Eric J.]

Nice dude, I like the simplistic feel.

 

[Jonathan]

thanks Eric

 

[Kim]

Nice work, simple and clean!

 

[Jethro]

Nice work, personally love the simple approach to web graphics

 

[Vincent]

Nice, really nice, these just rock!

 

[Vincent]

Would you mind making a 'Global Mod.' and 'Moderator' instead of the 'Team Leader' and 'Community Member', that would complete the package

 

[Paul B]

I've seen quite a few of these user rank icons popping up.

Can I just ask where they're intended to be used?
Are people going to be editing the postbit template to add them in?

If so, wouldn't it make more sense to make them the same width as the postbit to avoid any resizing?

 

[Jonathan]

Vincent,

Quick edits.

Brogan, fair points. The user ranks may have to be cut down or postbit info extended a little for them to fit in. They can also be used for your current vBulletin or IPB websites. People will most likely have to edit the template to put them in unless there is a feature in XenForo for user rank images.

That probably would make more sense, thanks for mentioning! I'll ensure all future user ranks stick to the default postbit info width, thanks for letting me know & improve

Thank you everyone for the lovely comments

 

[EQnoble]

Anyone have an idea how to implement something like this?

 

[Paul B]

That probably would make more sense, thanks for mentioning! I'll ensure all future user ranks stick to the default postbit info width, thanks for letting me know & improve

My comments weren't meant as a critique, I was just genuinely interested as to where these icons would be used.

 

[Jonathan]

That's a great mock up, EQnoble. Nicely done. I'm not sure if I'm 100% keen on the placement though.

 

[Shadab]

Anyone have an idea how to implement something like this?

This can be easily done via minimal HTML (see below). Mostly CSS would be required (especially for the upward pointing arrow on the top). Just did this via firebug:

<div class="messageUserBlock">
    <!-- Extra markup for the arrow -->
    <div class="arrow"><span></span></div>

    <!-- The user image, 140px wide -->
    <img src="http://trollin.info/i/13495979494c8a86cdef8ef9.65660002-gmod.png" />
</div>

 

[EQnoble]

This can be easily done via minimal HTML (see below). Mostly CSS would be required (especially for the upward pointing arrow on the top). Just did this via firebug:

View attachment 1822

<div class="messageUserBlock">
    <!-- Extra markup for the arrow -->
    <div class="arrow"><span></span></div>

    <!-- The user image, 140px wide -->
    <img src="http://trollin.info/i/13495979494c8a86cdef8ef9.65660002-gmod.png" />
</div>

now that is frigging cool. What css doc are you refrenceing with that html , or are you doing it from a save page source ... I can't figure out how you did that and it would be awesome to so I can get a kick start on learning all the classes.

 

[Paul B]

If you use Firefox you can install Firebug and edit web pages directly on the fly.

Like this:

 

[EQnoble]

If you use Firefox you can install Firebug and edit web pages directly on the fly.

Like this:

View attachment 1823

well I use firebug when testing pages I make for flowplayer just to check errors in running code but I was not aware I could on the fly edit pages...how does that work..is this saved to like a temp directory I mean it can't possibly save it to the site? I would have to assume that this is just editing how I see it, right?

 

[Paul B]

This is going off topic now, apologies Jonathan, but yes, you can edit pages and the edits are stored locally.

Refreshing the page will remove the edits.

 

[EQnoble]

I'm not sure if I'm 100% keen on the placement though.

Where ideally do you see user ranks placement? I hadn't put to much thought in it and would like to hear how you envisioned it when you created them.

 

[Paul B]

Where ideally do you see user ranks placement? I hadn't put to much thought in it and would like to hear how you envisioned it when you created them.

Personally I would put them in the postbit directly below the user title.



I've highlighted the css for you so you can see how I did that.

 

[Jonathan]

I think on XF it would look best directly beneath the avatar