How i can make group titles like this?

faq-material

(Indicado 👌) #1

This website (AdminShop [v1.8.2] - Server Shops - Plugin Releases - Sponge Forums) has labels for Group Titles, how i am able to do that? I cannot find it.

Regards,

Indicado


(Rafael dos Santos Silva) #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;
}

(Indicado 👌) #3

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


(Rafael dos Santos Silva) #4

/admin/customize/css_html


(Indicado 👌) #5

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


(Rafael dos Santos Silva) #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

(Indicado 👌) #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


(Rafael dos Santos Silva) #8

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


(Indicado 👌) #9

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


(Mittineague) #10

Like this?

Maybe try a browser hard refresh if you are impatient?


(Indicado 👌) #11

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


(Indicado 👌) #12

Anyone here? I need help :frowning:


(Indicado 👌) #13

here waiting 4 da response


(Mittineague) #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?


(Indicado 👌) #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;
}

(Indicado 👌) #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!


(Mittineague) #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>

(Indicado 👌) #18

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

Requesting for lock!


(Rafael dos Santos Silva) #19