How i can make group titles like this?

support
1

This website (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

1 Like
2

It’s done using custom CSS.

If you have Bananas as your primary group:

.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;
}
4 Likes
3

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

4

/admin/customize/css_html

5

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

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

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

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

8

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

9

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

10

Like this?

Maybe try a browser hard refresh if you are impatient?

11

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

12

Anyone here? I need help :frowning:

13

here waiting 4 da response

14

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

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?

1 Like
15

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

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

thanks!

17

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

<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

<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>
18

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

Requesting for lock!

2 Likes