User Ranks in CSS 1.0

dutchbb · Nov 7, 2010

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 · Nov 7, 2010

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 · Nov 7, 2010

dutchbb said:
ABOVE ADD:

Code:

<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 · Nov 7, 2010

Absolutely fantastic! Thanks for posting this dutchbb.

Shelley · Nov 7, 2010

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 · Nov 7, 2010

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

Can the primaryLight and primaryMedium be substituted with hex colors?

dutchbb · Nov 7, 2010

Thanks for the feedback.

Peggy said:
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.

Ranger375 said:
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 · Nov 7, 2010

dutchbb said:
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 · Nov 7, 2010

Peggy said:
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 · Nov 7, 2010

Peggy said:
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 · Nov 8, 2010

Works great!

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

Jamie · Nov 8, 2010

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

Jamie

Ranger375 · Nov 8, 2010

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 · Nov 8, 2010

Ranger375 said:
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 · Nov 8, 2010

I'm slow today lol

Peggy · Nov 8, 2010

ArnyVee said:
Works great!

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

oh that does look good Arny!

ArnyVee · Nov 8, 2010

Thanks Peggy

Peggy · Nov 8, 2010

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

Paul B · Nov 8, 2010

Peggy said:
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.

Code:

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

Peggy · Nov 8, 2010

Thanks Brogan.

User Ranks in CSS 1.0

Well-known member

XenForo moderator

Well-known member

in memoriam 2016

Well-known member

in memoriam 2016

Well-known member

in memoriam 2016

Well-known member

Well-known member

Well-known member

Attachments

Well-known member

Well-known member

Well-known member

Well-known member

in memoriam 2016

Well-known member

in memoriam 2016

XenForo moderator

in memoriam 2016

Similar threads

We value your privacy