Wer Lust hat es bei sich auszuprobieren und ggf. weiter zu entwickeln findet hier den Code.
Folgenden Code einfach in eine Datei custom.css speichern und als zusätzliche Mediendatei hochladen. Dann noch folgende Ergänzung in den Abschnitt <meta> des Konfigurationscodes:
Code: Alles auswählen
<files>
<file type="css">resource/config/media/custom.css</file>
</files>
Die 6 geänderten Farben habe ich als Variablen vorgegeben, so kann man das recht einfach modifizieren (gleich zu Beginn im css-file) und auch in den Konsolen der Browser sehr leicht mit Farbänderungen spielen:
CSS Code:
Code: Alles auswählen
:root {
--bright-bg-color: #3c4d84;
--dark-bg-color: #1a193a;
--main-item-color: #ddd;
--highlight-color: #96887a;
--unpressed-color: #666;
--info-bg-color: #222d;
}
#navbarTop hr {
height: 50px;
width: 0px;
}
.nav_path {
background-image: linear-gradient(var(--bright-bg-color), var(--bright-bg-color));
color: var(--highlight-color);
}
.page.type_2d .widget.custom_bubble .value {
line-height: 30px;
}
#pages > .page {
padding-left: 15px;
}
.widget .ui-slider {
width: calc(100%);
margin-bottom: 1.9em;
}
div.actor.light-on.switchPressed, div.actor.light-off.switchUnpressed {
border-style: none;
}
.light-on.switchPressed div, .light-on.switchUnpressed div {
background-image: radial-gradient( rgba(150, 136, 122, 0.67), transparent 70%);
padding: 0px;
margin-left: -5px;
margin-top: -1px;
}
.light-off.switchPressed div, .light-off.switchUnpressed div {
color: var(--unpressed-color);
padding: 0px;
margin-left: -5px;
margin-top: -1px;
}
.page.type_2d .widget.custom_bubble.embedded {
box-shadow: 2px 4px 4px 0px rgba(135, 135, 135, 0.5);
}
.page.type_2d .widget.custom_bubble {
border: 2px solid var(--highlight-color);
border-radius: 30px;
width: 30px;
height: 30px;
background-color: var(--info-bg-color);
}
#navbarTop .navbar .widget:not(.info) {
padding-top: 3px;
padding-bottom: 3px;
height: 50px;
min-height: 0em;
}
.group > div > h2 {
font-size: 1em;
padding: 4px 1.6em;
color: var(--main-item-color);
background-image: linear-gradient(var(--highlight-color), var(--unpressed-color));
}
.widget .actor {
float: center;
}
.group.widget {
-webkit-border-radius: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
margin: 0.7em 0.5em;
}
.widget > .label {
float: left;
width: calc(75%);
text-align: left;
padding-left: 1em;
}
.widget {
text-shadow: 0 4px 4px var(--info-bg-color);
padding: 0.2em;
}
.switchUnpressed {
background-color: transparent;
}
#navbarTop .navbar .pagejump.active,
#navbarTop .navbar .pagejump:hover,
#navbarTop .navbar .pagejump.active_ancestor {
background-image: linear-gradient( var(--bright-bg-color), var(--bright-bg-color));
color: var(--main-item-color);
}
#navbarLeft .navbar .pagejump.active,
#navbarLeft .navbar .pagejump:hover,
#navbarLeft .navbar .pagejump.active_ancestor {
background-image: linear-gradient( var(--bright-bg-color), var(--bright-bg-color));
color: var(--main-item-color);
}
#navbarLeft .widget_container {
width: 50px;
}
#navbarLeft .navbar {
box-shadow: 2px 4px 4px 0px rgba(10, 10, 10, 0.5);
}
#navbarLeft {
color: var(--highlight-color);
}
.info {
border-radius: 30px;
border: none;
text-align:center;
height: 30px;
background-color: var(--info-bg-color);
}
#navbarTop {
background-image: linear-gradient( var(--bright-bg-color), var(--dark-bg-color));
color: var(--highlight-color);
}
body {
background-image: linear-gradient( var(--bright-bg-color), var(--dark-bg-color));
color: var(--main-item-color);
font-size: 0.8em;
}