Custom username flairs?

Support
1

source of image: Devblog: Skills On Demand - Changes Coming To The Skill System! - Dev Blogs - EVE Online Forums

What’s the best way to achieve the ‘DEV’ flair next to usernames in a post. I’ve searched everywhere I could think of . I also tried copying the css from their website just to see if I could get it to work. Is there some sort of plugin for this? Looking briefly at their styling is based on groups that they are apart of.

Snippet of their styling

.Developers.username:after, .Developers.full-name:after, .topic-map .group-Developers a:after, .topic-list-item .posters a.group-Developers:after {
  background: #3276b1;
  color: #f8f8ff;
  content: 'DEV'; }

I also believe this is apart of it as well?

.system.username:after, .system.full-name:after, .Developers.username:after, .Developers.full-name:after, .GameMasters.username:after, .GameMasters.full-name:after, .ISD.username:after, .ISD.full-name:after, .CSM.username:after, .CSM.full-name:after, .Event.username:after, .Event.full-name:after, .MVP.username:after, .MVP.full-name:after {
  padding: 0 7px 1px 6px;
  margin-left: 10px;
  font-family: "ProximaNova-Regular", Arial, sans-serif;
  font-weight: normal;
  font-size: .84em; }

Any help in pointing me in the right direction would be great. Thanks!

2

It seems that they just created a group Developers. Any users associated with this group will trigger this CSS above, as long it’s defined as their primary group.

5 Likes
3

That is what I figured, however… I added the custom group ‘Admin’, my accounts primary group is ‘Admin’ and I added the css quoted above. However, there is no change.

4

Then, change Developers with Admin in the CSS.

4 Likes
5

Unfortunately, that was the first thing I changed :slight_smile: .

.Admin.username:after, .Admin.full-name:after, .topic-map .group-Admin a:after, .topic-list-item .posters a.group-Admin:after {
background: #3276b1;
color: #f8f8ff;
content: ‘DEV’; 

.system.username:after, .system.full-name:after, .Admin.username:after, .Admin.full-name:after {
padding: 0 7px 1px 6px;
margin-left: 10px;
font-weight: normal;
font-size: .84em;
6

Make sure that the concerned user has this Admin group as the primary group.
This will make the group name appearing as classname in the HTML
For example, I created a Test group, and you can see it in the HTML:

image
image.png697×215 13.9 KB

2 Likes
7

That’s odd. I just renamed the group to Developer to make sure its not getting mixed up with the main admin group. Still nothing. Am I missing something?

And this the what I have in the theme css settings under ‘common’

.Developer.username:after, .Developer.full-name:after, .topic-map .group-Developer a:after, .topic-list-item .posters a.group-Developer:after {
background: #3276b1;
color: #f8f8ff;
content: ‘DEV’; 

}

.system.username:after, .system.full-name:after, .Developer.username:after, .Developer.full-name:after, .GameMasters.username:after, .GameMasters.full-name:after, .ISD.username:after, .ISD.full-name:after, .CSM.username:after, .CSM.full-name:after, .Event.username:after, .Event.full-name:after, .MVP.username:after, .MVP.full-name:after {
padding: 0 7px 1px 6px;
margin-left: 10px;
font-family: “ProximaNova-Regular”, Arial, sans-serif;
font-weight: normal;
font-size: .84em; 
    
}
8

I don’t know. Maybe your CSS is not loaded. Where did you put your CSS? Check if you see it.

1 Like
9

That was odd, the css wasn’t loading properly? I rebooted the server and now its functioning correctly. I really appreciate all your help, and apologize as I’m a beginner trying to learn. Thanks again.

10

Also you are posting your code as quotes, not as code. Please post your code as code using the provided tools in the editor next time… thanks!

1 Like
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.