User Ranks in CSS

User Ranks in CSS 1.0

No permission to download
please specify where to add the code and what to put please :)

<xen:if is="{$user.is_admin}">
<span class="userrank">Administrator</span>
</xen:if>

Change the red word to anything you want. For instance you can change it to userrank_special or anything you want to really.

/* Start User Ranks */
.userrank {
display: block;
width: 108px;
margin: -2px 0 5px 6px;
padding: 2px 0 3px 0;
border: 1px solid @primaryLight;
border-radius: 5px;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
text-align: center;
font: 11px verdana,sans-serif;
text-decoration: none;
color: @primaryMedium;
text-shadow: 1px 1px 0 #fff;
outline: 0;
}
/* End User Ranks */

Change .userrank to what you have decided in step one.
 
Just duplicate the codes above and change the CSS values to fit. :)

He means to have the backgrounds changed like this:

ranks_example-jpg.19781
 
dutchbb submitted a new resource:

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

Original release thread: http://xenforo.com/community/threads/user-ranks-in-css-no-images-required.7731/

View attachment 26563

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...

Read more about this resource...
 
Ok, I added the edits as prescribed and I am the only one in my xenforo (just got in and trying to get it up and running before I have people populate it), and I don't see anything under my avatar. I am the only one in forum and I am the Admin but no rank is shown. I am having a hard time trying to understand the user groups, ranks and etc. but I must get these things going because there are private areas of the forum where only a certain user group will have access. I also have 'not' created any user groups, but I'm stunned just by the fact that my own account does not show me with 'admin' under the avatar. Please help?
 
Ok, I added the edits as prescribed and I am the only one in my xenforo (just got in and trying to get it up and running before I have people populate it), and I don't see anything under my avatar. I am the only one in forum and I am the Admin but no rank is shown. I am having a hard time trying to understand the user groups, ranks and etc. but I must get these things going because there are private areas of the forum where only a certain user group will have access. I also have 'not' created any user groups, but I'm stunned just by the fact that my own account does not show me with 'admin' under the avatar. Please help?
Did you add your admin account to 'Administrators' in the control panel? (/admin.php?admins/) and also to the user group 'Administrative' (/admin.php?users/1/edit)?
 
I didn't make any posts, so I didn't see it until I made one! lol ~ I'm still trying to set my site up so I'm still learning xenForo ATM ;-) Thanks...
 
I really love this way of styling, pure CSS and no images. I did "tweak" it a little bit, so you don't need the conditionals, and it will work with all ranks, even custom ones. It isn't really pretty, but adding this to extra.css will apply this styling to the ranks:
Code:
.userTitle {
              width: 108px;
              margin: 2px 0 5px 25px;
              padding: 2px 0 3px 0;
              border: 1px solid @primaryLight;
              border-radius: 5px;
              background: @secondaryLighter url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
              text-align: center;
              font: 11px verdana,sans-serif;
              text-decoration: none;
              color: @primaryMedium;
              text-shadow: 1px 1px 0 #fff;
              outline: 0;
}
.userBlurb .userTitle {
              background: transparent;
              border: none;
              text-shadow: none;
              font: 13px arial;
}
.messageUserBlock .userText {
    text-align: center;
    }
.xenOverlay .userTitle, .profilePage .userTitle {
              margin: 0;
}

A bit more details:
.userTitle will apply the styling to the existing ranks, as seen on this site already (e.g. Member under my username). If you want to tweak the colors for it, @secondaryLighter controls the background color, @primaryMedium controls the font color, @primaryLight controls the border color. You can use hex color codes if you want to. You will most likely have to adjust the margins, the values above are tweaked for centering the styling on my site. Note: You might have to add display: block; to this. I removed it cause it was already applied elsewhere on my site.

.userBlurb .userTitle overrides the styling for the userblurb on your profile page. This will include more than just the rank, and I found no good way to make this look good, so I decided to remove the styling to it. I had to reset the font styling to match the rest of the profile page as well, you will most likely have to tweak this to your style.

.messageUserBlock .userText is used to center the username. On my site it was aligned to the left. If you don't want it centered or it already is, just remove the entire rule.

.xenOverlay .userTitle, .profilePage .userTitle is used to correct the positioning of the rank on the overlay and your profile page.

The result:
userrank1.webp
 
I didn't think of doing it that way, but it seems it would not cover the custom ranks, if I understand it correctly. If you don't allow custom ranks, it would make more sense using the rank styling / usergroup styling.

I was thinking of doing a progress bar in pure CSS, but didn't bother as I allow custom ranks. I think it can be achieved easily with only allowing trophy ranks, and adding another span below the rank and using the rank name as a class. Then you can define the progress using width.
 
This is great. Thank you. Have one question about this instruction. "To show the appropriate rank for other usergroups you'll need a new conditional for every added rank. Replace 5 with the appropriate usergroup ID"

Does this mean that I add the code again per rank? And then change the number?
 
Yes, the conditionals are checking for the group, then apply the custom rank. You will have to redo it for each group, or you could just do it as covered in the help section, which is how I would suggest you do it. That way you don't need x amount of conditionals for x amount of groups.

http://xenforo.com/help/user-group-styling/
 
Top Bottom