can anyone please help with this last bit, ive only got basic knowledge. i've just thrown this together with generic images and stuff, just to get it working first. Can alter it later but right now. I need help with changing the background image when its toggled to night theme.
This is what is in html box:
This is what is in css box:
This is what is in html box:
HTML:
<input type="checkbox" id="toggle" class="toggle--checkbox">
<label for="toggle" class="toggle--label">
<span class="toggle--label-background"></span>
</label>
<div class="background"></div>
<center>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[URL]https://www.w3schools.com/w3css/4/w3.css[/URL]">
<body>
<div class="w3-content w3-display-container">
<img class="mySlides" src="[URL]https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=iQEwihUn[/URL]" style="width:33.5%">
<img class="mySlides" src="[URL]https://vcahospitals.com/-/media/2/vca/images/lifelearn-images-foldered/169/neut_thumbnail.ashx[/URL]" style="width:90%">
<button class="w3-button w3-purple w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-purple w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
<br>
<br>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 4px solid #140017;
background-color: #40014c;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: centre;
border: none;
outline: none;
cursor: pointer;
padding: 12px 16px;
transition: 0.3s;
font-size: 17.5px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #e444fc;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #666666;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Info')">Info</button>
<button class="tablinks" onclick="openCity(event, 'settings')">settings</button>
</div>
<!DOCTYPE html>
<html>
<head>
<link href='[URL]https://fonts.googleapis.com/css?family=Merienda[/URL]' rel='stylesheet'>
<style>
body {
font-family: 'Merienda';font-size: 22px;
}
</style>
</head>
<body>
<div id="Info" class="tabcontent">
<p>
<div style="border:8px Solid #140017;width:1100px;height:650px;overflow:scroll;padding:5px;background-color: #40014c;color: #00ffff;">
<font size="4">
blah blah blah info goes here
<br> </div></font>
</p>
</div></center>
<div id="settings" class="tabcontent">
<p>
<div style="border:8px Solid #140017;width:1100px;height:650px;overflow:scroll;padding:5px;background-color: #40014c;color: #00ffff;">
<font size="4">
blah blah blah settings goes here
<br> </div></font>
</p>
</div></center>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
<br>
<br>
<div align="center">
<b><u>My Current Time:</u></b>
<div style="text-align:center;width:400px;padding:1em 0;"> <a style="text-decoration:none;" href="[URL]http://www.zeitverschiebung.net/en/city/2643743[/URL]"><span style="color:blue;"></span> <iframe src="[URL='https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&timezone=Europe%2FLondon']https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&timezone=Europe/London[/URL]" width="100%" height="150" frameborder="0" seamless></iframe> <small style="color:blue;">© </div>
</div>
</center>
This is what is in css box:
CSS:
:root {
/** sunny side **/
--blue-background: #C2E9F6;
--blue-border: #72cce3;
--blue-color: #96dcee;
--yellow-background: #fffaa8;
--yellow-border: #f5eb71;
/** dark side **/
--indigo-background: #808fc7;
--indigo-border: #5d6baa;
--indigo-color: #6b7abb;
--gray-border: #e8e8ea;
--gray-dots: #e8e8ea;
/** general **/
--white: #fff;
}
* {
margin: 0;
padding: 0;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
position: relative;
}
.background {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: all 250ms ease-in;
background-image: url('[URL='https://i.pinimg.com/736x/dd/cb/ca/ddcbca39fba5a538d11f7715e84c590a.jpg%27);']https://i.pinimg.com/736x/dd/cb/ca/ddcbca39fba5a538d11f7715e84c590a.jpg');[/URL]
background-size: 100%;
}
.toggle--checkbox {
display: none;
}
.toggle--checkbox:checked {
/** This will all flip from sun to moon **/
/** Change the label color **/
}
.toggle--checkbox:checked ~ .background {
background: var(--indigo-background);
}
.toggle--checkbox:checked + .toggle--label {
background: var(--indigo-color);
border-color: var(--indigo-border);
/** Change the cloud to stars **/
/** Change the sun into the moon **/
/** Show the dimples on the moon **/
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background {
left: 60px;
width: 5px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
width: 5px;
height: 5px;
top: -25px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
width: 5px;
height: 5px;
left: -30px;
top: 20px;
}
.toggle--checkbox:checked + .toggle--label:before {
background: var(--white);
border-color: var(--gray-border);
animation-name: switch;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
.toggle--checkbox:checked + .toggle--label:after {
transition-delay: 350ms;
opacity: 1;
}
.toggle--label {
/** Placeholder element, starting at blue **/
width: 200px;
height: 100px;
background: var(--blue-color);
border-radius: 100px;
border: 5px solid var(--blue-border);
display: flex;
position: relative;
transition: all 350ms ease-in;
/** The sun cloud and moon stars **/
/** Sun/Moon element **/
/** Gray dots on the moon **/
}
.toggle--label-background {
width: 10px;
height: 5px;
border-radius: 5px;
position: relative;
background: var(--white);
left: 135px;
top: 45px;
transition: all 150ms ease-in;
}
.toggle--label-background:before {
content: "";
position: absolute;
top: -5px;
width: 40px;
height: 5px;
border-radius: 5px;
background: var(--white);
left: -20px;
transition: all 150ms ease-in;
}
.toggle--label-background:after {
content: "";
position: absolute;
top: 5px;
width: 40px;
height: 5px;
border-radius: 5px;
background: var(--white);
left: -10px;
transition: all 150ms ease-in;
}
.toggle--label:before {
animation-name: reverse;
animation-duration: 350ms;
animation-fill-mode: forwards;
transition: all 350ms ease-in;
content: "";
width: 82px;
height: 82px;
border: 5px solid var(--yellow-border);
top: 4px;
left: 4px;
position: absolute;
border-radius: 82px;
background: var(--yellow-background);
}
.toggle--label:after {
transition-delay: 0ms;
transition: all 250ms ease-in;
position: absolute;
content: "";
box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
left: 143px;
top: 23px;
width: 10px;
height: 10px;
background: transparent;
border-radius: 50%;
opacity: 0;
}
@keyframes switch {
0% {
left: 4px;
}
60% {
left: 4px;
width: 112px;
}
100% {
left: 104px;
width: 82px;
}
}
@keyframes reverse {
0% {
left: 104px;
width: 82px;
}
60% {
left: 72px;
width: 112px;
}
100% {
left: 4px;
}
}
Last edited by a moderator: