• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Professional Clean User Ranks (and PSD)

What css doc are you refrenceing with that html,
I just inlined all the styling since it's easy to do via Firebug. But for production, they should be separated. This html+css markup should achieve the same effect: (untested in other browsers)

HTML:
<div class="messageUserBlock extended">
    <!-- Extra markup for arrow -->
    <div class="arrow"><span></span></div>

    <!-- Width of image less than or equal to 122px -->
    <img class="userRank" src="path/to/your/user_rank.png" />
</div>

CSS:
.messageUserBlock.extended {
    margin-top: 10px;
    padding: 2px 0pt;
    background: #F0F7FC;
}

.messageUserBlock.extended .arrow {
    border-color: transparent transparent #D7EDFC;
    border-style: none solid solid;
    border-width: medium 10px 10px;
    position: absolute; top: -10px; left: 10px;
}

.messageUserBlock.extended .arrow span {
    border-color: transparent transparent #F0F7FC;
    border-style: none solid solid;
    border-width: medium 10px 10px;
    position: absolute; top: 1px; left: -10px;
}

.messageUserBlock.extended .userRank {
    display: block;
    margin: 0 auto;
}

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

I like it inside the block as well. Heres an alternative placement:

Alternative_Placement.webp
 
I love the nice clean streamlined look of them.

And as an aside, I'm happy to see that the "glass" fad is finally fading out.
You bring up a description in my mind. This design is fad-less (hyphenated to prevent making up words) and I say this with the greatest respect and regard to Jonathan. To elaborate on that I would like to point out that with color changes and pattern overlays you would be hard pressed to find a board that couldn't fit this in with minimal modification. The word I was thinking of by the way was universal.
hah.png


Thanks again for this Jonathan I hope I can work this all in when I get my copy of XF :-)


I never understood fads.
 
How could I apply this to every Owner, Admin, Super Mod, Mod, Respected and Member of my community?
I would need multi in some of the members...
 
How could I apply this to every Owner, Admin, Super Mod, Mod, Respected and Member of my community?
I would need multi in some of the members...
It's simple, just change the user rank from 'Owner' to '<img src="pathtoimage/owner.png" alt="Owner">
 
I like it inside the block as well. Heres an alternative placement:

View attachment 1826


I'm not the brightest when it comes to this, so I apologize lol. What code did you use and where did you paste it? in the CSS field for usergroups? I have been trying all sorts of combos with my test image and have gotten no where.
 
I'm not the brightest when it comes to this, so I apologize lol. What code did you use and where did you paste it? in the CSS field for usergroups? I have been trying all sorts of combos with my test image and have gotten no where.
Well that code wont do much, because it would show the same image to all the users...
 
Top Bottom