Skip to content

[NODEBB] Welcome Message

Solved Customisation
20 4 4.8k 1
  • Hi @phenomlab

    I see a welcome Message at the right of your website

    3effa4e1-3053-49dc-a323-a93d9f19089e-image.png

    I have an HTML widget on ACP with this code :

    <div class="getUsername">Bonjour, <a href="/me"><span class="username">MY USERNAME</span></a></div>
    

    And my CSS :

    .getUsername {
        padding-top: 20px;
        padding-bottom: 5px;
        text-align: right;
        font-size: 90%;
        line-height: 2.4;
        font-weight: bold;
    }
    

    Everything is good except the main one, the display of the username.

    I saw that you used the /me on aHref, that can be added in the URL (https://XXXXX.XX/me) to point to the user profile

    But how do you display the name of it because my HTML code displays what I ask it to display. In other words “MY USERNAME”

    In other words how do you display the name of the user? With JS?

    8a81bea0-8433-4949-b23d-e68002528812-image.png

    Other things, At this time it is indicated “good evening”.

    Quiz of when is the start of the day 🙂

  • Hi @phenomlab

    I see a welcome Message at the right of your website

    3effa4e1-3053-49dc-a323-a93d9f19089e-image.png

    I have an HTML widget on ACP with this code :

    <div class="getUsername">Bonjour, <a href="/me"><span class="username">MY USERNAME</span></a></div>
    

    And my CSS :

    .getUsername {
        padding-top: 20px;
        padding-bottom: 5px;
        text-align: right;
        font-size: 90%;
        line-height: 2.4;
        font-weight: bold;
    }
    

    Everything is good except the main one, the display of the username.

    I saw that you used the /me on aHref, that can be added in the URL (https://XXXXX.XX/me) to point to the user profile

    But how do you display the name of it because my HTML code displays what I ask it to display. In other words “MY USERNAME”

    In other words how do you display the name of the user? With JS?

    8a81bea0-8433-4949-b23d-e68002528812-image.png

    Other things, At this time it is indicated “good evening”.

    Quiz of when is the start of the day 🙂

    @downpw said in [NODEBB] Welcome Message:

    Other things, At this time it is indicated “good evening”.

    good idea @phenomlab, this should be implemented into core IMO.

  • @downpw said in [NODEBB] Welcome Message:

    Other things, At this time it is indicated “good evening”.

    good idea @phenomlab, this should be implemented into core IMO.

    @jac @DownPW here’s the function I put together than will need to be added into your Custom JS

    $(window).on('action:ajaxify.end', function (data) {
        function updateUsername() {
            $('.getUsername .username').text(app.user.username);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', updateUsername);
        } else {
            updateUsername();
        }
        var thehours = new Date().getHours();
    	var themessage;
    	var morning = ('Good morning');
    	var afternoon = ('Good afternoon');
    	var evening = ('Good evening');
    
    	if (thehours >= 0 && thehours < 12) {
    		themessage = morning; 
    
    	} else if (thehours >= 12 && thehours < 17) {
    		themessage = afternoon;
    
    	} else if (thehours >= 17 && thehours < 24) {
    		themessage = evening;
    	}
    
    	$('.getUsername').prepend(themessage);
    });
    

    Then use a custom HTML widget with the below

    <!-- IF loggedIn -->
    <div class="getUsername">, <a href="/me"><span class="username"></span></a></div>
    <!-- ENDIF loggedIn -->
    
  • @jac @DownPW here’s the function I put together than will need to be added into your Custom JS

    $(window).on('action:ajaxify.end', function (data) {
        function updateUsername() {
            $('.getUsername .username').text(app.user.username);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', updateUsername);
        } else {
            updateUsername();
        }
        var thehours = new Date().getHours();
    	var themessage;
    	var morning = ('Good morning');
    	var afternoon = ('Good afternoon');
    	var evening = ('Good evening');
    
    	if (thehours >= 0 && thehours < 12) {
    		themessage = morning; 
    
    	} else if (thehours >= 12 && thehours < 17) {
    		themessage = afternoon;
    
    	} else if (thehours >= 17 && thehours < 24) {
    		themessage = evening;
    	}
    
    	$('.getUsername').prepend(themessage);
    });
    

    Then use a custom HTML widget with the below

    <!-- IF loggedIn -->
    <div class="getUsername">, <a href="/me"><span class="username"></span></a></div>
    <!-- ENDIF loggedIn -->
    

    @phenomlab

    Oh my God ^^
    I wonder where did you learn to code JS like this?

  • @jac @DownPW here’s the function I put together than will need to be added into your Custom JS

    $(window).on('action:ajaxify.end', function (data) {
        function updateUsername() {
            $('.getUsername .username').text(app.user.username);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', updateUsername);
        } else {
            updateUsername();
        }
        var thehours = new Date().getHours();
    	var themessage;
    	var morning = ('Good morning');
    	var afternoon = ('Good afternoon');
    	var evening = ('Good evening');
    
    	if (thehours >= 0 && thehours < 12) {
    		themessage = morning; 
    
    	} else if (thehours >= 12 && thehours < 17) {
    		themessage = afternoon;
    
    	} else if (thehours >= 17 && thehours < 24) {
    		themessage = evening;
    	}
    
    	$('.getUsername').prepend(themessage);
    });
    

    Then use a custom HTML widget with the below

    <!-- IF loggedIn -->
    <div class="getUsername">, <a href="/me"><span class="username"></span></a></div>
    <!-- ENDIF loggedIn -->
    

    @phenomlab No idea if this is for me or @DownPW but it is very clever indeed! does it show on mobile?

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

  • @phenomlab

    Oh my God ^^
    I wonder where did you learn to code JS like this?

    @downpw said in [NODEBB] Welcome Message:

    I wonder where did you learn to code JS like this?

    30 years experience 🙂

  • @phenomlab No idea if this is for me or @DownPW but it is very clever indeed! does it show on mobile?

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    @jac said in [NODEBB] Welcome Message:

    very clever indeed! does it show on mobile?

    Yes, natively, but I use CSS to hide it.

    @jac said in [NODEBB] Welcome Message:

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

  • @phenomlab

    Oh my God ^^
    I wonder where did you learn to code JS like this?

    @downpw said in [NODEBB] Welcome Message:

    I wonder where did you learn to code JS like this?

    The firm I work for uses a worfkflows system which I wrote from scratch. It’s used to track the onboarding, departures, application requests etc of users, and is also an audit source. Been a developer for years…

  • @jac said in [NODEBB] Welcome Message:

    very clever indeed! does it show on mobile?

    Yes, natively, but I use CSS to hide it.

    @jac said in [NODEBB] Welcome Message:

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

    @phenomlab said in [NODEBB] Welcome Message:

    @jac said in [NODEBB] Welcome Message:

    very clever indeed! does it show on mobile?

    Yes, natively, but I use CSS to hide it.

    @jac said in [NODEBB] Welcome Message:

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

    Brilliant Mark, thank you as always for the work on my forum and for the continuation of help.

  • @phenomlab said in [NODEBB] Welcome Message:

    @jac said in [NODEBB] Welcome Message:

    very clever indeed! does it show on mobile?

    Yes, natively, but I use CSS to hide it.

    @jac said in [NODEBB] Welcome Message:

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

    Brilliant Mark, thank you as always for the work on my forum and for the continuation of help.

    @jac Pleasure.

  • @jac said in [NODEBB] Welcome Message:

    very clever indeed! does it show on mobile?

    Yes, natively, but I use CSS to hide it.

    @jac said in [NODEBB] Welcome Message:

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

    @phenomlab said in [NODEBB] Welcome Message:

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

    TWO WORDS: RESPECT, THANKS 🙂

  • DownPWundefined DownPW has marked this topic as solved on
  • @jac said in [NODEBB] Welcome Message:

    very clever indeed! does it show on mobile?

    Yes, natively, but I use CSS to hide it.

    @jac said in [NODEBB] Welcome Message:

    The idea is fantastic Mark, is there a point where you think yes my ideas are used by others but having the same features across a few forums, does that bother you or would you say this is why you created Sudonix?

    Absolutely not. I know that my ideas have been accepted and used by @JAC @DownPW @kurulumuNet and I’m happy that others find them useful. There’s no copyright here - anything you want to take and use is, like the platform itself, free.

    @phenomlab said in [NODEBB] Welcome Message:

    Yes, natively, but I use CSS to hide it.

    Can you give me your CSS code for hide on mobile ?

  • DownPWundefined DownPW has marked this topic as unsolved on
  • @phenomlab said in [NODEBB] Welcome Message:

    Yes, natively, but I use CSS to hide it.

    Can you give me your CSS code for hide on mobile ?

    @downpw Sure. Very simple - just place this in your mobile CSS block

    .getUsername {
      display: none;
    }
    
  • Great. That’s work !

    Easy as pie.
    Why didn’t I think of it?

    😉

  • DownPWundefined DownPW has marked this topic as solved on
  • What is your CSS for this @phenomlab ?
    I have small bug on Unread categorie for example with this code I wrote:

    .getUsername {
        float: right;
        font-family: 'Poppins';
        font-size: 1.6rem;
        line-height: 1.8;
        color: #898989;
        font-weight: 400;
    }
    

    2040e9b0-d14f-48a8-a681-782667985337-image.png

  • What is your CSS for this @phenomlab ?
    I have small bug on Unread categorie for example with this code I wrote:

    .getUsername {
        float: right;
        font-family: 'Poppins';
        font-size: 1.6rem;
        line-height: 1.8;
        color: #898989;
        font-weight: 400;
    }
    

    2040e9b0-d14f-48a8-a681-782667985337-image.png

    @downpw I use the below - essentially, using padding to overcome this

    .getUsername {
        padding-top: 20px;
        text-align: right;
    }
    
  • @downpw Sure. Very simple - just place this in your mobile CSS block

    .getUsername {
      display: none;
    }
    

    @phenomlab
    To hide only on mobile / tablet you can use max-width,
    For example:

    @media (max-width: 970px) {
         .getUsername {
       display: none;
    }
    }
    
  • @jac @DownPW here’s the function I put together than will need to be added into your Custom JS

    $(window).on('action:ajaxify.end', function (data) {
        function updateUsername() {
            $('.getUsername .username').text(app.user.username);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', updateUsername);
        } else {
            updateUsername();
        }
        var thehours = new Date().getHours();
    	var themessage;
    	var morning = ('Good morning');
    	var afternoon = ('Good afternoon');
    	var evening = ('Good evening');
    
    	if (thehours >= 0 && thehours < 12) {
    		themessage = morning; 
    
    	} else if (thehours >= 12 && thehours < 17) {
    		themessage = afternoon;
    
    	} else if (thehours >= 17 && thehours < 24) {
    		themessage = evening;
    	}
    
    	$('.getUsername').prepend(themessage);
    });
    

    Then use a custom HTML widget with the below

    <!-- IF loggedIn -->
    <div class="getUsername">, <a href="/me"><span class="username"></span></a></div>
    <!-- ENDIF loggedIn -->
    

    For anyone reviewing this post, there’s an updated version here that also includes an sunrise / sun / moon icon depending on the time of day

    https://sudonix.com/topic/233/nodebb-welcome-message-with-logo-footer-change/3?_=1645445273209

  • phenomlabundefined phenomlab referenced this topic on
  • Hello,

    I have a question regarding a problem my user is experiencing with this Welcome message.
    This user is not in France.

    It’s 7:40 a.m. for him, so 1:40 a.m. in France, and the banner wishes me a “good afternoon.” I don’t know what time zone it thinks I’m in, but it’s wrong…

    And nodebb displays 11:40 p.m. on the right once posted, so GMT.
    Which isn’t the afternoon either.

    How does this script get the time? It looks like it’s getting the time from the client, meaning the computer or device of the person visiting your site.
    But it seems that in this specific case, the correct time isn’t being retrieved.

    How can I fix this?

  • Hello,

    I have a question regarding a problem my user is experiencing with this Welcome message.
    This user is not in France.

    It’s 7:40 a.m. for him, so 1:40 a.m. in France, and the banner wishes me a “good afternoon.” I don’t know what time zone it thinks I’m in, but it’s wrong…

    And nodebb displays 11:40 p.m. on the right once posted, so GMT.
    Which isn’t the afternoon either.

    How does this script get the time? It looks like it’s getting the time from the client, meaning the computer or device of the person visiting your site.
    But it seems that in this specific case, the correct time isn’t being retrieved.

    How can I fix this?

    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system.

    I’ve not seen this issue myself but would like to see some examples of screenshots if possible.


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
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    653 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.
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    3k 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.
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    2k Views
    @phenomlab YAY! It works Thanks so much
  • CSS3: Gradient Generator

    Development css gradient
    1
    1 Votes
    1 Posts
    408 Views
    No one has replied
  • what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    2k Views
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 1653494282106-3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • 5 Votes
    9 Posts
    4k 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); } });
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    2k Views
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    1k Views
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 1633427929198-7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .