I'm around and round we go
Moderator
Jan 11, 2014 0:53:24 GMT -5
Customizing & Coloring UsernamesI've been asked this quite a lot, and I realize there is no real code provided to fully customize the usernames. So I've created a guide of sorts that should explain how to fully customize and control your member's names and groups.
If you ONLY want to add the following to your usernames/groups:
- Customize colors
- Customize fonts
- Customize other css styles, such as background, padding, size
The easiest and simplest method would be using this plugin:
[Plugin] Styled Member Names by Peter.
However, if you want to ALSO be able to do the following:
- Add hover effects
- Add symbols or images before/after the username
Then that will require some CSS knowledge and coding, which you can copy & paste from below into your Forum
These should go in
Themes > Advanced Styles & CSS > Stylesheet (at the bottom)
OR you can place them in
Global Headers, but put all of your code within
<style> </style> tags
FOR CUSTOMIZING GROUPS WITH CSS:.user-link.group-3 { color: red !important; font-weight: bold; padding: 0 0 0 2px; border-left: 5px solid red; }
Preview:
To find the number of a group:
Go to your profile > groups tab > click on the group > check the url: /members?group=
3&view=group
FOR CUSTOMIZING SINGLE MEMBERS WITH CSS:
.user-link.user-1 { color: #FFF !important; background-color: blue; padding: 2px 10px; border-radius: 2px; }
Preview:
To find the number of a member:
Go to their profile > check the url: /user/
1ADDING HOVER EFFECTS:
In the users/groups that you wish to add hover affects, use the following (and adjust the 1 to the proper user, or use group-#)
.user-link.user-1:hover { transition: all 1s; -webkit-transition: all 1s;
color: #000 !important; background-color: #0F0; }
Preview:
To make the transition effect look a bit smoother, you can add this part to the code for a single member:
.user-link.user-1 { transition: all 0.5s; -webkit-transition: all 0.5s; }
ADDING SYMBOLS, IMAGES, or TEXT:If you want a symbol or text before/after the usernames, copy the following CSS.
You can change the ADMIN text, or make it a symbol using a number of HTML Characters (
Click here for a FULL set of HTML Characters).
.user-link.group-1:before { content: 'ADMIN'; font-size: 8px; color: #FFF; background:#000; margin-right: 2px; padding: 0px 3px; }Preview:
To have stuff appear after (to the right) of usernames, change
:before to
:afterTo add images, do the following and replace the URL:
.user-link.user-1:after { content: url(images.proboards.com/v5/stars/star.png); }Preview:
To replace the username with an image, copy and paste the code below:
Adjust the red parts for the URL of your image, plus the width and height.
.user-link.user-1 { color: transparent !important; display: inline-block; background: url(images.proboards.com/new/menu/admin.png) center no-repeat; width: 54px; height: 16px; }Preview:
Enjoy!
If you have any questions just post
Jun 23, 2014 23:11:57 GMT -5
I've tried this however I havent come closed to what i want, i'd love to have what u got on your name.. any idea how to do it with this? or does it require something else. thanks. GREAT tutorial.
I'm around and round we go
OP
Moderator
Jun 25, 2014 17:18:16 GMT -5
What I have on my name right now only works in Chrome and Safari, unfortunately. It's a specific type of CSS property that only is supported by -webkit-
If that is okay for you, here it is! You'll want to edit the color hexes (#f22, #f2f, etc.) to get the colors you want, and the user/group that you want to apply it to.
You can also change 5s (s stands for seconds) to either a slower/higher number or faster/lower number. These are in
blue.
@-webkit-keyframes colors {
0% { background: #f22; }
10% { background: #f2f; }
20% { background: #22f; }
40% { background: #2ff; }
60% { background: #2f2; }
80% { background: #ff2; }
100% { background: #f22; }
}
.user-link.user-1 {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: colors 5s infinite linear;
}