Eigene CSS-Datei einbinden (gelöst und bereits vorhanden)

FHEm2005 · 10 November 2014, 12:40:47

Immer wieder kann man/frau im Forum lesen, dass die eine oder andere Darstellung geändert werden soll.

Ich frage mich, ob man die viele Anfragen umgehen kann, wenn eine eigene CSS-Datei eingebunden werden könnte.

Zur Erläuterung: In Typo3 kann eine eigene CSS-Datei z.B. myExtensions.css definiert werden. Diese CSS-Datei wir als letztes eingelesen und überschreibt alle dort beschriebenen ID's und Klassen. Soll eine bestimmte Klasse geändert werden, kann diese z.B. mit Firebug identifiziert werden und neu in myExtensions.css angelegt werden. Dadurch werden die im System hinterlegten Werte überschrieben. Soll der Ursprung wieder hergestellt werden, wird einfach die myExtensions.css gelöscht und alles ist wieder beim Alten.

Wie stelle ich mir das Ganze vor?

define myExtensions myCSS //eine CSS Datei mit Namen myExtensions.css wird angelegt
attr myExtensions id #menu {font-size: 25px;} // Die Schriftgröße wird auf 25px angehoben
attr myExtensions class .roomBlock3 {background: none repeat scroll 0% 0% ##969696;}, .roomBlock3 {box-shadow: 5px 5px 5px #AADA12;}

Mehrere Klassen in einer Zeile werden durch Kommata getrennt.

oder : attr myExtensions class .roomBlock3 > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > div:nth-child(1) > a:nth-child(1) {color: red;} // Der Menueeintrag "Küche" wird rot dargestellt.

Damit wäre die Möglichkeit geschaffen bei bestimmten Alarmzuständen die Schriftfarbe eines Menuepunktes zuändern und dadurch hervorzuheben.

Die oben vorgenommenen Veränderungen würden sich - wie in der Anlage zu sehen - auswirken.

Ist ein solcher Wunsch sinnvoll bzw. durchführbar?

Gruß
Eberhard

fhainz · 10 November 2014, 13:27:33

FHEMWEB hat für eigene styles ein Attribut. Siehe commandref.

FHEm2005 · 10 November 2014, 14:04:55

Damit kann ich aber keine Id's und Klassen ansprechen, sondern nur Werte im Rahmen der fhem.cfg.

Frage: Wäre man in der Lage die Farbe des Menueeintrages Küche dediziert zu verändern? Der hat den wie oben dargestellten eindeutigen Selektor:
.roomBlock3 > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > div:nth-child(1) > a:nth-child(1)

Wenn aber für soetwas kein Bedarf vorhanden ist, ich also wahrscheinlich der Einzige bin, kann der Wunsch getrost vom "Wunschzettel" gestrichen werden.

Gruß
Eberhard

fhainz · 10 November 2014, 18:25:34

Zitat von: FHEm2005 am 10 November 2014, 14:04:55
Damit kann ich aber keine Id's und Klassen ansprechen, sondern nur Werte im Rahmen der fhem.cfg.

Klar geht das, mit dem CssFiles Attribut kannst du deine eine css einfügen.

ZitatCssFiles
Leerzeichen getrennte Liste von .css Dateien, die geladen werden. Die Dateinamen sind relativ zum www Verzeichnis anzugeben. Beispiel:
attr WEB CssFiles pgm2/mystyle.css

Zitat von: FHEm2005 am 10 November 2014, 14:04:55
Frage: Wäre man in der Lage die Farbe des Menueeintrages Küche dediziert zu verändern? Der hat den wie oben dargestellten eindeutigen Selektor:
.roomBlock3 > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > div:nth-child(1) > a:nth-child(1)

Ja. Ich mach das so ähnlich mit meinen ReadingsGroups, da kannst du der ReadingsGroup direkt eine klasse geben.

Code Auswählen

table.rgTemperaturen tr:first-child td:nth-child(2){  /*  1. Zeile, 2. Spalte */  text-align: center;	}
table.rgTemperaturen tr td:first-child{  /* 1. Spalte */ width: 45px; text-align: center; }
table.rgTemperaturen tr td:nth-child(2){ /* 2. Spalte */ width: 33%; text-align: left;	}
table.rgTemperaturen tr td:nth-child(3){ /* 3. Spalte */ width: 15%;	}
table.rgTemperaturen tr td:nth-child(4){ /* 4. Spalte */ width: 15%;	}
table.rgTemperaturen tr td:nth-child(5){ /* 5. Spalte */ width: 15%;	}

FHEm2005 · 11 November 2014, 08:15:39

Das ist ja mal richtig geil! Ich habe schon viel hier im Forum und Wiki gesucht und gelesen. Wo kann ich da etwas nachlesen?

ZitatJa. Ich mach das so ähnlich mit meinen ReadingsGroups, da kannst du der ReadingsGroup direkt eine klasse geben.

Das verstehe ich nicht so ganz.

Das Beispiel:

Zitattable.rgTemperaturen tr:first-child td:nth-child(2){ /* 1. Zeile, 2. Spalte */ text-align: center;   }
table.rgTemperaturen tr td:first-child{ /* 1. Spalte */ width: 45px; text-align: center; }
table.rgTemperaturen tr td:nth-child(2){ /* 2. Spalte */ width: 33%; text-align: left;   }
table.rgTemperaturen tr td:nth-child(3){ /* 3. Spalte */ width: 15%;   }
table.rgTemperaturen tr td:nth-child(4){ /* 4. Spalte */ width: 15%;   }
table.rgTemperaturen tr td:nth-child(5){ /* 5. Spalte */ width: 15%;   }

packst Du dann in die mystyle.css. ? Direkt in der fhem.cfg geht das nach meinem Verständnis nicht, sondern nur überden WEg der CSS.

Vielen Dank für die Erläuterung. (Daumen hoch). Heute IST Weihnachten!

!!

Gruß Eberhard

PS: Wäre es nicht vernünftig den Thread zu verschieben? Das interessiert mit Sicherheit noch weitere fhem-Fans.

fhainz · 11 November 2014, 12:30:00

Zitat von: FHEm2005 am 11 November 2014, 08:15:39
Wo kann ich da etwas nachlesen?Das verstehe ich nicht so ganz.

In der commandref ist alles genau beschrieben.

Zitat von: FHEm2005 am 11 November 2014, 08:15:39
packst Du dann in die mystyle.css. ?

Ja.

Zitat von: FHEm2005 am 11 November 2014, 08:15:39
Direkt in der fhem.cfg geht das nach meienem Verständnis nicht, sondern nur überden WEg der CSS.

Naja ist ja irgendwo klar oder? CSS Code gehört in eine css datei und die cfg kann dir eigentlich egal sein. Du machst ja alle Einstellungen übers Webinterface oder? Wenn nicht solltest du dir das angewöhnen!

FHEm2005 · 12 November 2014, 07:59:03

Vielen Dank für die Unterstützung! Jetzt ist wieder viel "Stoff" zu spielen da! das war genau das was ich wollte.

Herzlichen Gruß
Eberhard

FHEm2005 · 12 November 2014, 16:51:04

Darf ich doch noch eine Zusatzfrage stellen?

ZitatJa. Ich mach das so ähnlich mit meinen ReadingsGroups, da kannst du der ReadingsGroup direkt eine klasse geben.

Die Klasse muss ich ja in der HTML-Datei wiederfinden. Ich verstehe nicht, mit welchem Trick das gewünschte Element z.B. in Firebug die Klasse den Namen eberhard bekommt und dort auch angezeigt wird. Also z.B. der öffnende Tag einer ReadinsGroup soll die Klasse eberhard bekommen und wie nachfolgend in HTML zu finden sein:

<table class="eberhard"> . Geht das?

In dem Beispiel welches nach dem Zitat steht, sehe ich so etwas nicht. Kannst Du mir ein Beispiel zeigen, oder habe ich da etwas völlig falsch verstanden.

Gruß
Eberhard

fhainz · 12 November 2014, 16:58:25

Das ReadingsGroups Modul hat eine Attribut style. Wenn du das Attribut auf zB

Code Auswählen

class="block wide eberhard" setzt, kannst du diese ReadingsGroup mit

Code Auswählen

.eberhard stylen.

Der ReadingsGroup table sieht dann so aus:

Code Auswählen

<table class="block wide eberhard">

Edit:
Es hat auch (fast) jeder andere Table eine ID mit dem du direkt auf den table zugreifen kannst. Zb eine group "Allgemeines"

Code Auswählen

<table id="TYPE_Allgemeines" class="block wide">

FHEm2005 · 12 November 2014, 18:40:03

Den ersten Teil habe ich begriffen und nachvollziehen können. Somit steht für den Tabelleninhalt des Readings die class="eberhard" zur verfügung. Super!!

Als Edit schreibst Du als Beispiel:

Zitat<table id="TYPE_Allgemeines" class="block wide">

Dabei hakelt es noch ein wenig, um innerhalb dieser Tabelle das richtige Element anzusprechen. Das bekomme ich aber mit Überlegungen und ausprobieren hin. Danke für Deine Hilfe.

Gruß
Eberhard