# How To Stylizing Usergroups

**URL:** https://meta.discourse.org/t/how-to-stylizing-usergroups/40368
**Category:** Support
**Created:** [March 1, 2016, 4:13am UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368 "2016-03-01T04:13:14Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Ryahn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ryahn/32/121932_2.png) [@Ryahn](https://meta.discourse.org/u/Ryahn)
#### Post date: [March 1, 2016, 4:13am UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/1 "2016-03-01T04:13:14Z")

</div>

I am having some issues trying to style my usergroups on my install. I would like to add background color and change the font color of the group that is displayed.

I currently able to get my username colored.

[http://a.pomf.cat/iorsxu.png](http://a.pomf.cat/iorsxu.png)

Here is what I have right now

```
.names span.ProjectLead a {
    color: red;
}

```

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [March 1, 2016, 8:26am UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/2 "2016-03-01T08:26:12Z")

</div>

Have you tried using this selector: `.names .user-title`?

---

<div class="post-metadata">

### Author: ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [March 1, 2016, 12:02pm UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/3 "2016-03-01T12:02:52Z")

</div>

EDIT: My mistake. Ignore.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [March 1, 2016, 8:18pm UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/4 "2016-03-01T20:18:11Z")

</div>

> [@Tom\_Newsom](#):
>
> If you want different styling for each group, then the selector you want is .names .groupname .user-title

Are you sure about that? I don’t see the span.`user-title` as child to `span.myGroupName` but rather peer to it. But it’d be wonderful to do styling based on the specific title used for a user. Just don’t see how it’s possible currently.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [March 1, 2016, 8:23pm UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/5 "2016-03-01T20:23:55Z")

</div>

I see what you want. Here you go

```plaintext
a.user-group[href*=team] { color: blue; }

```

team refers to the URL slug for the group you want to style.

What it did here on Meta

 ![](https://global.discourse-cdn.com/meta/original/3X/2/a/2ab120e86ee41f240cc4943413f2cce70efb8a84.png)

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [March 1, 2016, 8:44pm UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/6 "2016-03-01T20:44:31Z")

</div>

> [@cpradio](#):
>
> I see what you want.

Sort of, but that’s mixing apples and oranges a bit. ☹

The CSS customization is based on the primary group specified for the user, which may or may not be the title they chose to use on their profile. (You see that in your example above even … the group is “team” but the titles “co-founder” unfortunately get the same styling.)

I’m not sure if that’s a problem or not for OP, but it is for us (trying to do something similar).

---

<div class="post-metadata">

### Author: ![Ryahn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ryahn/32/121932_2.png) [@Ryahn](https://meta.discourse.org/u/Ryahn)
#### Post date: [March 1, 2016, 10:36pm UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/7 "2016-03-01T22:36:18Z")

</div>

> [@cpradio](#):
>
> I see what you want. Here you go
> 
> a.user-group[href\*=team] { color: blue; }
> 
> team refers to the URL slug for the group you want to style.

Thank you, this did the trick.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [March 2, 2016, 12:03am UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/8 "2016-03-02T00:03:05Z")

</div>

That’s a bit tricky, as that requires re-opening/altering the rendering of the poster-name widget. Not quite sure how to accomplish that yet.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [March 2, 2016, 4:19am UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/9 "2016-03-02T04:19:15Z")

</div>

Would be nice to get a new class added on the title specifically if it comes from a badge and/or a primary group membership.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [March 2, 2016, 4:33am UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/10 "2016-03-02T04:33:51Z")

</div>

That could be difficult. The primary group is easy enough (or so it seems), but the badge would be difficult as I don’t see anything that indicates the badge\_id used for the user title.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:45pm UTC](https://meta.discourse.org/t/how-to-stylizing-usergroups/40368/11 "2024-06-08T12:45:49Z")

</div>

This topic was automatically closed after 3021 days. New replies are no longer allowed.
