Lawless Baron
Member
can someone help us?
User Ranks in CSS 1.0
- Thread starter dutchbb
- Start date
Andrej
Well-known member
please specify where to add the code and what to put please
Change the red word to anything you want. For instance you can change it to userrank_special or anything you want to really.
Change .userrank to what you have decided in step one.
Lawless Baron
Member
I want each rank to have their own colors
Andrej
Well-known member
Just duplicate the codes above and change the CSS values to fit.
Ranger375
Well-known member
Just duplicate the codes above and change the CSS values to fit.
He means to have the backgrounds changed like this:
Lawless Baron
Member
sorry for my noobiness truly am
in EXTRA.css and/or message_user_info?
yea the user-title font and background of the user-title
in EXTRA.css and/or message_user_info?
yea the user-title font and background of the user-title
Andrej
Well-known member
Ah. I can't help with that, sorry.He means to have the backgrounds changed like this:
Claudio
Well-known member
That was I´m referring
dutchbb
Well-known member
dutchbb submitted a new resource:
User Ranks in CSS (version 1.0) - Add user ranks in posts without the need for images
Read more about this resource...
User Ranks in CSS (version 1.0) - Add user ranks in posts without the need for images
Read more about this resource...
CritiKiL
Active member
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?
dutchbb
Well-known member
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 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:
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:
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:
I added a section to the manual a while ago which covers (some of) this: http://xenforo.com/help/user-group-styling/
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.
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?
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/
http://xenforo.com/help/user-group-styling/
SoManyPosts
Active member
You could make this install automatically with TMS. Do you think you will be supporting it soon?
SoManyPosts
Active member
I can't get this to work with custom ranks...
Similar threads
