# Custom username flairs?

**URL:** https://meta.discourse.org/t/custom-username-flairs/110533
**Category:** Support
**Created:** [March 3, 2019, 12:37am UTC](https://meta.discourse.org/t/custom-username-flairs/110533 "2019-03-03T00:37:21Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![cz1](https://avatars.discourse-cdn.com/v4/letter/c/edb3f5/32.png) [@cz1](https://meta.discourse.org/u/cz1)
#### Post date: [March 3, 2019, 12:37am UTC](https://meta.discourse.org/t/custom-username-flairs/110533/1 "2019-03-03T00:37:21Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/7/e/7e39fff165532e3c1516f381768542fea2a24d8c.png)

source of image: [Devblog: Skills On Demand - Changes Coming To The Skill System! - Dev Blogs - EVE Online Forums](https://forums.eveonline.com/t/devblog-skills-on-demand-changes-coming-to-the-skill-system/142588)

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!

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 3, 2019, 1:21am UTC](https://meta.discourse.org/t/custom-username-flairs/110533/2 "2019-03-03T01:21:40Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![cz1](https://avatars.discourse-cdn.com/v4/letter/c/edb3f5/32.png) [@cz1](https://meta.discourse.org/u/cz1)
#### Post date: [March 3, 2019, 4:46am UTC](https://meta.discourse.org/t/custom-username-flairs/110533/3 "2019-03-03T04:46:20Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 3, 2019, 9:49am UTC](https://meta.discourse.org/t/custom-username-flairs/110533/4 "2019-03-03T09:49:32Z")

</div>

Then, change `Developers` with `Admin` in the CSS.

---

<div class="post-metadata">

### Author: ![cz1](https://avatars.discourse-cdn.com/v4/letter/c/edb3f5/32.png) [@cz1](https://meta.discourse.org/u/cz1)
#### Post date: [March 3, 2019, 4:49pm UTC](https://meta.discourse.org/t/custom-username-flairs/110533/5 "2019-03-03T16:49:11Z")

</div>

Unfortunately, that was the first thing I changed 🙂 .

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

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 3, 2019, 5:17pm UTC](https://meta.discourse.org/t/custom-username-flairs/110533/6 "2019-03-03T17:17:29Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/8/6/86bb26e4f66a15bd3386000894534dccdee5a8f1.png)

---

<div class="post-metadata">

### Author: ![cz1](https://avatars.discourse-cdn.com/v4/letter/c/edb3f5/32.png) [@cz1](https://meta.discourse.org/u/cz1)
#### Post date: [March 3, 2019, 5:31pm UTC](https://meta.discourse.org/t/custom-username-flairs/110533/7 "2019-03-03T17:31:03Z")

</div>

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?

![](https://global.discourse-cdn.com/meta/original/3X/c/8/c853a79e458955859962ee0ae5106f93559a36f7.png)

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; 
    
}

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 3, 2019, 5:40pm UTC](https://meta.discourse.org/t/custom-username-flairs/110533/8 "2019-03-03T17:40:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![cz1](https://avatars.discourse-cdn.com/v4/letter/c/edb3f5/32.png) [@cz1](https://meta.discourse.org/u/cz1)
#### Post date: [March 3, 2019, 5:51pm UTC](https://meta.discourse.org/t/custom-username-flairs/110533/9 "2019-03-03T17:51:28Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [March 3, 2019, 10:08pm UTC](https://meta.discourse.org/t/custom-username-flairs/110533/10 "2019-03-03T22:08:48Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 11, 2019, 7:12am UTC](https://meta.discourse.org/t/custom-username-flairs/110533/13 "2019-04-11T07:12:51Z")

</div>

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