• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
User Ranks in CSS

User Ranks in CSS 1.0

No permission to download
Add user ranks in posts without the need for images.

dutchbb

Well-known member
#1
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...
 

Brogan

XenForo moderator
Staff member
#2
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

Well-known member
#3
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?
 

Shelley

Well-known member
#5
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

Well-known member
#6
Question.... in these instances:
border: 1px solid @primaryLight; and color: @primaryMedium;

Can the primaryLight and primaryMedium be substituted with hex colors?
 

dutchbb

Well-known member
#7
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

Well-known member
#8
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

Well-known member
#9
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

Well-known member
#10
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.
 

Brogan

XenForo moderator
Staff member
#19
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>