Eigenes FHEM CSS – Teil 2: Raumdetailseite

Im zweiten Teil meiner Reihe zum Thema "Eigenes FHEM CSS" möchte ich mich der Detailseite der einzelnen Räume widmen. Also die Ansicht in der man alle Devices sieht, welche sich in diesem Raum befinden. Nach den Anpassungen im Teil 1 sieht diese nämlich noch relativ langweilig aus. 

Überschrift der Gruppen

Anfangen möchte ich mit den Überschriften von Gruppen. In diesem Fall also "Licht" und "Sensoren". Hierfür ist der Selektor ".devType" zuständig. Der aufmerksame Leser unter euch wird sofort den neuen Selektor-Typ erkennen, welche durch einen Punkt eingeleitet wird. Diese Sektoren sind an die gleichnamigen Klassen gebunden. Hat man zum Beispiel im HTML-Dokument einen Text mit der Klasse "devType" erstellt, wird für diesen der Selektor ".devType" angewandt. Die Überschriften werden im entsprechenden HTML-Dokument mit genau dieser Klasse erstellt. 

Die Eigenschaft "color" und "padding-top" sind bereits aus dem ersten Teil der Reihe bekannt. Die Farbe habe ich auf schwarz gesetzt und Abstand nach oben auf 20px. Neu hinzugekommen sind die Einträge für die Schriftformatierung. Diese beginnen mit "font_" und erlauben zum Beispiel die Schriftgröße ("font-size") oder die Schriftart ("font-family") zu ändern. Mehr Infos zu den "font_"-Eigenschaften.

Mit "font-weight" lässt sich die Dicke der Schrift bestimmen. Hier sind unteranderem folgten Werte erlaubt: lighter (dünner), normal (normal), bold (fett), bolder (fetter). Bezogen wird immer auf das Elternelement. Des Weiteren sind Werte zwischen 100 (dünn) bis 900 (fett) erlaubt (in 100er-Schritte). 

Tabelle für die Devices

Die einzelnen Devices werden in FHEM in Tabellen aufgelistet. Jedes Segment eines Devices ist in einer extra Zelle platziert. Beim Device "Flurlicht" ist es also je eine Zelle für "off", "on" und das Glühbirnen-Symbol. Der Device-Name und das Lampensymbol sind zusammen in einer Zelle platziert. 

Devicenamen

Was sofort auffällt ist der unschöne Devicename. Zum einen wird er als Link angezeigt (blau und unterschrieben) und zum anderen ist er nicht mittig in Zelle. Doch dies lässt sich durch ein paar Einträge im Stylesheet anpassen. Mit dem Eintrag "vertical-align" lässt sich die vertikale Position von Elementen anpassen. 

Da der Devicename und das Icon zusammen in einer Zelle sind, werden diese auch über den gleichen Selektor angesprochen. Wie wir bereits im ersten Teil der Serie gelernt haben, sind dies die Selektoren "svg", "svg.icon" und "img.icon". Da es sich bei den Device-Icons um svg-Icons, wird der Eintrag entsprechend bei den Selektoren "svg" und "svg.icon" eingetragen.

Der Eintrag "vertical-align: middle" sorgt nun dafür, dass die Elemente in der Zelle vertikal mittig ausgerichtet sind. Neben "middle" sind unter anderem "top" oder "bottom" erlaubt. Mehr infos zu "vertical-align" findet ihr hier.

Das nächste Unschöne ist das Anzeigen der Devicenamen als Link. Aber auch dies lässt sich durch einen CSS-Eintrag anpassen. Zuständig dafür ist der Selektor "a". Dieser kümmert sich um eine Vielzahl an Texten in FHEM. Mit den Eigenschaften "color", "font-weight" und "font-family" lassen sich diese Texte anpassen. Mehr Infos zu den "font_"-Eigenschaften findet ihr hier.

Der Eintrag "text-decoration" kümmert sich um zusätzliche Dekorationen für den Text. Mit ihm lassen sich zum Beispiel der Text unterstreichen oder ihn zum Blinken bringen. Der Eintrag "text-decoration: none" deaktiviert die Dekorationen und lässt den Text ohne Schnick-Schnack darstellen. Mehr Infos zur Eigenschaft "text-decoration".

Abstand der Zellen

Der Devicename erscheint nun schön mittig. Was jedoch noch etwas stört ist der geringe Abstand der einzelnen Zellen zueinander. Wie wir jedoch bereits im ersten Teil gelernt haben, gibt es da die Eigenschaft "padding". Diese sorgt für einen inneren Rahmen in einer Zelle. 

Damit lässt sich auch der Abstand der einzelnen Inhalte der Zellen zueinander vergrößern. Zuständig für die einzelnen Zellen ist der Selektor "table.block td". Der erste Teil des Selektors "table.block" sagt aus, dass der Selektor für alle table-Elemente greift, welche zusätzlich der Klasse "block" zugehören. Das zusätzliche "td" ist ein sogenannter Nachfahrenselektor. Dies bedeutet, dass der Selektor greift, sobald sich innerhalb des "table.block" Selektors ein td-Element befindet. Und wer sich bisschen mit HTML auskennt, der weiß, dass "td" für den Tabelleninhalt steht. 

Tabelle einfärben

Nachdem die Texte und die Anordnung der Elemente nun abgeschlossen ist, kann man etwas Farbe ins Spiel bringen. Wie bereits erwähnt wird in FHEM viel mit Tabellen aufgebaut. Unteranderem die Device-Liste, die Raumliste und das Befehl-Eingabefeld. Da liegt es doch nahe, dass es ein Selektor gibt, welche für alle dieser Tabellen greift. In FHEM ist es der Selektor "table". Ich habe jeder Tabelle einen "border-radius", ein "padding" und ein "border-spacing" hinzugefügt. .

Das "border-spacing" sorgt für einen Abstand von 0px zwischen den einzelnen Tabellen Rahmen. Der Selektor "table" greift nun bei allen Tabellen. Für die einzelnen anderen Tabellen, wie zum Beispiel die Tabelle mit den einzelnen Devices, wird dann über ein Element-Selektor mit jeweils einen Kombinierten Klassen-Selektor angepasst. 

Der Selektor für die Device-Tabelle wird dann über den Selektor "table.block" angesprochen. Genau wie bereits beim Anpassen des Zellenabstandes. Nur das hier nun der Nachfahrenselektor "td" weggelassen wird. Mit der Eigenschaft "border" wird ein Rahmen gesetzt und Weite wird mit "width" auf 100% gesetzt. Der Hintergrund wird auf ein helles Grau gesetzt. Mit der Eigenschaft "box-shadow" wird ein Schatten um die Tabelle gesetzt. Mehr Infos zum "box-shadow" findet ihr hier.

Um die einzelnen Zeilen der Tabelle anpassen zu können, werden wieder die Nachfahrenselektoren eingesetzt. FHEM unterscheidet dabei zwischen den Zeilen 1,3,5,7 usw. und den Zeilen 2,4,6,8 usw. Zeile 1,3,5 usw. werden mit dem Selektor "table.block tr.odd" angepasst und die anderen Zeilen mit dem Selektor "table.block tr.even". Der Selektor ist also ein Element-Selektor vom Element "table" mit den zusätzlichen angegebene Klassen-Selektor "block". 

Um es weiter zu konkretisieren wurde der Nachfahrenselektor "tr" mit dem zusätzlichen Klassen-Selektor "odd" bzw. "even" verwendet. "tr" bezeichnet in HTML ein Zeile. Ich habe mich für zwei unterschiedliche Grau-Töne entschieden.

Zusammenfassung

In diesem Kapitel kamen ein paar neue Eigenschaften zum Einsatz. Im folgenden werde ich etwas tiefer auf diese eingehen und euch aufzeigen welche alternativen Werte es zu diesen Eigenschaften gibt.

font

"font" ist eine Zusammenfassung von Eigenschaften mit der man Schriftformatierungen vornehmen kann. Dabei stehen die Eigenschaften "font-style", "font-variant", "font-weight", "font-size", "line-hight" und "font-family" zur Verfügung.

Mit "font-style" lässt sich der Schriftstiel festlegen. Um genau zu sein, die Neigung der Schrift. Mögliche Werte sind "normal" für einen normalen Schriftstil, "italic" für eine Kursivschrift und "oblique" für einen schräg gestellten Schriftstil. Des Weiteren kann mit "inherit" der Schriftstil des Elternelemts übernommen werden. 

Mit der Eigenschaft "font-variant" lässt sich die sogenannte Kapitälchen-Schrift aktiveren. Also kleine Großbuchstaben. Aktiveren kann man dies über den Wert "small-caps". Des Weiteren sind "normal" und "inherit" möglich. 

Wie oben bereits erwähnt, lässt sich mit "font-weight" die Strichstärke festlegen. Möglich sind hier "lighter", "normal", "bold" und "bolder" oder ein Zahlenwert von 100-900 in 100er Schritten. 

Mit "font-size" lässt sich die Schriftgröße anpassen. Unteranderem sind relative Einheiten möglich wie em, rem, ex oder Prozentangaben. Normalerweise kommt man aber mit den vordefinierten Schlüsselwörter aus: "xx-small", "x-small", "small", "medium", "large", "x-large" und "xx-large" oder mit den relativen Angaben "smaller", "larger" und "inherit". Immer bezogen auf das Elternelement. 

Mit "line-high" lässt sich die Zeilenhöhe bestimmen. Hier können entweder absolute Angaben (em) gemacht werden oder relativ zur font-size (in %). Zum Beispiel "line-high: 2,5em" oder "line-hight: 120%".

"font-family" erlaubt das Angeben einer Schriftfamilie und ermöglicht so dem Browser alternative Schriften zu verwenden, wenn die gewünschte Schrift nicht verfügbar ist. ​Mehr zu "font-family" findet ihr hier.

Mehr Infos zu den "font-Eingenschaften" könnt ihr hier nachlesen.  

vertical-align

Mit "vertical-align" lässt sich Text horizontal ausrichten. Hier sind unteranderen Längenangaben oder Prozentwerte möglich. Wichtig für FHEM sind die erlaubten Werte für Tabellen. Hier sind die Werte "top", "middle" und "bottom" erlaubt. 

Für Texte außerhalb von Tabellen gibt es noch weitere Schlüsselwörter. Mehr dazu hier.

text-decoration

Mit "text-decoation" lassen sich Dekorationen zu einem Text hinzufügen. Möglich ist den Text zu unterstreichen ("underline"), zu überstreichen ("overline"), durchzustreichen ("line-through"), ihn blinken zu lassen ("blink") oder die Dekoration zu deaktivieren ("none"). Des Weiteren kann mit "inherit" die Dekoration des Elternteils übernommen werden. 

Mehr Infos zu "text-decoration" findet ihr hier.

border-radius

Mit "border-radius" kann man die Ecken eines Rahmen und ein Element abrunden. Dabei sind mehrer Möglichkeiten die Werte zu setzen. In FHEM wird man wohl am meisten den Radius direkt in Pixeln angeben. Dabei kann man entweder einen, zwei, drei oder vier Werte angeben. 

Bei einem Wert wird der Radius an allen vier Ecken angewendet.

Bei zwei Werten wird der erste Wert für oben-links und unten-rechts genommen und der zweite Wert für oben-rechts und unten-links. 

Bei drei Werten wird der erste wert für oben-links, der zweite Wert für oben-rechts und unten-links und der dritte Wert für unten-rechts genommen. 

Bei vier Werten wird an der oberen linken Ecke begonnen und dann im Uhrzeigersinn weiter. 

Es sind auch Werte-Paare möglich. Mehr Infos dazu findet ihr hier.

border-spacing

Mit "border-spacing" legt man den Abstand der einzelnen Rahmen der Tabellenelemente zueinander fest. Mehr Infos dazu findet ihr hier.

box-shadow

Mit "box-shadow" lässt sich ein Schatten um einen Schatten um eine Box. Der Eigenschaft müssen mindestens zwei Werte mitgeteilt werden. Zum Einen der "offset-x" und zum Anderen den "offset-y". Diese legen den horizontalen und vertikalen Versatz des Schattens fest. Die Angabe erfolgt in am besten in px. 

Als zusätzlicher Wert kann "blur-radius" mit angegeben werden. Dieser lässt den Schatten an den Kanten weichzeichnen. Je größer der Wert, desto weicher die Kante. Auch hier erfolgt die Angabe am besten mit px. 

Mit "color" kann dann noch die Farbe des Schattens festgelegt werden.

Alle Werte werden hintereinander geschrieben. Zum Beispiel "box-shadow: 5px 5px 5px black". Mehr Infos dazu findet ihr hier.

Was haben wir gelernt?

Im zweiten Teil meiner Serie zum Thema FHEM-CSS haben wir uns mit der Raumdetailseite beschäftigt. Wir haben die Überschriften der Gruppen angepasst und die Auflistung der Devices aufgewertet. 

Dabei haben wir die dafür benötigten Selektoren kennengelernt und wissen nun wo wir was anpassen müssen um die gewünschte Änderung zu bewirken. 

Des Weiteren haben wir den eigentlichen Aufbau von FHEM mit seinen Tabellen kennengelernt und wissen wie wir welche Tabelle anpassen. 


Du möchtest keinen Beitrag zum Thema FHEM-CSS verpassen?

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


 

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
wpDiscuz