# How i can make group titles like this?

**URL:** https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318
**Category:** Support
**Created:** [01.Ноябрь.2016 18:32:42 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318 "2016-11-01T18:32:42Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 18:32:42 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/1 "2016-11-01T18:32:42Z")

</div>

This website ([https://forums.spongepowered.org/t/adminshop-v1-8-2-server-shops/](https://forums.spongepowered.org/t/adminshop-v1-8-2-server-shops/)) has labels for Group Titles, how i am able to do that? I cannot find it.

Regards,

Indicado

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [01.Ноябрь.2016 18:35:37 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/2 "2016-11-01T18:35:37Z")

</div>

It’s done using custom CSS.

If you have **Bananas** as your primary group:

```plaintext
.topic-meta-data .username.Bananas:after {
    content: "Bananas Guys";
    background: #59A6D9;
    color: #000000;
    margin: 0 0 0 5px;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    display: inline-block;
    border-radius: 3px;
}

```

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 18:41:27 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/3 "2016-11-01T18:41:27Z")

</div>

and where i need to place it? Sorry, im a little bit noobie.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [01.Ноябрь.2016 18:51:16 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/4 "2016-11-01T18:51:16Z")

</div>

`/admin/customize/css_html`

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 18:51:56 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/5 "2016-11-01T18:51:56Z")

</div>

should i type it and press the upgrade button? As i already did it but it doesn’t show the label.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [01.Ноябрь.2016 18:53:38 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/6 "2016-11-01T18:53:38Z")

</div>

1. Create a new CSS Customization
2. Save it
3. Enable it
4. Wait a bit
5. See it in action on a topic

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 18:58:41 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/7 "2016-11-01T18:58:41Z")

</div>

still can’t see it as it shows me with plain text: @ [https://play.wonh.cf/t/how-to-get-you-unbanned/32](https://play.wonh.cf/t/how-to-get-you-unbanned/32)

i replaced “Bananas” with “Developer” as it is the Group’s name

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [01.Ноябрь.2016 19:05:35 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/8 "2016-11-01T19:05:35Z")

</div>

Go to [https://play.wonh.cf/admin/users/1/indicado](https://play.wonh.cf/admin/users/1/indicado) and in the Group section make Developer your primary group.

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 19:08:05 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/9 "2016-11-01T19:08:05Z")

</div>

done, i removed my “Developer” title on my profile and now developer is my primary group but still doesn’t show

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [01.Ноябрь.2016 19:08:14 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/10 "2016-11-01T19:08:14Z")

</div>

> [@DarkDofah](#):
>
> i replaced “Bananas” with “Developer” as it is the Group’s name

Like this?

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

> [@Falco](#):
>
> 4 Wait a bit

Maybe try a browser hard refresh if you are impatient?

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 19:08:46 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/11 "2016-11-01T19:08:46Z")

</div>

not like that, look at the web that i linked on the first post

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 19:29:15 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/12 "2016-11-01T19:29:15Z")

</div>

Anyone here? I need help ☹

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 20:06:28 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/13 "2016-11-01T20:06:28Z")

</div>

here waiting 4 da response

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [01.Ноябрь.2016 20:36:45 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/14 "2016-11-01T20:36:45Z")

</div>

Everything you need has already been posted by Falco.

After changing the group name in the selector to admin, it resulted in this in my localhost set-up

 ![](https://global.discourse-cdn.com/meta/original/3X/6/0/60832121abf26d1ba1f5cf521cfdbb760adcc9d8.png)

As you are apparently having problems

What does the HTML of a post your are wanting to style look like?

What does the CSS in your saved and enabled Admin → Customize → CSS/HTML → CSS look like?

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 20:38:13 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/15 "2016-11-01T20:38:13Z")

</div>

@Mittineague looks like this:

```
 .topic-meta-data .username.developer:after {
    content: "Developer";
    background: #800080;
    color: #ffffff;
    margin: 0 0 0 5px;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    display: inline-block;
    border-radius: 3px;
}

```

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 20:46:21 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/16 "2016-11-01T20:46:21Z")

</div>

sorry, fixed it, simple as changing the .topic-meta-data .username.developer:after { value to the exact group name, .topic-meta-data .username. **D** eveloper:after´

thanks!

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [01.Ноябрь.2016 20:51:22 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/17 "2016-11-01T20:51:22Z")

</div>

Ah, looking here I see the HTML is different from my localhost set-up.

AFAIK this is due to full-name ↔ username Settings.

If your HTML looks similar to this

```plaintext
<div class="topic-meta-data">
 <div class="names trigger-user-card">
  <span class="first full-name staff admin team">
   <a href="/users/Falco" data-auto-route="true" data-user-card="Falco">Rafael dos Santos Silva</a>
  </span>
  <span class="second username">
   <a href="/users/Falco" data-auto-route="true" data-user-card="Falco">Falco</a>
  </span>
  <span class="user-title">
   <a href="/groups/team" class="user-group">team</a>
  </span>
 </div>

```

then the selector is incorrect and the CSS won’t apply like it does for HTML like this

```plaintext
<div class="topic-meta-data">
 <div class="names trigger-user-card">
  <span class="first username staff admin moderator">
   <a href="/users/AdminGuy1" data-auto-route="true" data-user-card="AdminGuy1">AdminGuy1</a>
   <i class="fa fa-shield" aria-hidden="true" title="This user is a moderator"></i>
  </span>
  <span class="user-title">good guy</span>
 </div>

```

---

<div class="post-metadata">

### Author: ![DarkDofah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkdofah/32/63373_2.png) [@DarkDofah](https://meta.discourse.org/u/DarkDofah)
#### Post date: [01.Ноябрь.2016 20:52:26 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/18 "2016-11-01T20:52:26Z")

</div>

no, it doesn’t look like that, but i fixed it as it was simple as i said above.

Requesting for lock!

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [01.Ноябрь.2016 20:52:44 UTC](https://meta.discourse.org/t/how-i-can-make-group-titles-like-this/52318/19 "2016-11-01T20:52:44Z")

</div>


