Schriftfarbe von einem Element ändern

[hyper2910]

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

[UliM]

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

[hyper2910]

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

[Grueni76]

Hi!
Bin zwar auch noch neu hier, aber ich glaube, das kann ich schon beantworten
Hier ist exemplarisch ein Ausschnitt aus meiner floorplanstyle.css:

Code Auswählen Erweitern

.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...

[hyper2910]

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

[UliM]

Steht im floorplan einrichtungsleitfaden Beispiel ez_FHT

#<devicename> {Formatierung}

Gruß Uli

[frober]

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.

[frober]

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?

[fiedel]

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)! 

Ich sage dir dann, ob du es richtig gemacht hast. 

Gruß

Frank

[frober]

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

[fiedel]

Hi Bernd,

Wenn 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. 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:

Code Auswählen Erweitern




/* 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

[frober]

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

[otto]

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

[justme1968]

das geht nur wenn du readingsGroup verwendest um dir daten darzustellen.

gruss
  andre

[Prof. Dr. Peter Henning]

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