ElabNET Technik Forum

Verfasst: **Mi Mär 04, 2020 10:59 pm**

Ich habe mich mal eine Weile mit CSS beschäftigt und mir ein etwas schlankeres Design gebastelt, welches mir bei der Nutzung auf dem großen Rechnerbildschirm, auf einem Pad und auf dem Smartphone insgesamt ganz gut gefällt. Besonderes Augenmerk habe ich auf ein einfaches und schlankes Navbar-Design gelegt

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;
}

Die Screenshots sind wie folgt entstanden: Geteilter Windows-Bildschirm mittels WIN+Pfeiltaste, beide Browserfenster sind allso gleich groß und haben eine Skalierung von 100%. Man sieht dann quasi, dass das custom.css die Darstellung deutlich aufgeräumter darstellt, was beim Standard-Metal Design erst geht, wenn man große Bildschirmflächen hat und nutzt.

Bild

Verfasst: **Fr Mär 06, 2020 8:50 am**

Hallo Sven,

erst jetzt gesehen und - wow - das ist ganz tolle Arbeit.

Danke dass Du auch Dein CSS mit uns teilst und es so schön einstellbar gemacht hast mit den änderbaren sechs Basisfarben, da kann sich jeder nach seinen Farbvorstellungen das anpassen.

==> Ich würde das gerne diese Möglichkeiten in die (kommende) Dokumentation und in unsere Marketing-Unterlagen übernehmen. Wäre es möglich, dass Du mir die Bilder in maximaler Auflösung (also auf großem Monitor, wenn verfügbar 4k, Zoom aufdrehen) separat zukommen läßt, inkl. Erlaubnis dass wir das nutzen dürfen? Gerne per wetransfer an gl at elabnet dot de?

Bitte weiter so, ganz toll!

lg

Stefan

Verfasst: **Fr Mär 06, 2020 5:54 pm**

Klar, gerne. Mach ich am Wochenende! VG, Sven

Verfasst: **Fr Mär 06, 2020 7:03 pm**

Hallo Sven,
Respekt

MfG Juri

Verfasst: **So Mär 08, 2020 11:07 am**

Hallo Sven,

sehr schön gemacht. Werde ich verwenden wenn ich meine CV erstelle. Sie viel besser aus als vorher. Vor allem besser für die Augen.

Verfasst: **So Mär 08, 2020 9:29 pm**

Danke Euch, ich freue mich auch mega, dass ich da vorangekommen bin. Aber man muss ehrlich sagen, dass was ich da gemacht habe, ist nichts gegen das was Chris mit mehreren Designvorlagen schon geschaffen hat. Und mit meiner Konfiguration gibt es auch hier und da ein paar Schönheitsfehler, die ich noch am Ausbessern bin und die es im Original nicht gibt...Ich poste sicherlich irgendwann noch einmal eine überarbeitete CSS.

Für die die Bock auf Farbänderungen haben: Chris hat mich mal darauf gebracht, dass einem die Brwoser-Konsole deutlich unterstützt bei Änderungen mittels CSS. Hier einmal eine kurze Anleitung für Firefox zum ändern der 6 Farbvariablen, die ich verwendet habe:

1. Man klicke Strg+Shift+k -> es geht ein komplett neuer Abscnitt im unteren Bildschirmbereich auf
2. Man klicke auf Inspektor links oben in diesem Abschnitt
3. Rechts neben dem Seiten-Code werden die für den links aktuell ausgewählten Seiteninnhalt die relevanten CSS-Einstellungen angezeigt. Wen man hier nach ganz unten scrollt, findet man meine 6 Variablen, die man durch anklicken frei verändern kann und das wirkt sich auf die Darstellung auf der Seite aus...: Hier ein Bild:
4. Mit dem Element-Picker, den man ganz links oben im Abschnitt markieren kann, kann man übrigens Bereiche auf der Seite auswählen um zu ermitteln, welchen Einstellungen diese folgen... Damit kommt man schon reicht weit. Denn dann steht ja unten im rechten Abscchnitt exakt der Code, den man in eine Seite schreiben muss...

Bild

Hier mein aktuellster Code, der noch ein wenig verbessert wurde, z.B. für die Anzeige von Slidern...:

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;
    padding-right: 15px;
}

.widget.gauge {
    background-image: none;
}

.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;
}

Verfasst: **Fr Mär 13, 2020 8:15 am**

StefanW hat geschrieben: ↑Fr Mär 06, 2020 8:50 am Gerne per wetransfer an gl at elabnet dot de?

Habt Ihr die Bilder Sonntag eigentlich bekommen? Habe ich Sonntag los geschickt. Will nur auf Nummer sicher gehen, dass sie angekommen sind.

Verfasst: **Fr Mär 13, 2020 8:18 am**

Robosoc hat geschrieben: ↑Fr Mär 13, 2020 8:15 amHabt Ihr die Bilder Sonntag eigentlich bekommen? Habe ich Sonntag los geschickt. Will nur auf Nummer sicher gehen, dass sie angekommen sind.

Hallo Sven, ja vielen lieben Dank.

Ich bekomme nur ca. 150 eMails, WhatsUp, Telegram, Signal, Anrufe, Faxe, Tickets und Foreneinträge am Tag und schaffe nicht alles zu beantworten. Sorry.

lg

Stefan

ElabNET Technik Forum

CV: Custom Design (auf Basis Metal)

CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)

Re: CV: Custom Design (auf Basis Metal)