NodeBB: Coloring element by group?

Technical Support
  • Hey.

    On my forum, we have Halos around the avatars, set with:

        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: -webkit-box-shadow 0.3s ease;
        transition: box-shadow 0.3s ease;
        -webkit-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
        box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
        -webkit-box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);

    Now, I was hoping to dynamically color these Halos for staff groups, so I found this topic:

    With this nice block of CSS:

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

    So I figured, "Hey, thats awesome. Then I should be able to use CSS selectors to color the Halos.

    However, after- extensive testing, I cant figure out what


    is trying to select, or get it to work, at all.

    I thought maybe

    a[href*="groups/coloradorks-staff"] .poster-avatar{
    box-shadow: 0 0 0 6px rgb(255, 0, 0);

    would work- but obviously .poster-avatar isn't a child of this selector. Is this just selecting links to the groups page? If so, how does it work in the original case?

  • After some more research, I found a solution:

    .topic [data-username="USERNAME"] .poster-avatar

    Will select just one user's avatar

Suggested Topics

  • Technical Support
    0 Votes
    9 Posts

  • 0 Votes
    8 Posts

  • Technical Support
    0 Votes
    11 Posts

  • 0 Votes
    4 Posts

  • 1 Votes
    1 Posts

| | | |