Name color for groups or username



  • Hello. I wonder if can change the color of groups or users using custom css to display here:

    Post:
    color.png

    Profile:
    perfil.png

    Thanks~



  • You can change the group colour in the ACP, where you create groups. Unless I've misunderstood your request.

    Groups appear further down the Profile page.



  • @a_5mith I mean the user name

    with group I meant to change the color of the name to the whole group and not one by one

    escui2.png



  • @Escuiquirin Would require a template change on your end.

    Add <!-- IF posts.user.groups.length -->{posts.user.groups.name}<!-- ENDIF posts.user.groups.length --> to the username class here

    This would give you something along the lines of

    <small title="a_5mith" class="username Community Representatives"><a href="/user/a_5mith">a_5mith</a></small>

    Now, as there's a space, you can hook onto either, or both, so if I wanted to change just my username to a different colour. My CSS would look like this:

    .username.Community.Representatives > a {
    color: #000;
    }
    

    Which gives you:
    Untitled.png

    You would need to manage this change if you wanted to update NodeBB at any point. As pulling the latest theme would remove the code you've added.

    👍



  • @a_5mith Thank you very much ❤



  • Actually since the element you want to change the color of is already in the DOM, I think you can achieve this with CSS only. Try adding this to your custom css:

    a[href*="groups/administrators"] span.label {
    	background-color: red !important;;
    	padding: 2rem;
    }
    

    You can also play around with the CSS to get the wrapper a element or style it anyway you wish of course. Let me know if that worked.


  • Plugin & Theme Dev

    @arasbm said:

    Actually since the element you want to change the color of is already in the DOM, I think you can achieve this with CSS only. Try adding this to your custom css:

    a[href*="groups/administrators"] span.label {
    	background-color: red !important;;
    	padding: 2rem;
    }
    

    You can also play around with the CSS to get the wrapper a element or style it anyway you wish of course. Let me know if that worked.

    This would actually work wonders. 👍



  • Thanks @arasbm you helped me a lot, you're the best 😄



  • you're the best

    @Escuiquirin LOL I wish! Glad I could help though 🙂


 

| |