John the fishermen
Neues Mitglied
Hey,
habe aktuell folgendes Problem, wenn ich über den Firefox das Layout über eine Seite ändere. Wird diese Änderung nicht auf den Folgeseiten übernehmen. Es klappt aber bei allen anderen Browsern bisher die ich getestet habe (Opera, Edge, Chrome). Ich nutze phpstorm und wenn ich dort auf die Firefox Preview gehe funktioniert es. Dachte es hätte zuerst was mit dem Cache oder einer Firefox Einstellung zu tun, aber habe dort nichts behilfliches gefunden.
Hab leider im Internet nichts konkretes finden können über das Thema und hoffe ihr habt einen Rat. Vielen lieben Dank
Die Seite wo das Layout gesteuert werden soll:
Die Hauptseite:
CSS Code default Layout beispiel:
habe aktuell folgendes Problem, wenn ich über den Firefox das Layout über eine Seite ändere. Wird diese Änderung nicht auf den Folgeseiten übernehmen. Es klappt aber bei allen anderen Browsern bisher die ich getestet habe (Opera, Edge, Chrome). Ich nutze phpstorm und wenn ich dort auf die Firefox Preview gehe funktioniert es. Dachte es hätte zuerst was mit dem Cache oder einer Firefox Einstellung zu tun, aber habe dort nichts behilfliches gefunden.
Hab leider im Internet nichts konkretes finden können über das Thema und hoffe ihr habt einen Rat. Vielen lieben Dank
Javascript:
function initThemeSelector() {
const themeSelect = document.getElementById("themeSelect");
const themeStylesheetLink = document.getElementById("themeStylesheetLink");
const currentTheme = localStorage.getItem("theme") || "default";
function activateTheme(themeName) {
themeStylesheetLink.setAttribute("href", `css/${themeName}.css`);
}
themeSelect.addEventListener("change", () => {
activateTheme(themeSelect.value);
localStorage.setItem("theme", themeSelect.value);
});
themeSelect.value = currentTheme;
activateTheme(currentTheme);
}
initThemeSelector();Die Seite wo das Layout gesteuert werden soll:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gear</title>
<script src="js/startseite.js"></script>
<link rel="stylesheet" id="themeStylesheetLink" href="css/default.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<main class="themeSelect">
<tr><td><a id="startseite"><h1>Theme Switcher</h1></a></td></tr>
<tr>
<td> <select id="themeSelect" class="themeSelect">
<option value="default">Default</option>
<option value="light">Light</option>
<option value="ocean">Ocean</option>
<option value="Goblin">Goblin</option>
<option value="desert">Desert</option>
</select>
</td>
</tr>
<!-------------------------------------ENDE------------------------------------------------->
</body>
<script src="js/layoutchanger.js"></script>
</html>Die Hauptseite:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<link rel="stylesheet" id="themeStylesheetLink" href="css/default.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<table id="haupt">
<tr><td><a id="startseite" href="startseite.html"><img src="img/startseite-logo.png" alt="logo"></a></td></tr>
<form action="https://www.google.de/search" name="FORM" target="_blank">
<tr>
<td>
<input type="text" class="haupttext" name="q" id="suchtext" size="30" maxlength="50" hspace="20" vspace="20" placeholder="Test">
<input type="submit" class="search" style="display:none;"><br>
<p> Das ist ein Test</p>
<input type="button" value="Orange"">
<td class="oberes-menü"><a href="Gear.html" target="_blank"><img src="img/icons/settings.ico" alt="icon"></a></td>
</td></form>
</body>
<script src="js/layoutchanger.js"></script>
</html>CSS Code default Layout beispiel:
CSS:
:root {
--primary: #E86D1F;
--hintergrund: black;
--akzent: whitesmoke;
}
