I have playing with the a Login screen by altering $nuWelcomeBodyInnerHTML within nuconfig.php. As its the coming up to Christmas I tried messing around with adding css and javascript snowflakes I tried various css styles and javascript scripts. Best result I had was one snow flake dropping from top to bottom.
Added to nuconfig.php
$nuConfigIncludeCSS .= "
<style>
.snowflakes {
position: fixed; /* Fixes the container in place */
top: 0;
left: 0;
width: 100%; /* Full width of the viewport */
height: 100vh; /* Full height of the viewport */
overflow: hidden;
pointer-events: none; /* Prevent interaction with snowflakes */
z-index: 9999; /* Ensure snowflakes appear on top */
}
.snowflake {
position: absolute;
color: #ffffff;
font-size: 1.5em;
opacity: 0.8;
user-select: none;
animation: snow 5s linear infinite;
background-color: red; /* Temporary color to debug */
}
@keyframes snow {
0% {
transform: translateY(0) translateX(0);
}
100% {
transform: translateY(100vh) translateX(100vw); /* Moves snowflakes down and across the screen */
}
}
</style>
";
$nuConfigIncludeJS .= "
<script>
document.addEventListener('DOMContentLoaded', function() {
let snowflakesContainer = document.createElement('div');
snowflakesContainer.classList.add('snowflakes');
document.body.appendChild(snowflakesContainer); // Append snowflakes container to the body
// Create snowflakes dynamically
for (let i = 0; i < 50; i++) { // Change the number as needed
let snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflakesContainer.appendChild(snowflake);
// Randomize horizontal and vertical starting positions
snowflake.style.left = Math.random() * 100 + 'vw'; // Random horizontal position
snowflake.style.top = Math.random() * 100 + 'vh'; // Random vertical position
// Randomize animation delay and duration
snowflake.style.animationDelay = Math.random() * 5 + 's'; // Random delay between 0 and 5 seconds
snowflake.style.animationDuration = (Math.random() * 5 + 5) + 's'; // Random duration between 5 and 10 seconds
}
});
</script>
";
That didn't do anything apart from show 6 snow flakes on the left hand side of the screen and static, so then I played around and added
to the bottom of index.php the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<!-- Other head elements -->
<!-- Snowflakes Styles -->
<style>
/* Basic snowflake styles */
.snowflake {
position: absolute;
top: -10px;
color: #fff;
font-size: 24px;
z-index: 9999;
pointer-events: none;
user-select: none;
animation: snow 10s linear infinite;
}
@keyframes snow {
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<!-- Login Form HTML Here -->
<div id="loginForm">
<!-- Actual login form content -->
</div>
<!-- Snowflakes JavaScript -->
<script>
// Number of snowflakes
var snowflakeCount = 50;
// Function to create snowflakes
function createSnowflakes() {
for (var i = 0; i < snowflakeCount; i++) {
var snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄'; // Unicode snowflake symbol
snowflake.style.left = Math.random() * 100 + '%';
snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // Snowflakes falling speed
snowflake.style.animationDelay = Math.random() * 5 + 's'; // Random delay
document.body.appendChild(snowflake);
}
}
// Create snowflakes when the page is loaded
window.onload = function() {
createSnowflakes();
};
</script>
</body>
</html>
I now see 1 white snowflake falling from the top left to the bottom left. As this is just a little temporary alteration I dont want to mess around to much with nubuilders core files and just wondered if anybody else had tried doing anything like this?
Welcome to the nuBuilder Forums!
Register and log in to access exclusive forums and content available only to registered users.
Register and log in to access exclusive forums and content available only to registered users.
Custom Login Screen
-
- nuBuilder Team
- Posts: 4292
- Joined: Sun Oct 14, 2018 6:43 pm
- Has thanked: 71 times
- Been thanked: 444 times
- Contact:
Re: Custom Login Screen
Hi,
Should it only snow on the login screen or also everywhere after logging into the nuBuilder?
Should it only snow on the login screen or also everywhere after logging into the nuBuilder?
Re: Custom Login Screen
Hi ricklincs,
You could do this...
Create a file like this called bob.js (in the same directory as nuconfig.php) ...
And create a file like this called bob.css (in the same directory as nuconfig.php) ... ...
Add this to nuconfig.php...
You want to make sure the web page has loaded before running bob.js to create your snowflakes.
Because you can't append snowflakes to a page that doesn't yet exist.
So you could add this to nuBuilder - unless there is a better way...
Steven
You could do this...
Create a file like this called bob.js (in the same directory as nuconfig.php) ...
Code: Select all
function bob(){
const snowflakesContainer = $('<div>', {
class: 'snowflakes',
'aria-hidden': 'true'
});
// Create and append the snowflake elements
for (let i = 0; i < 12; i++) {
const snowflake = $('<div>', { class: 'snowflake' });
const inner = $('<div>', { class: 'inner', text: '❅' });
snowflake.append(inner);
snowflakesContainer.append(snowflake);
}
// Append the entire container to the body (or a specific element)
$('body').append(snowflakesContainer);
}
And create a file like this called bob.css (in the same directory as nuconfig.php) ... ...
Code: Select all
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
.snowflake,.snowflake .inner{
animation-iteration-count:infinite;
animation-play-state:running
}
.inner {
color:grey;
}
@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}
@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}
Add this to nuconfig.php...
Code: Select all
$nuConfigIncludeCSS = "bob.css";
$nuConfigIncludeJS = "bob.js";
You want to make sure the web page has loaded before running bob.js to create your snowflakes.
Because you can't append snowflakes to a page that doesn't yet exist.
So you could add this to nuBuilder - unless there is a better way...
Steven
You do not have the required permissions to view the files attached to this post.
A short post is a good post.
Re: Custom Login Screen
Was just after it on the login screen for a few weeks with the run up to Christmas. Thanks Steven and Ke1vin for your time. Will give this a try.
Re: Custom Login Screen
sorry just one question, where should I be putting <?php function nuLoadBody() { echo "<body id='nubody' onLoad='nuLoad();bob()' onesize='nuResize()'>"; }
Re: Custom Login Screen
In the file nuindexlibs.php...
Steven
Steven
You do not have the required permissions to view the files attached to this post.
A short post is a good post.