Skip to content
Sudonix

Custom badges

Solved Customisation
103 4 26.3k 2
  • DownPWundefined

    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;
        }
}

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    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;
        }
}
    phenomlabundefined

    @DownPW Try something like

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

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    3
  • DownPWundefined

    Perfect 😉

    PW and WS Spirit alive

    2
Log in to reply

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
  • crazycellsundefined

    CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    2k Views
    phenomlabundefined
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • phenomlabundefined

    Unable to change icon in NodeBB navigation

    Tips navigation nodebb
    1
    7
    1 Votes
    1 Posts
    558 Views
    No one has replied
  • Salaundefined

    The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    1k Views
    phenomlabundefined
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • cagatayundefined

    Podcast Share NodeBB

    Solved Configure podcast nodebb
    15
    4 Votes
    15 Posts
    2k Views
    phenomlabundefined
    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.
  • cagatayundefined

    Q&A Plugin Changes NodeBB

    Solved Customisation nodebb q&a plugin
    25
    1
    6 Votes
    25 Posts
    6k Views
    cagatayundefined
    @phenomlab said in Q&A Plugin Changes NodeBB: float: right; left: 10px; } worked thank you
  • crazycellsundefined

    Recent Cards plugin customization

    Solved Customisation nodebb
    21
    1
    13 Votes
    21 Posts
    7k Views
    phenomlabundefined
    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border In essence, the below should work $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    82k Views
    DownPWundefined
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!
  • JACundefined

    [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    2k Views
    JACundefined
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed