Skip to content

Custom badges

Solved Customisation
  • @phenomlab yes I can see it very well:

    Screen Shot 2023-05-30 at 11.48.30.png

    since your code has “/font-awesome/6.4.0/” in it, I assumed you are using pro version.

  • @crazycells No, it’s the free version

    https://cdnjs.com/libraries/font-awesome

    You only need the check mark itself 🙂

  • @phenomlab great then, are you planning to implement it on this forum?

    I need to tailor the code for my forum…

  • @crazycells Yes, I think I probably will.

  • @crazycells Ok, so, I found some time to look at this properly today.

    Here’s the result

    d735ea48-7d38-444f-9e8b-822196b3c877-image.png

    Notice the “Twitter-esque” verified badge?

    I found this

    https://commons.wikimedia.org/wiki/File:Twitter_Verified_Badge.svg and downloaded it, then uploaded it to /assets/public/images

    Then, I used the below CSS code

        li[component="post"] a[href*="/groups/verified"] {
            position: absolute !important;
            left: 2px;
            z-index: 2;
            margin-top: 1px;
            border-radius: 999px !important;
            line-height: 14px;
            display: block;
            height: auto;
            margin-left: 0px !important;
            background: transparent !important;
            width: auto;
        }
    
        li[component=post] a[href*="/groups/verified"]:before {
            background: url(https://sudonix.org/assets/images/Twitter_Verified_Badge.svg) !important;
            content: "";
            height: 22px;
            width: 22px;
            display: block;
        }
        li[component=post] a[href*="/groups/verified"]:after {
            background: #ffffff !important;
            height: 9px;
            width: 9px;
            content: "";
            display: block;
            top: 10px;
            position: absolute;
            z-index: -1;
            left: 12px;
        }
    

    Some points to consider

    • The CSS code extensively uses :before and :after pseudo elements. Essentially, :before adds the SVG icon and positions it, and :after adds a smaller “white square” which is conveniently positioned behind the :before element using z:-index: -1;

    The purpose of the “white square” is to provide a dirty way to fill in the transparency which is present in the SVG so it looks right.

    This is pretty tough to display on mobile viewports, so it’s best to hide it completely using this code

    @media (max-width: 767px) {
        li[component="post"] a[href*="/groups/verified"].badge, .account a[href*="/groups/verified"].badge {
                display: none !important;
            }
    

    EDIT: Just realised that this icon (being a group) is also displayed on the user’s profile page, so we’ll need CSS to make that look good too…

    7744fb9d-2994-4159-9732-d4a717511af0-image.png
    I’ve absolutely no idea who this guy is… 🙂

    Here it is

        .account a[href*="/groups/verified"] {
            position: absolute !important;
            z-index: 2;
            background: transparent !important;
            margin-left: -10px;
        }
        .account a[href*="/groups/verified"]:after {
            background: #ffffff !important;
            height: 9px;
            width: 10px;
            content: "";
            display: block;
            top: 10px;
            position: absolute;
            z-index: -1;
            left: 12px;
        }
        .account a[href*="/groups/verified"]:before {
            background: url(https://sudonix.org/assets/images/Twitter_Verified_Badge.svg) !important;
            content: "";
            height: 22px;
            width: 22px;
            display: block;
        }
    

    Enjoy.

  • hello @phenomlab

    I am trying to apply your code for the “all” group which all my members are part of.

    43c6f309-bbfe-41ae-891b-b52a28d04fdd-image.png

    I downlaod the image of the twitter badge in full resolution and upload in the same place and I access it correctly.

    On the other hand it would seem that the badge is displayed badly (cut on the right for the first on the screen) then transparent for the second and on the 3rd it is not displayed aps.

    An idea ?

    image.png

  • @DownPW it’s really hard to see that image. I’ll need to look at your dev server directly to see what’s happening here.

  • I just found some answers @phenomlab

    It is absolutely necessary that the user is displaying the badge of the group in his profile:

    18ac2ada-5234-4848-a00b-59e6d3ef1116-image.png

    That the question, How to force put the user in a group ?
    For the rest of the display bugs, I have not yet found.

  • @DownPW said in Custom badges:

    It is absolutely necessary that the user is displaying the badge of the group in his profile:

    Yes, it won’t display without that. I don’t know of a way to force it either.

  • If I apply light themes we see better.
    In fact, ther badge is cut on the right and we have the dexcription badge below :

    image.png

  • @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.


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
  • how to hide "moved" badge with CSS?

    Solved Customisation
    12
    3 Votes
    12 Posts
    491 Views

    @crazycells ah, I see. That makes sense.

  • www. Infront stops website access?

    Solved Configure
    10
    1 Votes
    10 Posts
    453 Views

    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.

  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    282 Views

    @Panda said in Nodebb design:

    One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum.

    From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over.

    @Panda said in Nodebb design:

    The “write api” is preferred for server-to-server interactions.

    This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write.

    A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase.

    You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.

  • 1 Votes
    1 Posts
    330 Views
    No one has replied
  • 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.

  • Top Ranked Forums

    Chitchat
    9
    3 Votes
    9 Posts
    570 Views

    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base.

    Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information.

    Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.

  • Dark Theme Upper Padding

    Solved Customisation
    7
    6 Votes
    7 Posts
    515 Views

    @DownPW great! thanks a lot… this code solves my problem.

  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    1k Views

    @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