Eigenes FHEM CSS – Teil 1: Vorbereitung, Menü und Detailseite

Wie ich bereits in meinen Blogbeiträgen beschrieben habe, lässt sich FHEM zum Beispiel durch Icons, Gruppen und Räumen im gewissen Rahmen individualisieren. FHEM bietet aber auch die Möglichkeit das komplette Aussehen von FHEM zu verändern. Dadurch, dass FHEM im Grunde nichts anderes als eine Website ist, lässt sich dessen Aussehen durch sogenannte "Cascading Style Sheets" anpassen, im Kurzen CSS oder Stylesheets. FHEM bietet bereits eine kleine Auswahl an vorgefertigten Stylesheets. Einstellen lässt sich dies über die linke Menü-Leiste unter "Select Style". 

Für den Einen oder Anderen mag diese Auswahl bereits ausreichen. Aber Geschmack ist bekanntlich vielfältig. Deswegen erkläre ich euch hier von Null an wie ihr euer eigenes Stylesheet erstellt. Um euch alles verständlich erklären zu können und euch auch direkt die Auswirkungen zeigen zu können, werde ich bei einem leeren Stylesheet anfangen.

Damit es zu keinen Formatierungs-Fehlern beim Kopieren kommt, werde ich euch in jedem Teil die CSS-Datei zum Download bereitstellen.

Weil ich nicht nur ein stupides aufzählen der von mir gemachten Styleanpassungen machen möchte, sondern tiefer in das Thema Stylesheets für FHEM und CSS eingehen möchte, werde ich mehrere Teile zu diesem Thema machen. Ich werde versuchen jede Woche ein Teil rauszubringen. 

Mein Ziel ist es, dass ihr am Ende dieser Reihe euer eigenes Stylesheet zusammenstellen könnt und vor allem auch verstanden habt, was ihr wie anpassen könnt.

CSS-Syntax

Die CSS-Syntax ist relativ simpel. Ein Stylesheet besteht aus mehreren Selektoren die Wiederrum ihre Eigenschaften haben. 

Selektor1 {
   Eigenschaft1;
   Eigenschaft2;
}

Diesen "Selektor1" kann man dann in einem HTML-Dokument verwenden um erstellte Elemente die Style-Eigenschaften des Selektors zu übergeben. 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS-Selektor</title>
    <style>
     Selektor1 {border: 3px solid green;}
    </style>
  </head> 
  <body>
   <Selektor1>Auswirkung des Selektors.</Selektor1
  </body>
</html>

Ich möchte hier jetzt nicht groß auf den Aufbau eines HTML-Dokuments eingehen. Aber zu erkennen ist hier, dass zwischen <style> ... </style> Angaben zum Aussehen des Elements "Element" gemacht werden. In diesem Fall ein grüner durchgehender Rahmen mit einer Dicke von 3px. 

Das Element selber wird dann später im Body der HTML-Datei erstellt. So kann man nun für jedes Element einen eigenen Selektor erstellen und somit das Aussehen jedes Elements separat anpassen. 

Zusätzlich zu den normalen Selektoren gibt es noch die ID-Selektoren. Mit ID-Selektoren lassen sich sozusagen "Kinder-Selektoren" erstellen. Also Selektoren, welche zwar eigene Eigenschaften besitzen, jedoch zusätzlich zu einem normalen Selektor angegeben werden und somit auch dessen Eigenschaften übernommen werden. 

<!DOCTYPE html>
<html>
  <head>
    <style>
      #selektor_id_1 {
        color: red;
      }
      #selektor_id_2 {
        color: green;
      }
      selektor {
        font-weight: bold;
      }
    </style>
  </head>

 <body>
  <selektor id="selektor_id_1">ID 1 mit Selektor</selektor>
<selektor>Nur der Selektor</selektor>
<selektor id="selektor_id_2">ID 2 mit Selektor</selektor>
</body>
</html>

Zu erkennen sind hier drei Selektoren. "#selektor_id_1", "#selektor_id_2" und "selektor". Die beiden ersten Selektoren sind die ID-Selektoren. Erkennbar an dem Hashtag (#) vor dem Namen. ID-Selektor 1 setzt die Schriftfarbe auf rot, ID-Selektor 2 setzt die Schriftfarbe auf grün und der Selektor macht die Schrift fett. 

Im Body kann man nun ein Element erstellen welches als Selektor den normalen Selektor hat und durch "id=" kann man nun zusätzlich einen ID-Selektor angeben. So lässt sich zum Beispiel ein Hauptselektor erstellen, mit dem man eine Vielzahl an Elementen erstellt und diese durch die ID-Selektoren jeweils individuelle Eigenschaften mitgibt. Eigenschaften innerhalb der ID-Selektoren überschreiben gleiche Eigenschaften der normalen Selektoren. 

Hat man mehrere CSS-Selektoren ist es sinnvoll diese in einer extra Datei auszugliedern. FHEM macht genau dies. Durch "Select style" auf der FHEM-Weboberfläche lassen sich die unterschiedlichen Dateien auswählen, die sogenannten Stylesheets. Dies erlaubt das schnelle und einfache Ändern des Aussehens von Websites bzw. der FHEM-Weboberfläche ohne im eigentlichen HTML-Code wühlen zu müssen.

Die FHEM-Weboberfläche baut auf mehrere Elementen auf. Zum Beispiel ein Element für die Menüleiste, ein Element für die Raumdetailseite usw. Um diese Vielzahl an Elementen anpassen zu können gibt es auch eine Vielzahl an Selektoren. So lässt sich um Grunde jedes Element nach seinen eigenen Wünschen anpassen. 

Ich werde euch zeigen, welcher Selektor für welches Element verantwortlich ist. 

Vorbereitung

Wie oben schon erwähnt, fange ich mit einem leeren Stylesheet an. Die Stylesheets legen im FHEM-Installationsordner im Unterordner "www/pgm2". Damit ein selbsterstelltes Stylesheet später auch in der Weboberfläche ausgewählt werden kann, muss der Dateiname mit "style.css" enden. Am besten erstellt ihr euch dazu eine einfache Textdatei und nennt sie entsprechend um. Achtet dadrauf, dass ich ebenfalls die txt-Endung und eine css-endung ändernd. Gegebenenfalls müsst ihr das Anzeigen der Dateiendungen in eurem Betriebssystem aktivieren. In meinem Fall habe ich mein Stylesheet "ownstyle.css" genannt. 

Richtige Software für die Bearbeitung

Die Stylesheet-Datei lässt sich natürlich auch mit einem einfachen Texteditor bearbeiten. Ich empfehle euch jedoch einen richtigen Code-Editor zu verwenden. Ich persönlich verwende "Visual Studio Code". Die Software ist Open Source und kann kostenlos heruntergeladen und verwendet werden. Der Vorteil ist, dass man unteranderem ein Syntax-Highlighting und eine Zeilennummerierung hat.   

Der größte Mehrwert ist jedoch der integrierte Farbcode-Picker. Erstrecht beim Erstellen von Stylesheets arbeitet man oft mit HEX-Farbcodes. In Visual Studio Code lässt sich der Farbcode über ein Color Picker auswählen.

Alternativ könnt ihr auch einfach auf Google nach "Color Picker" suchen und euch wird ein Color Picker angezeigt.

Stylesheet hochladen und aktivieren

Für das Verständnis rate ich euch das leere Stylesheet einmal in den Ordner "www/pgm2" eurer FHEM-Installation hochzuladen und anschließend über die FHEM-Oberfläche zu aktivieren. Da mein Stylesheet den Namen "ownstyle.css" hat, wird auf der Weboberfläche "own" angezeigt. Der Suffix "style.css" wird dabei ausgeblendet. Durch Anklicken aktiviert man das Stylesheet. 

Nun nicht wundern. Dadurch, dass das Stylesheet leer ist, wird nur das "nackte" FHEM angezeigt. Ohne irgendwelche Gestaltungsanweisungen oder Formatierungen.

Es wird zuerst die Liste der Räume angezeigt. Gefolgt vom Eingabefeld. Die Raum-Übersichtsseite folgt dann unterhalb des Eingabefeldes. Dabei werden die Icons in Originalgröße angezeigt. Die FHEM-Weboberfläche ist so nicht zu gebrauchen. Dennoch kann man nun gut erkennen, wozu ein Stylesheet notwendig ist und wie stark man mit diesen das Aussehen von Websites verändern kann.

Um FHEM erstmal eigenermaßen wieder brauchbar zu machen, fangen wir nun an das Stylesheet mit Leben zu füllen.

Anordnung Seitenleiste und der Raumdetailseite

Zunächst kümmern wir uns um die Anordnung der beiden Hauptbereiche der FHEM-Weboberfläche. Der Menüleiste und die Raumdetailseite. Dazu werde ich zuerst die von mir genutzten Einträge aufzählen und kurz erläutern. Im Nachhinein werde ich näher auf die verwendeten Einträge eingehen und eventuelle Alternativen aufzählen und Links zu weiteren und tiefer gehenden Informationen angeben. 

Fangen wir mit der linken Menüleiste an. Eingeleitet wird diese mit dem Selektor "#menu". Es handelt sich also um einen ID-Selektor.

"position: absolute" legt fest, dass die Menüleiste vom Text losgelöst platziert wird. Diese absolute Position kann über die Einträge "top", "bottom", "left" und "right" festgelegt werden. In diesem Fall also "60px" von oben und "10px" von links entfernt.

"width: 190px" gibt die Breite des Menüs an. 

Mit "background-color: #fff" gibt man die Hintergrundfarbe des Menüs an. In diesem Fall also weiß. 

"border: 1px solid #000000" setzt einen schwarzen durchgehenden Rahmen mit der Breite 1px um das Menü.

Das gleiche lässt sich nun auch für die Raumdetailseite einstellen. Diese wird mit "#content" eingeleitet. 

Auch hier wird die Position der Detailseite wieder mit absoluten Positionsangaben angegeben ("position", "top", "left" und "right"). 

Die Hintergrundfarbe ("background.color")  und der Rahmen ("border") sind ebenfalls unverändert geblieben.

Hinzugekommen ist die Eigenschaft "padding". 

Diese ist für den Abstand zwischen dem Inhalt und dem Außenrahmen verantwortlich. Ich habe für jede Seite den Wert angegeben - oben, rechts, unten und links. 

Zum Schluss passen wir nun noch die Größe der Icons an. FHEM verwendet für die Icons drei unterschiedliche Selektoren. Zum Einen "svg" und "svg.icon" und zum Anderen "img.icon". Zum Anfang reicht es aus die Icons jeweils in der Größe festzulegen und den img-Icons eine Hintergrundfarbe zu geben.

Wie ihr sieht, werden hier wieder die bekannten Eigenschaften "width", "height" und "background" verwendet. Die Selektoren "svg" und "svg.icon" werden so gut wie für jedes Icon in FHEM verwendet. Der Selektor "img.icon" wird zum Beispiel für die Weltkugel in der Menüleiste verwendet.

Habt ihr die Einträge in euer Stylesheet so übernommen, sieht eure FHEM Weboberfläche schon etwas brauchbarer aus.

Die CSS-Datei mit den oben beschriebene Anpassungen könnt ihr euch über das Icon downloaden. 

Stylesheet (CSS-Datei) zum ersten Teil der Serie zum Thema "eigenes Stylesheet für FHEM erstellen" - Stand 16.09.2017

Zusammenfassung

Im folgenden werde ich etwas näher auf die Verwendeten Eigenschaften in diesem Teil eingehen und eventuelle Alternativen aufzählen.

position

Mit der Eigenschaft "position" lässt sich die Position eines Elementes festlegen. Wie oben erwähnt, wird in diesem Fall die Postion der beiden Elemente mit absoluten Positionen angegeben. Dies bedeutet, dass sich das Element losgelöst vom Text positionieren lässt. Dies erfolgt durch den Eintrag "position: absolute" und den zusätzlich angegebenen Positionen "top", "right", "bottom" oder "left". Als Bezugspunkt wird das vorherige Element genommen, welches mit ebenfalls mit "position" positioniert wurde. Mehr Infos zu absolute.

Alternativ kann man noch "static", "relative" und "fixed" angeben. "static" bewirkt, dass das Element sich an keiner bestimmten Position festhält sondern sich in den normalen Fluss der Seite eingliedert. Mehr Infos zu static.

Mit "relative" lässt sich diese durch den Fluss der Seite bedingte Position anpassen. Während "absolute"  oben links der Seite seinen Bezugspunkt hat, ist bei "relative" der Bezugspunkt die Position, welche das Element bei "static" hätte. Zum Positionieren verwendet man genau wie bei "absolute" die Eigenschaften "top", "bottom", "left" und "right" für die Positionsangabe. Mehr Infos zu relativ.

Eine weitere Möglichkeit ist "fixed". Wie der Name schon sagt, fixiert man mit diesem Eintrag ein Element. Als Bezugspunkt wird das Sichtfenster genommen. Auch hier ist es wieder notwendig, dass man die Position mit den oben erwähnten Einträgen angibt. Fixiert man zum Beispiel ein Element mit "left: 0px" und "top: 0px" so wird dieses Element immer in der oberen linken Ecke platziert sein. Selbst wenn man nach unten scrollt, wird sich die Position des Elements nicht ändern und somit immer im Sichtfeld bleiben. Mehr Infos zu fixed.

background

Die Eigenschaft "background" kümmert sich um den Hintergrund eines Elements. Auch hier gibt es wieder mehrere Möglichkeiten den Hintergrund zu gestallten.

In diesem Fall haben wir einfach nur mit "background-color" eine Hintergrundfarbe gesetzt. Die Farbangabe erfolgt dabei mit einem HEX-Farbcode ( #ff0000 ), RGB-Farbcode ( rgb(255,0,0) ) oder mit einem gültigen Farbnamen wie "red" oder "blue". Mehr Infos zu background-color.

Anstelle einer einfachen Hintergrundfarbe kann man auch ein Hintergrundbild verwendet werden. Die geht mit " background-image: url("wallpaper.jpg") ". Das Bild muss sich dabei im gleichen Ordner wie das Stylesheet befinden oder man gibt den direkten Pfad des Bildes an. Standardmäßig wird das Bild so oft wiederholt, bis das komplette Element mit diesem Bild ausgefüllt ist. Mehr Infos zu background-image.

Ändern kann man dies durch weitere Angaben. Mit "background-repeat: repeat-x" lässt sich das Bild zum Beispiel nur in x-Richtung wiederholen. Dies geht natürlich auch in die y-Richtung. Alternativ lässt sich mit "background-repeat: no-repeat" das Wiederholen komplett deaktivieren. Mehr Infos zu background-repeat.

Das Hintergrundbild lässt sich selbstverständlich auch in seiner Position anpassen. Die zusätzliche Angabe "background-position: right top" positioniert das Hintergrundbild in die recht obere Ecke. Mehr Infos zu background-position.

padding

Mit "padding" lässt sich der Abstand zwischen dem Inhalt eines Elements (z.B. Tabellenzelle) und dessen Rand festlegen. Wie oben bereits verwendet kann der Wert aller Ränder in einer Zeile angegebene werden - "padding: 20px 20px 20px 20px". Die Reihenfolge ist dabei wie folgt "top", "right", "bottom" und "left". Gibt man nur zwei Werte an, zum Beispiel "padding: 20px 20px" wird der erste Wert für oben und unten interpretiert und der zweite Wert für rechts und links. Wenn überall der gleiche Abstand sein soll, kann dies durch eine Zahl erledigt werden - "padding: 20px". Die Werte lassen sich auch in getrennten Angaben angeben: "padding-top", "padding-right" etc. 

border

"border" erlaubt das Hinzufügen eines Rahmens. Es gibt mehrere Arten von Rahmen. Zum Beispiel ein durchgehender Rahmen durch die Angabe "border-style: solid"

Mit "border-width" lässt sich die Dicke des Rahmens festlegen und mit "border-color" die Farbe. Auch hier lässt sich wieder für alle Seiten die Werte in einer Zeile angeben. Zum Beispiel "border-style: solid dashed solid dashed", "border-width: 1px 2px 3px 4px" und "border-color: red green red green". Getrennt erfolgt die Angabe unteranderem über "border-top-width: 1px" oder "border-top-color: red".

Auch hier lässt sich alles etwas Zusammenfassen. Zum Beispiel "border: 10px solid green" erzeugt einen 10px durchgehenden grünen Rahmen auf allen Seiten und "border-left: 10px solid green" nur auf der linken Seite.

Ein weiteres Argument ist "border-radius". Hiermit lässt sich der Rahmen an den Ecken abrunden. Entweder gibt man durch eine Zahl den Radius an aller Ecken an oder man gibt durch vier Zahlen für jede Ecke getrennt den Radius der Rundung an, beginnend bei der oberen linken Ecke und dann im Uhrzeigersinn. Weitere Möglichkeiten könnt ihr aus der Tabelle entnehmen. 

Was haben wir gelernt?

Im ersten Teil ging es überwiegend um die Vorbereitung. Dennoch haben wir bereits ein paar Anpassungen in im Stylesheet vorgenommen. 

Wir wissen nun, welcher Eintrag für das Menü und welcher Eintrag für die Raumdetailseite verantwortlich ist.  Des Weiteren haben wir erste Argumente verwendet mit denen wir Elemente positionieren und vor allem schon kleine optische Anpassungen vornehmen können. 


Verpasse keinen Teil der Reihe zum Thema FHEM-Stylesheet

Abonniert meine Email-Benachrichtigung und erhaltet eine Email, sobald ich einen neuen Beitrag veröffentliche. Ihr könnt euch selbstverständlich jederzeit wieder austragen. lassen.


 

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
wpDiscuz