[NODEBB] Welcome Message

[DownPW]

Hi @phenomlab

I see a welcome Message at the right of your website

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?

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

Quiz of when is the start of the day

[JAC]

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

[phenomlab]

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

[DownPW]

@phenomlab

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

[JAC]

@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]

@downpw said in [NODEBB] Welcome Message:

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

30 years experience

[phenomlab]

@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]

@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]

@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]

@jac Pleasure.

[DownPW]

@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

[DownPW]

@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 ?

[phenomlab]

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

.getUsername {
  display: none;
}

[DownPW]

Great. That’s work !

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

[DownPW]

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

[phenomlab]

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

.getUsername {
    padding-top: 20px;
    text-align: right;
}

[elhana fine]

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

@media (max-width: 970px) {
     .getUsername {
   display: none;
}
}

[phenomlab]

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

[NodeBB] Welcome Message with logo footer change

@DownPW I’ve done something similar here on Sudonix, but using the welcome message at the top of the screen. It’s been modified to include an icon fro...(more)

Sudonix | A one-stop-shop for all your technology questions