satopian
commented
3 years ago When customizing the default theme, adding new CSS properties causes these to "leak" through to other themes when their properties aren't set.
Intentionally, I'm always loading the main css. Avoid the situation where css is not loaded due to read delay by Javascript. Also, when Javascript is not valid, the main css is read. However, if you want it to load only when the main css is selected, you can write:
<!-- Disable all css once. -->
<link rel="stylesheet" href="<% echo(skindir) %>css/mono_main.css" id="css0" disabled>
<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dev.css" id="css1" disabled>
<link rel="stylesheet" href="<% echo(skindir) %>css/mono_dark.css" id="css2" disabled>
<link rel="stylesheet" href="<% echo(skindir) %>css/mono_deep.css" id="css3" disabled>
<link rel="stylesheet" href="<% echo(skindir) %>css/mono_mayo.css" id="css4" disabled>
<script>
// Select the css you want to enable from the css you have disabled.
var colorIdx = GetCookie("colorIdx");
switch (Number(colorIdx)) {
case 0:
document.getElementById("css0").removeAttribute("disabled");
break;
case 1:
document.getElementById("css1").removeAttribute("disabled");
break;
case 2:
document.getElementById("css2").removeAttribute("disabled");
break;
case 3:
document.getElementById("css3").removeAttribute("disabled");
break;
case 4:
document.getElementById("css4").removeAttribute("disabled");
break;
}
function SetCss(obj){
var idx = obj.selectedIndex;
SetCookie("colorIdx",idx);
window.location.reload();
}
function GetCookie(key){
var tmp = document.cookie + ";";
var tmp1 = tmp.indexOf(key, 0);
if(tmp1 != -1){
tmp = tmp.substring(tmp1, tmp.length);
var start = tmp.indexOf("=", 0) + 1;
var end = tmp.indexOf(";", start);
return(decodeURIComponent(tmp.substring(start,end)));
}
return("");
}
function SetCookie(key, val){
document.cookie = key + "=" + encodeURIComponent(val) + ";max-age=31536000;";
}
</script>
<noscript>
//Css for when Javascript is not valid
<link rel="stylesheet" href="<% echo(skindir) %>css/mono_main.css">
</noscript>
Disable all css once.
From there, select the css you want to enable.
Traditionally, main css is always valid, but this code also disables it.
<noscript>
Set the css to be read when Javascript is invalid in the place of.
boxfries
When customizing the default theme, adding new CSS properties causes these to "leak" through to other themes when their properties aren't set. This is because the default theme is persistent, and always loads regardless of which theme is selected.
Header styling from default theme leaking through to "Deep" theme.
I found a solution by adding "disabled" to the default CSS theme when changing themes, and removing it when switching back to each html file under themes. But I don't know if it's good code. (I only know some HTML/CSS)