Hallo,
leider komme ich nicht weiter.
Ich habe im Floorplan einen Schalter auf einem bald weissen Untergrund, dort kann man das Ein/aus kaum lesen, wie kann man die Schriftfarbe von diesem Schalter ändern?
Danke für die hilfe
Dirk
Hi,
steht im floorplan-Einrichtungsleitfaden - Du musst die enstpr. css-Datei bearbeiten.
Wenn Du Firefox nutzt: installier Dir Firebug, damit findest Du leicht raus, welches css-tag Du setzen musst.
Gruß, Uli
Hallo Uli,
danke für die Info.
Ich weiss, welches CSS ich ändern muss, jedoch finde ich den Part den mir z.B. Firebug anzeigt in der CSS nicht und auch nicht mit welchem Befehl ich die Farbe ändern kann.
gruss Dirk
Hi!
Bin zwar auch noch neu hier, aber ich glaube, das kann ich schon beantworten ;-)
Hier ist exemplarisch ein Ausschnitt aus meiner floorplanstyle.css:
.fp_Grundriss {border:0px solid gray;}
.devicename {font-size: 15px; text-align:left; color: #C8C8C8; }
.devicestate {font-size: 20px; text-align:left; color: #00C800; font-weight:bolder; }
.devicecommands {font-size:14px; text-align:center; }
.devicetimestamp{font-size:10px; text-align:center; }
Im oberen Drittel der Datei sieht Du einen Eintrag in der Art:
.fp_<Name Deines Floorplans> {border:0px solid gray;}
Darunter sind dann die einzelnen Einträge für die Elemente des Floorplans. .devicename definiert das Layout des Namens des Schalters oder des Thermostaten, .devicestate das des (Mess-)Werts.
In diesen Zeilen kannst Du das color-Attribut: color: #00C800 mit einem Farbwert in hexadezimaler Schreibweise eintragen, bei mir entspricht das einem fast maximal hellem Grün: #00C800 beim Messwert und einem hellen Grau: #C8C8C8 beim Namen.
eine Erklärung, wie die Farbangabe aufgebaut ist, gibt's hier: http://de.selfhtml.org/html/allgemein/farben.htm
Der Rest der Attribute sollte selbsterklärend sein...
Hi,
ich glaube das ist das PRoblem, hier kann ich doch nur allen Elementen eine Änderung zukommen lassen,
Ich möchte aber nur einem Schalter eine andere Farbe geben,
Gruss Dirk
Steht im floorplan einrichtungsleitfaden Beispiel ez_FHT
#<devicename> {Formatierung}
Gruß Uli
Hallo,
Ich habe auch ein Problem:
Die Formatierung der devicestates funktioniert soweit, bis auf die readings.
Vorübergehend habe ich die Außentemperatur der Luxtronik2 (reading "ambientTemperature") im Floorplan aufgenommen.
Die Anzeige ist vorhanden, lässt sich aber nicht formatieren.
In der floorplanstyle.css habe ich, wie in der Anleitung beschrieben, folgendes eingefügt.
#Heizung.devicestate {font-size:30px; color:green; }
Fehm.config:
define Heizung Luxtronik2 192.168.2.21 180
Eigentlich sollte.
.devicestate {text-align:center; color:green; }
schon reichen. Alles Andere wird dadurch schon geändert.
Hat jemand eine Idee?
Schon mal vielen Dank.
Hallo,
ich habe die Lösung mittels Firefox und Firebug gefunden.
Es gibt ein extra Merkmal .devicereading
Spez. wäre dann:
#Heizung-ambientTemperature.devicereading {font-size:30px; }
Beim Namen sieht es so aus:
#Heizung-devicename.devicename {font-size:30px; }
allerdings zählt das für alle Floorplans, ansonsten hinter devicename ein .fp_Grundriss anhängen.
Gibt es eine Liste oder Beschreibung aller Stylesheedmerkmale?
Hi frober,
nicht dass ich wüsste. Ich mache das auch immer so wie du - Firebug und dann klicken und gucken... ;)
Spezialaufgabe für dich: Lege mal ein SVG- Plot in einem Flooplan an und versuche nur die Beschriftung (z.B. Titeltext) dieses einen Plots umzufärben (css- Adresse dann bitte hier reinstellen)! 8)
Ich sage dir dann, ob du es richtig gemacht hast. ;D
Gruß
Frank
Hallo Fank,
den devicename habe ich umgefärbt mit:
#SVG_Log_Heizung_1-devicename { color:red; }
Komischerweise braucht man hier einen Bindestrich und kein Punkt vor dem devicename.
Wenn du aber den Titeltext im Plot meinst komme ich nicht weiter.
Die Änderungen muß man im svg_style.css vornehmen. Die Farbe wird bei text bzw text.title mit fill:farbe geändert. Allerdings wirkt sich das auf alle Plots aus. Wie ich nur den Plot im Floorplan ändere habe ich noch nicht herausgefunden.
Gruß
Bernd
Hi Bernd,
ZitatWenn du aber den Titeltext im Plot meinst komme ich nicht weiter.
...aber du hast es wenigstens versucht! :) Naja, die "Spezialaufgabe" war ja auch mehr scherzhaft gemeint.
Richtig, man kann die Plotbeschriftung (nach unserem aktuellen Wissensstand) nur für alle Plots ändern.
Ich lege mir dabei schon eine Weile die Karten - bin aber auch kein Webseiten- Profi. Man kann CSS- Elemente auch noch anders adressieren, als über id und class (http://www.mediaevent.de/css/css-selektor-attributselektor.html). Damit hatte ich bei diesem Spezialfall bisher aber auch noch keinen Erfolg. Jetzt gehe ich einfach den Weg, dass ich den Floorplanhintergrund etwas anders gestalte. Dann kann die Schrift bleiben wie sie ist.
Du wolltest doch eine "Liste". Hier mal meine Sammlung "zusammengefirebugter CSS- Verbiegungen:
/* eigene Design- Einstellungen für Floorpläne: */
/* ################################################### */
/* spezielle Design- und Größeneinstellung für Kamerabild, abweichend von Zeile 20 */
#Cam_01_Stream img { width:430px; height:230px; -moz-border-radius:8px; border-radius:8px;}
#Cam_01_Stream_FP img { width:430px; height:230px; -moz-border-radius:8px; border-radius:8px;}
#Cam_01_Snap_FP img { width:430px; height:230px; -moz-border-radius:8px; border-radius:8px;}
/* Plots ohne Steuerbuttons zum Platz sparen: */
#table-01_Alarm svg { height:0px; width:0px; visibility:hidden; }
#table-01_Gasverbrauch svg { height:0px; width:0px; visibility:hidden; }
#table-02_Energie_Monat svg { height:0px; width:0px; visibility:hidden; }
/* Spezielle Schriftgrößen und Designs: */
#Dum_TelMon_ShowNa_D-devicename.devicename.fp_9_Telefon {font-family: Verdana; font-size:30px; font-weight: bold; color:#808080;}
#Dum_TelMon_ShowNa_D.devicestate.fp_9_Telefon {font-family: Verdana; font-size:80px; font-weight: bold; color:red;}
#Dum_TelMon_ShowNu_D-devicename.devicename.fp_9_Telefon {font-family: Verdana; font-size:30px; font-weight: bold; color:#808080;}
#Dum_TelMon_ShowNu_D.devicestate.fp_9_Telefon {font-family: Verdana; font-size:50px; font-weight: bold; color:red;}
/* Design für Blocks (Anrufliste, ): */
table.block { border:1px solid #ffffff; width: 100%; background: #333333; box-shadow:5px 5px 5px #000;}
table.block tr.odd { background: #111111; }
table.block tr.sel { background: red; }
table { border-radius:8px; border-spacing: 0px; padding-bottom: 6px; padding-top: 6px; }
table.column { border-spacing: 5px; }
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
#Anrufliste.devicestate.fp_9_Telefon {color:#CCCCCC; font-size:13px; }
/* Design für Wettervorschau im Hauptfloorplan: */
#w_Wetter {font-size:12px; font-weight:bold; color:#D4D4D4; position:absolute; top:-5px; left:0px; width:210px; -moz-border-radius:0px; border-radius:0px; border-spacing: 0px; border:0px solid #CCCCCC; background: #transparent; box-shadow:0px 0px 0px #000; padding: 0px; }
/* Design für Zisternenlevel im Hauptfloorplan: */
/* #zi_level.devicestate { font-size: 16px; font-weight: normal; text-align:center; color: red; } */
/* Design für Offsetfelder im Energiefloorplan: */
#OW_Counter.devicestate.fp_7_Plots_Energie {font-family: Verdana; font-size:16px; font-weight: bold; color:grey;}
#Offset_A.devicestate.fp_7_Plots_Energie {font-family: Verdana; font-size:14px; font-weight: bold; color:grey;}
#Offset_B.devicestate.fp_7_Plots_Energie {font-family: Verdana; font-size:14px; font-weight: bold; color:grey;}
#Offset_A-devicecommands.devicecommands {font-family: Verdana; font-size:14px; font-weight: bold; color:grey;}
#Offset_B-devicecommands.devicecommands {font-family: Verdana; font-size:14px; font-weight: bold; color:grey;}
input {outline:none; background-color: dimgray;
border: 1px solid #ffffff; color: gold; font-weight: bold; padding:5px;
margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
input:focus {border: 1px solid red;}
input:disabled {color: #808080; }
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }
#table-Offset_A.fp_7_Plots_Energie {outline:none; background-color: transparent;
border: 1px solid #ffffff; border-radius:8px;}
#table-Offset_B.fp_7_Plots_Energie {outline:none; background-color: transparent;
border: 1px solid #ffffff; border-radius:8px;}
Gruß
Frank
Hallo Frank,
Danke für die "Liste", werde sie bestimmt brauchen. :)
Nur zur Info: Ich stehe ganz am Anfang von Fhem und versuche mich durch zu arbeiten. Was nicht immer einfach ist. :(
Eine Frage noch: Kann ich mittels .css bei den readings die Einheiten ( °C, % ect.) hinzufügen oder muß ich dies mittels Perl in der Fhem.config?
Gruß
Bernd
Hallo wollte mal nachfragen ob man hier auch das mit den wechselden Farben miteinbringen kann( DS18B20)Temperatursensor :
attr Temp valueStyle {($READING eq "temperaturer" && $VALUE > 10)?'style="color:red"':'style="color:green"'}
aber die bringt mir Fehlermaldung wied nich erkannt
unknown attribute valueStyle.
Gruß otto
das geht nur wenn du readingsGroup verwendest um dir daten darzustellen.
gruss
andre
Mit Hilfe von CSS kann man alle Attribute für jedes einzelne HTML-Element setzen. Und zwar auch dann, wenn dafür keine speziellen eigenen Darstellungsklassen (erkennt man an dem ".", mit dem der Klassenname beginnt) definiert worden sind. Man muss lediglich die richtige Kombination für einen kontextuellen Selektor finden.
Angehängt ein paar Seiten aus einem meiner Bücher, die gerne als Anleitung zum Einstieg verwendet werden können.
LG
pah
Hi Peter,
sehr schön, da kann ich dich zur Not ja mal löchern! ;) An einigen Sachen hier im Frontend lege ich mir schon ne Weile die Karten. Die habe ich sogar schon versucht mit alternativen Adressierungsmethoden (http://www.mediaevent.de/css/css-selektor-attributselektor.html) anzusprechen, aber bisher ohne Erfolg.
Werde deinen Buchauszug mal durchfosten. Vielleicht bringt der mich ja auf die richtige Spur. Vielen Dank dafür!
Gruß
Frank
Kann mir einer sagen wo ich die .css Files finde?
Danke.
Im Fhemweb auf Edit files und nach unten scrollen.
Oder
Unter fhem/www/pgm2/
Ach wie schön wäre es, wenn man die Schriftfarbe für einzelne Elemente via WebGui ändern könnte....;-)
Es freut einen immer wieder, wenn Neulinge mit solchen Anforderungen auftauchen. Mein Tipp: sich einen der in großer Zahl verfügbaren CSS-Editoren besorgen.
LG
pah
Zitat von: UliM am 28 Januar 2014, 14:41:22
#<devicename> {Formatierung}
Gruß Uli
Hier geht es zwar um die Elementfarbe in einem Florrplan, aber im Prizip sollte es ja egal sein wo sich das Element befindet, man muss nur die richtig CSS Datei wählen.
Ich bekomme es aber nicht hin ein bestimmtes Element farbig und fett darzustellen :S
#Mobilgeraete_Zuhause { color: blue; font-weight: 900;}