Skip to content

Custom badges

Solved Customisation
103 4 26.3k 2
  • Hello

    I have added a badge for admin group users, my code works good :

    aa131901-b6b8-4b2f-a180-c385a156d70e-image.png

    but I have this bug when users with this badge provide a solution to an answer. (Quesntion and answer plugin)

    An idea ?

    here my code :

    /*----------------------------------------------------------------------------*/
    /*------------------      Admin members custom badge     ---------------------*/
    /*----------------------------------------------------------------------------*/
    
    /* On avatar */
    
    li[component="post"] a[href*="/groups/administrators"] span.badge-text.align-text-bottom {
        display: none !important;
    }
    
    li[component=post] a[href*="/groups/administrators"] {
        position: absolute !important;
        top: 25px;
        left: 7px;
        z-index: 2;
        margin-top: 1px;
        border-radius: 999px !important;
        line-height: 14px;
        display: block;
        height: auto;
        margin-left: 0px !important;
        background: var(--bs-user-level-bg) !important;
        color: var(--bs-body-color-primary) !important;
        padding-left: 6px !important;
        width: auto;
    }
    
    /* Display icon  */
    li[component=post] a[href*="/groups/administrators"] .fa.fa-crown.me-1 {
        border-radius: 999px !important;
        margin-left: 0px !important;
        margin-top: 3px !important;
    }
    
    /* Disabled on Smartphone */
    @media (max-width: 767px) {
        li[component="post"] a[href*="/groups/administrators"].badge {
                display: none !important;
            }
    }
    
  • Hello

    I have added a badge for admin group users, my code works good :

    aa131901-b6b8-4b2f-a180-c385a156d70e-image.png

    but I have this bug when users with this badge provide a solution to an answer. (Quesntion and answer plugin)

    An idea ?

    here my code :

    /*----------------------------------------------------------------------------*/
    /*------------------      Admin members custom badge     ---------------------*/
    /*----------------------------------------------------------------------------*/
    
    /* On avatar */
    
    li[component="post"] a[href*="/groups/administrators"] span.badge-text.align-text-bottom {
        display: none !important;
    }
    
    li[component=post] a[href*="/groups/administrators"] {
        position: absolute !important;
        top: 25px;
        left: 7px;
        z-index: 2;
        margin-top: 1px;
        border-radius: 999px !important;
        line-height: 14px;
        display: block;
        height: auto;
        margin-left: 0px !important;
        background: var(--bs-user-level-bg) !important;
        color: var(--bs-body-color-primary) !important;
        padding-left: 6px !important;
        width: auto;
    }
    
    /* Display icon  */
    li[component=post] a[href*="/groups/administrators"] .fa.fa-crown.me-1 {
        border-radius: 999px !important;
        margin-left: 0px !important;
        margin-top: 3px !important;
    }
    
    /* Disabled on Smartphone */
    @media (max-width: 767px) {
        li[component="post"] a[href*="/groups/administrators"].badge {
                display: none !important;
            }
    }
    

    @DownPW Try something like

    li[component=post].isSolved a[href*="/groups/administrators"] {
        top: 52px;
    }
    
  • Perfect 😉


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics