[NodeBB] Welcome Message with logo footer change

DownPW

I have a little project and I think it wasn’t complex for your awesome develloper skills

– That why I present it to you:

I have an ACP/HTML Widget to display our logo in the footer.

Starting from your javascript code (Welcome Message) base, I would like to be able to modify the footer logo according to the time ranges of the JS script.

In this way, the logo would change regularly.

– Here is my logic, you will tell me if it’s the right one or not of course:

Initially, the footer widget should have an ID/class and it should only be used for that.
This ID/class will be defined as a variable in the JS and the declaration of the image path will be done directly in the JS.

– Example:

00h00 - 06h00: Good night - Good night image logo
6:00 - 8:00: Good morning - Good morning logo
08h00 - 12h00: Welcome - Welcome logo
12:00-18:00: Good afternoon - Good afternoon logo
18:00 - 00:00: Good evening - Good evening logo

– Here, a start of reflection with my poor dev skills :

// ------------------------------------------
//Welcome Message and Footer Logo Change Widget
// ------------------------------------------
$(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 welcome = ('Welcome');
var afternoon = ('Good afternoon');
var evening = ('good evening');
var night = ('Good night')

// ------------------------------------------
var logo-morning = Local path to logo
var logo-welcome = Local path to logo
var logo-afternoon = Local path to logo
var logo-evening = Local path to logo
var logo-night = Local path to logo
// ------------------------------------------


if (thehours >= 0 && thehours < 6) {
themessage = night; 
// ------------------------------------------
ACTION TO CHANGE LOGO


} else if (thehours >= 6 && thehours < 9) {
themessage = morning;
// ------------------------------------------
ACTION TO CHANGE LOGO

} else if (thehours >= 9 && thehours < 12) {
themessage = welcome;
// ------------------------------------------
ACTION TO CHANGE LOGO

} else if (thehours >= 12 && thehours < 18) {
themessage = afternoon;
// ------------------------------------------
ACTION TO CHANGE LOGO

} else if (thehours >= 18 && thehours < 24) {
themessage = evening;
// ------------------------------------------
ACTION TO CHANGE LOGO

}

$('.getUsername').prepend(themessage);
});

Thanks in advance for your help mark

phenomlab

@DownPW Yes, you could easily do that with another footer widget like the below example

<center>
<br><br>
<img id="thislogo" src="path/to/my/image">
</center>

Then target the ID and change it with the below JS

thelogo = "/path/to/your/logo";
$("#thislogo").attr("src", thelogo);

So finally, your updated code would look like this

$(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');
    var matched = false;
    //thehours = 6
	if (thehours >= 0 && thehours < 12) {
		themessage = morning; 
		theicon = "fa-solid fa-sunrise";
		thelogo = "/assets/customlogo/logo1.png";

	} else if (thehours >= 12 && thehours < 17) {
		themessage = afternoon;
		theicon = "fa-solid fa-sun";
		thelogo = "/assets/customlogo/logo2.png";

	} else if (thehours >= 17 && thehours < 24) {
		themessage = evening;
		theicon = "fa-solid fa-moon";
		thelogo = "/assets/customlogo/logo3.png";
	}
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the user welcome message");
                $('#thisuser').hide();
            }
            else {
                	$('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage);
		        $("#thislogo").attr("src", thelogo);
            }
});

phenomlab

@DownPW The best way to do this would be to define the HTML block that is responsible for rendering the actual content. I have some thoughts around how this could work, and will revert soon.

phenomlab

@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 from FA based on the time of day. Here’s the code

$(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');
    var matched = false;
	if (thehours >= 0 && thehours < 12) {
		themessage = morning; 
		theicon = "fa-solid fa-sunrise";

	} else if (thehours >= 12 && thehours < 17) {
		themessage = afternoon;
		theicon = "fa-solid fa-sun";

	} else if (thehours >= 17 && thehours < 24) {
		themessage = evening;
		theicon = "fa-solid fa-moon";
	}
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the user welcome message");
                                  $('#thisuser').hide();
            }
            else {
                	$('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage);

            }
});

You’ll also need this CSS block

i#thisicon {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    margin-right: 10px;
}

The icon being delivered is defined here

$('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage);

So, theicon is the FA class, and themessage is the text you want to deliver.

We use prepend to add this before the remainder of the class target of .getUsername. The overall result is this

It’s also possible to “fake” the current time by placing thehours just after var matched = false;, so if you add thehours = 6 then this will be 6am, and so on. By overriding this, you won’t have to wait until the system clock changes to see if your code actually works or not

Using the example code above, you should be able to finish your own - let me know if you need any help.

DownPW

@phenomlab

I’m at work, I couldn’t test at the moment.
I will test tonight.

I think I must modify the code for include PNG logo files and modify CSS for have the logo at the footer of the page like this, actually with the widget footer

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');
    var matched = false;
	if (thehours >= 0 && thehours < 12) {
		themessage = morning; 
		theicon = "\assets\logo\logo1.png";

	} else if (thehours >= 12 && thehours < 17) {
		themessage = afternoon;
		theicon = "\assets\logo\logo2.png";

	} else if (thehours >= 17 && thehours < 24) {
		themessage = evening;
		theicon = "\assets\logo\logo3.png";
	}
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the user welcome message");
                                  $('#thisuser').hide();
            }
            else {
                	$('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage);

            }
});

CSS: we fixthe logo at the bottom of the page

i#thisicon {
     position: fixed;
     bottom: 50px;
}

phenomlab

@DownPW That on it’s own won’t work. You’d need to modify below

For example, if you were using theicon = "\assets\logo\logo3.png"; then you’d need

$('.getUsername').prepend("<img src='theicon' id="thisicon" + "'/>'" + themessage);

DownPW

Ok,

Or maybe have the icon and the logo !!!

$(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');
    var matched = false;
	if (thehours >= 0 && thehours < 12) {
		themessage = morning; 
                theicon = "fa-solid fa-sunrise";
		thelogo = "\assets\logo\logo1.png";

	} else if (thehours >= 12 && thehours < 17) {
		themessage = afternoon;
                theicon = "fa-solid fa-sun";
		thelogo = "\assets\logo\logo2.png";

	} else if (thehours >= 17 && thehours < 24) {
		themessage = evening;
                theicon ="fa-solid fa-moon"
		thelogo = "\assets\logo\logo3.png";
	}
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the user welcome message");
                                  $('#thisuser').hide();
            }
            else {
                	$('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage);

            }
});

phenomlab

@DownPW Yes, you could easily do that with another footer widget like the below example

<center>
<br><br>
<img id="thislogo" src="path/to/my/image">
</center>

Then target the ID and change it with the below JS

thelogo = "/path/to/your/logo";
$("#thislogo").attr("src", thelogo);

So finally, your updated code would look like this

$(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');
    var matched = false;
    //thehours = 6
	if (thehours >= 0 && thehours < 12) {
		themessage = morning; 
		theicon = "fa-solid fa-sunrise";
		thelogo = "/assets/customlogo/logo1.png";

	} else if (thehours >= 12 && thehours < 17) {
		themessage = afternoon;
		theicon = "fa-solid fa-sun";
		thelogo = "/assets/customlogo/logo2.png";

	} else if (thehours >= 17 && thehours < 24) {
		themessage = evening;
		theicon = "fa-solid fa-moon";
		thelogo = "/assets/customlogo/logo3.png";
	}
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the user welcome message");
                $('#thisuser').hide();
            }
            else {
                	$('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage);
		        $("#thislogo").attr("src", thelogo);
            }
});

DownPW

many thanks @phenomlab Mark, I will test all of that.

DownPW

@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] Welcome Message with logo footer change

Widgets ACP/HTML

Widget Footer Logo

Widget Welcome Message

CSS

JAVASCRIPT

Did this solution help you?

Related Topics

Block Domain

Forum Icons NodeBB

Changing Background on NodeBB

Bottom footer navbar button extend

Detect if user is admin

Sudonix Branding