Changing the background works perfectly as does changing the logo when you hover the mouse over it, but changing the logo for an hour does not work. I suspect that the problem lies in the bad execution of lines of the java script.
functions.php
<?php
add_action( 'login_enqueue_scripts', function () {
wp_enqueue_style( 'amereo-login-styles', get_theme_file_uri('login-styles.css'), [], false );
wp_enqueue_script( 'amereo-login-scripts', get_theme_file_uri('login-scripts.js'), [], false, true);
} );
login-scripts.js
console.log('works');
var date = new Date();
var hours = 1;
//var hours = date.getHours();
if (hours <= 1){
document.body.classList.add("a");
document.a.classList.add("night");
}
else if(hours <= 2){
document.body.classList.add("b");
document.a.classList.add("night");
}
else if(hours <= 3){
document.body.classList.add("c");
document.a.classList.add("night");
}
else if(hours <= 4){
document.body.classList.add("d");
document.a.classList.add("night");
}
else if(hours <= 5){
document.body.classList.add("e");
document.a.classList.add("night");
}
else if(hours <= 6){
document.body.classList.add("f");
document.a.classList.add("day");
}
else if(hours <= 7){
document.body.classList.add("g");
document.a.classList.add("day");
}
login-styles.css
#login a {
height:80px;
width:80px;
background-repeat: no-repeat;
}
#login a.day {
background-image: url("images/login_logo_day.png");
}
#login a.night {
background-image: url("images/login_logo_night.png");
}
#login a:hover {
background-image: url("images/login_logo_hover.png");
height:80px;
width:80px;
background-repeat: no-repeat;
}
My Answer:
To change the WordPress login panel logo with JavaScript, you can add the following code to your theme's functions.php file:
php
function custom_login_logo() {
?>
}
add_action('login_enqueue_scripts', 'custom_login_logo');
Make sure to replace `custom-logo.png` and `default-logo.png` with the actual paths to your custom logo and default logo images. This code will change the login panel logo to your custom logo when the page loads, and then revert back to the default logo after one hour.
Please note that modifying the login panel logo with JavaScript may not be the most secure or reliable method, as it relies on client-side scripting. It's recommended to use CSS for styling changes whenever possible.
Rate this post
4 of 5 based on 2781 votesComments