User Ranks in CSS 1.0

[dutchbb]

dutchbb submitted a new resource:

User Ranks in CSS (version 1.0) - Add user ranks in posts without the need for images

Description

This mod adds user ranks entirely made in CSS, so no additional images are required. The attached example shows how the colors automatically adapt when a style color is changed with the XenForo color palette.

The rank text can be changed by simply editing the template - no Photoshop required. You can change the shape, color, background image, and font to whatever you like. So you can actually design your own personal user ranks!

Read more about this resource...

 

[Paul B]

That goes hand in hand neatly with the css forum icons I wanted, which Jake did.

If everything is CSS then it will mean faster loading times and no need to create multiple image sets for each style.

 

[Ranger375]

ABOVE ADD:

<span class="userrank">Administrator</span>

(To show the appropriate rank per usergroup you'll still need a conditional for every added rank.)

Awesome!

Can you give an example of a conditional for having another user group in addition to an admin? How would I let the system know when it should appear for just admins and another for xxxx?

 

[Peggy]

Absolutely fantastic! Thanks for posting this dutchbb.

 

[Shelley]

I was just talking about this today in kims xenforo ranks thread. Very nicely done and you beat me to the punch. nice work.

 

[Peggy]

Question.... in these instances:
border: 1px solid @primaryLight; and color: @primaryMedium;

Can the primaryLight and primaryMedium be substituted with hex colors?

 

[dutchbb]

Thanks for the feedback.

Question.... in these instances:
border: 1px solid @primaryLight; and color: @primaryMedium;

Can the primaryLight and primaryMedium be substituted with hex colors?

You can, the only difference is that changes to the color palette will not affect it anymore.

Awesome!

Can you give an example of a conditional for having another user group in addition to an admin? How would I let the system know when it should appear for just admins and another for xxxx?

Added to the OP

 

[Peggy]

Thanks for the feedback.


You can, the only difference is that changes to the color palette will not affect it anymore.

But if you changed the color palette, then you could manually change the hex values, correct?
I'll most likely use it the way you have it. I'm just thinking of someone who might want to be more creative with their colors.

 

[dutchbb]

But if you changed the color palette, then you could manually change the hex values, correct?
I'll most likely use it the way you have it. I'm just thinking of someone who might want to be more creative with their colors.

Yes, once the @primaryLight etc are gone you can manually change it to any CSS value for example color: red; or color: #f00;

 

[Shelley]

But if you changed the color palette, then you could manually change the hex values, correct?
I'll most likely use it the way you have it. I'm just thinking of someone who might want to be more creative with their colors.

If you changed the @primarysomething to a hex value I don't think the colour would change using the colour pallete in the style properties. I personally would have it set to a hex and/or rgb value so it remains independent from the style properties color pallete.

 

[ArnyVee]

Works great!

Just added it to my "Supporter" and "Admins" so far

 

[Jamie]

Great Work! Thanks for creating this and showing us how it's done!

Jamie

 

[Ranger375]

In case anyone else had issues figuring out conditionals in xf, Jake answered my questions here:

http://xenforo.com/community/threads/conditional-help.7742/#post-108565

 

[ArnyVee]

In case anyone else had issues figuring out conditionals in xf, Jake answered my questions here:

http://xenforo.com/community/threads/conditional-help.7742/#post-108565

Ranger, the original post had already been updated with that info. But, I'm glad you got a resolution either way

 

[Ranger375]

I'm slow today lol

 

[Peggy]

Works great!

Just added it to my "Supporter" and "Admins" so far

oh that does look good Arny!

 

[ArnyVee]

Thanks Peggy

 

[Peggy]

Is there a way to delete the text rank right beneath the username? It's redundant having them both there.

 

[Paul B]

Is there a way to delete the text rank right beneath the username? It's redundant having them both there.

You can delete this line from the message_user_info template.

<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>

 

[Peggy]

Thanks Brogan.