NodeBB: Coloring element by group?

Technical Support
  • Hey.

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

    .poster-avatar{
        -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);
    }
    .poster-avatar:hover{
        -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:
    https://community.nodebb.org/topic/3185/name-color-for-groups-or-username/6

    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

    a[href*="groups/administrators"]
    

    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