Skip to content

Custom badges

Solved Customisation
  • @DownPW yes, that’s just going to be positioning. Remember we are using position: absolute; and your CSS is likely to differ so you may need to tweak the positioning slightly to suit.

  • hi @phenomlab, we should be able to download this…

    https://commons.wikimedia.org/wiki/File:Twitter_Verified_Badge.svg

    …and recolor it accordingly and upload it to the forum the same way, right? These colors are reminding everyone “twitter” , I believe it would be nicer if it is changed according to the personality of the forum, so it will look more original while maintaining “meaning”…

    I think here on this forum, “sudonix orange” color would look cooler than “twitter blue”

  • additionally, these pages need some adjustments: https://sudonix.org/user/phenomlab

    Screen Shot 2023-07-13 at 14.55.20.png

  • @crazycells that’s odd. Shouldn’t look like that (at least, it doesn’t on my device). What device are you using?

  • @crazycells hmm. That’s a good idea. Let me have a look at that.

  • I had already reported this little problem to you @phenomlab

    The problem only occurs on the profile of other users and not on his own profile. (of memories)

    For my part, I solved this bug with the following code (to be adapted)

    /*----------------------------------------------------------------------------*/
    /*-------------------      USER PROFILE ANIMATION     ------------------------*/
    /*----------------------------------------------------------------------------*/
    
    /*[component="profile/change/picture"] img {
        z-index: 300 !important;
    }*/
    
    
    .avatar-wrapper:before {
        animation-iteration-count: infinite;
        animation: pulsate 4s ease-out infinite;
        border-radius: 50%;
        border: 15px solid var(--bs-link-color);
        content: "";
        height: 180px;
        left: -19px;
        top: -19px;
        opacity: 0;
        position: absolute;
        width: 180px;
        z-index: -1;
    }
    
    /* Change z-index Cover img profile for animation effect */
    .cover, .cover>.container {
        z-index: -2;
    }
    
    /* Avatar on user profile page */
    .account .avatar-wrapper {
        /* border: 4px solid var(--bs-link-color); */
        margin-right: 20px;
    }
    
  • @DownPW yes, I remember, but anything that uses absolute positioning will always be problematic when it comes to dynamically placing elements when the browser window is resized.

    I have another idea which I’m going to try. If that doesn’t work, I’ll likely remove this altogether.

  • @DownPW yeap, you are absolutely right. I have just checked, it is not on my profile, but anyone else…

  • @crazycells This proved to be much harder than I anticipated. The issue here is that the background is already transparent, so if you make the rosette itself transparent, you can no longer use the :after element as it’s designed to fill in the check mark - not the remainder of the image.

    The only real way this would be possible and without losing yourself in overlapping CSS code would be to edit the image with Illustrator, or InkScape (Open Source) and change the rosette and border colour according to taste.

    Ultimately, it’s not possible to change this on the fly using CSS without significant work. As a result of this, plus your idea yesterday, I have elected to use a Font Awesome icon (Shield with Check Mark) and have made it “Sudonix Orange”.

  • @DownPW so me a favor, and let me know if the CSS you provided works as expected when browsing users as a guest? I’m not using the same CSS, but a slightly modified version.

    Interested to get other experiences.

  • @phenomlab thanks for the explanation. I assumed it would not be easy, and additionally, if it is easy for you, it was going to be harder for me… since it is already hard for you, I give up 😄

    by the way, I was referring to the orange color in your logo, but I see that the stars are “sudonix orange” and the checkmark is changing depending on the theme you are in…

    But in any case, I believe these more “coherent” colors definitely look better than the previous version… 👍

  • @crazycells yes, I noticed that too. It’s because that specific element uses the link color variable which changes with the theme. I need to create a static entry for that as it’s not intended behavior.

  • @phenomlab in any case, it looks better than yesterday though 🙂

  • 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? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    597 Views

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • nodebb error logs

    Bugs
    6
    4 Votes
    6 Posts
    379 Views

    I just wanted to ask because I don’t have much knowledge about the new installation.
    Thank you for the explanatory answer.

  • Nodebb 3.2.0

    Bugs
    20
    2 Votes
    20 Posts
    890 Views

    @crazycells yes, I’m aware of that. Need to fix

    EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below

    li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    447 Views

    @Sala This should look better

    .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png

    You can increase the top and bottom padding by increasing the values above.

  • How to fix size of photos & videos NodeBB

    Solved Customisation
    7
    3 Votes
    7 Posts
    657 Views

    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt

    https://stackoverflow.com/questions/609517/why-em-instead-of-px

  • Adding fileWrite to nodebb code

    Solved Configure
    16
    5 Votes
    16 Posts
    772 Views

    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.

  • Recent Cards plugin customization

    Solved Customisation
    21
    13 Votes
    21 Posts
    3k Views

    @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); }); }); });
  • [NodeBB] Custom fields plugin

    Unsolved Customisation
    5
    0 Votes
    5 Posts
    906 Views

    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?