Skip to content

[NODEBB] Welcome Message

Solved Customisation

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
  • navigation menu panel on mobile

    Solved Customisation
    8
    7 Votes
    8 Posts
    479 Views

    @crazycells hmm. Thatā€™s odd. I havenā€™t made any changes from recollection but I could be wrong. Iā€™ll need to check.

    EDIT - very strange. I honestly donā€™t recall adding the below CSS block to alter the bottom bar, but youā€™re rightā€¦

    .bottombar-nav { padding: 0px !important; }

    Iā€™ve removed this so it reflects stock Harmony.

  • Whitespace fixes in Nodebb

    Solved Customisation
    18
    7 Votes
    18 Posts
    1k Views

    @Panda Just circling back here with something of an update (which I think youā€™ll like). Iā€™ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, youā€™ll notice that the ranks are now icons.

    I also removed the ā€œAuthorā€ badge, and made this a single icon, which (to me) looks much better.

  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    1k Views

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • NodeBB v3

    Announcements
    2
    3 Votes
    2 Posts
    235 Views

    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.

  • 2 Votes
    10 Posts
    1k Views

    @DownPW

    We just have to change the cycles automatically according to each period ?

    Yes, this is by far the safest

    I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems.

    Itā€™s certainly possible, but not without issues or impact to performance (in my view)

  • 5 Votes
    9 Posts
    2k Views

    @phenomlab

    Very very great Mark šŸ˜‰
    Thanks again, Itā€™s perfect now !

    ā€“> I share my code that I modified.

    Iā€™ve added French and English comments.
    If you see things to change Mark, donā€™t hesitate.

    As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture.

    You can also very well add/remove time slots and change welcome messages to suit your needs.

    Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS

    ā€“ I added the size font-weight: 900; in the CSS because otherwise some FA icon wasnā€™t displayed correctly and reduce margin :

    i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On dĆ©sactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icĆ“ne et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On rĆ©cupĆØre le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On dĆ©clare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appĆ©tit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le rĆ©sultat du code en spĆ©cifiant une heure (!!!IMPORTANT: Commenter une fois le script testĆ©!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On dĆ©clare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on dĆ©sactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • Discourse Design Change

    Customisation
    25
    7 Votes
    25 Posts
    2k Views

    @phenomlab okay

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    3k Views

    @phenomlab brilliant, many thanks Mark šŸ˜