Eigenes FHEM CSS – Teil 3: Devicedetailseite

Nachdem ich mich im zweiten Teil meiner Serie zum Thema FHEM-CSS um die Raumdetailseite gekümmert habe, werde ich nun im dritten Teil näher auf die Devicedetailseite eingehen. Nach dem aktuellen Stand sieht diese nämlich noch etwas zusammen gequetscht aus und die Befehlszeilen, wie zum Beispiel für die SET- oder Attribut-Befehle sind noch nicht ordentlich angeordnet. 

Abstand der Tabellen zueinander

Der Abstand der Tabellen zueinander kann relativ einfach eingestellt werden. Wer den ersten Teil der Serie gelesen hat, der wird bereits die Eigenschaft "padding" kennen. Mit "padding" lässt sich der Abstand eines Elements zu seinem Außenrahmen festlegen. 

Die Eigenschaft "margin" ist ähnlich aufgebaut, nur das damit der Außenabstand eines Element zum nächsten Element angegeben wird. Also genau passend für diesen Fall. Da der Aufbau der Devicedetailseite so aufgebaut ist, dass die einzelnen Tabellen untereinander angeordnet sind, reicht die Eigenschaft "margin-bottom" aus. Wie bereits in Teil 2 gelernt, ist der Selektor "table" für die Tabelle verantwortlich. Es liegt also nahe, dass die Eigenschaft diesem Selektor zugeordnet wird. Der Selektor ist jedoch für alle Tabellen verantwortlich. Z.B. auch für die Menü-Tabelle. Die Tabelle auf der Device-Detailseite haben einen eigenen Selektor mit dem Namen ".makeTable". Der Punkt gibt an, dass der Selektor für die gleichnamige Klasse "makeTable" verantwortlich ist. Der margin-Eintrag wird deswegen diesem Selektor zu geordnet. Ich habe mich für einen Abstand von 20px entschieden.

get-, set-​ und Attribute-Zeile

Als nächstes nehmen wir uns die Zeile für die set- und get-Befehle und die Zeile zum Setzen von Attributen. Aktuell sind die Bedienfelder untereinander. Aber auch hierfür gibt es einen Selektor, bzw. mehrere Selektoren. Hier wurden drei Selektoren eingerichtet. Die Selektoren ".get", ".set" und ".attr". Wie die Namen schon verraten sind diese jeweils für die get-, set- bzw. Attribut-Zeile zuständig. 

Zum Einsatz kommt die Eigenschaft "float". Diese bewirkt, dass die entsprechenden Elemente an die entsprechende Außenkante verlegt werden. In diesem Fall also an die linke Außenkante. Werden mehrere Elemente so angeordnet, werden sie nacheinander links angeordnet, abhängig von ihrem eigentlichen Aufrufen. Element 1 wird also direkt an die linke Außenkante geschoben und das folgende Element 2 an die recht Außenkante von Element 1 usw. In unserem Fall werden somit alle Elemente in einer Reihe angeordnet. 

Was jetzt noch bisschen stört ist der Abstand zur unteren Tabelle. Wer diesen Beitrag bis jetzt aufmerksam gelesen hat, der wird direkt eine Lösung dafür parat haben. Wie wir schon gelernt haben ist die Eigenschaft "margin" für den Außenabstand zuständig. Den Abstand nach unten haben wir bereits definiert. 

Um nun also den Abstand nach oben auch anzupassen, fügen wir einfach die Eigenschaft "margin-top" zum Selektor ".makeTable" hinzu. Ich persönlich habe mich für einen Abstand von 10px entschieden.

Wer jetzt noch möchte, der kann den Abstand der einzelnen Elemente zueinander erhöhen. Aktuell sind alle Elemente direkt aneinander gereiht. Auch hier kommt wieder die Eigenschaft "margin" zum Einsatz. Um genau zu sein "margin-right". Diese Eigenschaft wird den drei Selektoren für die get-, set- und Attributzeile hinzugefügt.

Ich habe mich für einen Abstand von 5px entschieden.

Abstand der Tabelleneinträge

Auf der Raumdetailseite wurde bereits der Aufbau der Tabelle mit seinen unterschiedlichen Zeilenfarben beschrieben. Genau diese Zeilenstruktur findet nun ja auch auf der Devicedetaiseite Anwendung.

Was mich jedoch hier noch etwas stört ist der Abstand der Einträge zum linken Außenrand. Diese befinden sich aktuell noch direkt an der Außenkante. Bei der Raumdetailseite ist dies auf Grund der Symbole noch nicht allzu doll aufgefallen. Nun innerhalb der Deviceseiten sieht es nun jedoch nicht so gut aus. 

Im zweiten Teil haben wir bereits den Abstand nach rechts angepasst, damit die einzelnen Einträge innerhalb der Deviceübersichtszeile einen Abstand zueinander haben. 

Damit nun der Abstand zur linken Außenseite ebenfalls erhöht wird, fügen wir dem Selektor "table.block td" die Eigenschaft "padding-left" hinzu. Ich habe mich auch hier für einen Abstand von 10px entschieden.

Wer jetzt noch möchte kann natürlich auch den Abstand nach oben anpassen, so das sich die Einträge der Tabelle mittig in ihrer Zelle befinden. Machbar ist dies über den Eintrag "padding-top". 

Untere Linkzeile

Zum Schluss kommt die Linkzeile am unteren Ende der Devicedeteilseite. Aktuell befinden sich alle Einträge untereinander. Für diese Links ist der Selektor "div.detLink" zuständig. Wie wir in Teil 2 gelernt haben, bedeutet der Punkt, dass dieser Selektor für alle div-Elemente verantwortlich ist, welche zusätzlich der Klasse "detLink" angehören. 

Um die Einträge nun in einer Reihe zu positionieren verwenden wir die Eigenschaft "display". Die Eigenschaft "display" legt fest, welche Art von Box ein Element erzeugt. In unserem Fall wollen wir eine Inline-Box. Also Boxen, welche horizontal in einer Linie angeordnet werden. 

Wir fügen also "display: inline" dem Selektor "div.detLink" hinzu. Zusätzlich geben wir mit der Eigenschaft "margin" den Abstand der einzelnen Linkfelder zueinander an.

Zusammenfassung

In diesem Teil haben wir die Devicedetailseite etwas näher betrachtet und sie nach unseren Wünschen angepasst. Dabei sind wieder ein paar neue Eigenschaften aufgetaucht, welche ich nun im Folgenden etwas genauer beschreiben möchte.

float

Mit der Eigenschaft "float" kann ein Element an die rechte oder linke Außenkante verschoben werden. Die Eigenschaft "float" kann somit die Werte "right" oder "left" annehmen. Des Weiteren wird "none" (kein Verschieben) oder "inherit" (vom Elternelement erben) unterstützt.

Mehr Infos zu "float" findet ihr hier.

display

Die Eigenschaft "display" bestimmt welche Art von Box vom Element erzeugt wird. Ein möglicher Wert ist dabei "inline". Eine Inline-Box verläuft horizontal auf einer Linie. Mehrer Inline-Boxen werden somit auf einer Linie nebeneinander angeordnet. Die Größe einer Inline-Box wird nur durch ihren Inhalt bestimmt. Eigenschaften wie "width" finden somit keine Anwendung.

Ein weiterer möglicher Wert ist "block". Eine Block-Box nimmt die komplette Breite seines Elternelements ein und hat die Höhe seines Inhalts. Mehrere Block-Boxen werden somit untereinander angeordnet. 

Mehr Infos zu "display" findet ihr hier.

Was haben wir gelernt?

In diesem Teil haben wir gelernt, wie wir die Devicedetailseite anpassen können. Der Schwerpunkt lag hierbei auf die Anordnung der einzelnen Komponenten. Dazu haben wir unteranderem den bekannten Selektor "table" angepasst sowie neue Selektoren kennengelernt, welche vor allem für die set-, get- und Attributauswahl zuständig sind.

Des Weiteren haben wir zwei neue Eigenschaften kennengelernt. Auch diese haben etwas mit Anordnung von Elementen zu tun.


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

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


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

Abonniere meine Email-Benachrichtigung und erhalte eine Email, sobald ich einen neuen Beitrag veröffentliche. Du kannst dich selbstverständlich jederzeit wieder austragen.


 

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
wpDiscuz