Hallo zusammen,
ich steh glaube ich voll auf dem Schlauch. Ich habe in einem Floorplan das gleiche SVG-Icon für verschiedene Aufgaben verendet. Jeder Raum hat ein "structure" für alle Rolladen darin. Zusätzlich gibt es ein weiteres "structure" für das gesamte Stockwerk. Ich habe für jedes das Attribut
off:shutter_closed on:shutter_open
vergeben.
Nun möchte ich gerne, dass die Icons in den Räumen "Standardgröße" haben und die Icons für das Stockwerk deutlich größer sind. Folgende Befehle habe ich in meiner css-Datei schon versucht:
#rol_ug.devicestate img{height:135px; width:135px; }
#rol_ug.devicestate svg{height:135px; width:135px; }
#rol_ug {height:135px; width:135px; }
rol_ug.devicestate img{height:135px; width:135px; }
#rol_ug
.devicestate img{height:135px; width:135px; }
rol_ug.shutter_open { height:125px; width:125px; }
...
Mir brennen bereits die Augen vom Artikel lesen und ich finde einfach keine Lösung. Alle Icons mit dem Namen "shutter_open" und "shutter_closed" ist kein Problem
.shutter_open { height:125px; width:125px; }
.shutter_closed { height:125px; width:125px; }
aber ich will ja nur den einen Schalter für das gesamte Stockwerk...
Vielen Dank für jede Hilfe!
Gruß
Dan
#LS_Umschalten svg { height:190px; width:190px; }#LS_Umschalten steht dabei für den "internal NAME" des devices. z.b. also "NAME LS_Umschalten"
funzt zumindest bei mir so ...
Also bei mir irgendwie nicht...
Mein css-File
body { background-color: #F0F0F0;
font-family:Arial, sans-serif;
font-size:9px;
background-repeat:no-repeat; }
body[id~=Media] { background-color: #A5A5A5;
font-family:Arial, sans-serif;
font-size:9px;
background-image:url(../icons/Media.bak);
background-repeat:no-repeat; }
#logo { position:absolute; top: 100px; left: 10px;
width:64px; height:67px; background-image:url(../icons/fhem_smallscreen); }
#backimg {position:absolute; top:0px; left:0px;}
#menu { position:absolute; top:20px; left:20px; min-width:60px; }
#menu.floorplan { position:absolute; top:20px; left:20px; min-width:80px; font-size:14px; line-height:22px; }
#fpmenu.fp_arrange { position:absolute; bottom:20px; left:20px; min-width:310px; font-size:9px; border:1px solid gray;}
#startcontent {position:absolute; top:20px; left:180px; text-align:left; font-size: 16px; }
table a:hover {font-weight:bold;}
#hdr { position:absolute; top:10px; left:180px; border:1px solid gray; }
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }
a { color: #278727; }
img { border-style: none; }
table { -moz-border-radius:8px; border-radius:8px; }
.fp_Grundriss {border:0px solid gray;}
.devicename {font-size:10px; text-align:center; }
.devicestate {color:black; font-size:20px; text-align:center; }
.devicecommands {font-size:10px; text-align:center; }
.devicetimestamp{font-size:10px; text-align:center; }
#ug_rol svg { height:125px; width:125px; }
#sz_Rollo.devicename {font-size:14px;}
#sz_Rollo.devicecommands {font-size:12px; text-align:center; }
#ez_Aussensensor.devicestate {color:green; font-size:30px; }
#HomeStatus.devicestate {color:green; font-size:30px; }
table.dummy {min-width:100px; }
table.FHT {min-width:100px; }
#wakeup.devicestate {color:green; font-size:11px; }
#ez_FHT.devicestate {color:green; font-size:30px; }
#Home.fp_Grundriss {font-size:14px; width:100px; }
#Home.fp_Media {font-size:14px; text-align:left; }
#Media {font-size:14px; }
#Grundriss {font-size:14px; text-align:left; }
.fp_tempvalue {color:red; font-size:20px; }
.fp_humvalue {color:blue; font-size:20px; }
h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; }
/* detail-selector & slider */
select { margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px; user-select:none;
border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
/* next lines are for openautomation-svg */
svg { height:32px; width:32px; fill:#fff; }
g.on { fill:red; }
/* next lines are for remotecontrol */
.rc_body { border-style: solid; border-color: gray; border-width: 2px;
padding: 5px; background: #C8C8B0; font-size:6px;}
.rc_button { padding: 5px 7px;}
.rc_button img { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }
Das "structure" (oder heißt es die structure ;) )
Internals:
ATTR UG
CFGFN
DEF UG bu.wn.rol
NAME ug_rol
NR 1753
NTFY_ORDER 50-ug.rol
STATE on
TYPE structure
Content:
bu.wn.rol 1
Readings:
2017-04-26 16:53:23 LastDevice bu.wn.rol
2017-04-26 16:53:23 LastDevice_Abs bu.wn.rol
2017-04-26 16:53:23 state on
Attributes:
cmdIcon off:shutter_closed on:shutter_open
fp_Untergeschoss 915,535,7,ug_rol
group Rollladen
room Controller
sortby 4
webCmd on:off
und der Floorplan
Internals:
NAME Untergeschoss
NR 39
STATE Defined
TYPE FLOORPLAN
Attributes:
fp_arrange 0
fp_noMenu 1
group Floorplans
room Floorplans
stylesheet Untergeschoss.css
Lässt sich da mein Fehler finden?
Achtung: es ght hier um FLOORPLAN!
Ich schlage
div#rol_ug img.shutter_open {height:135px; width:135px; }
vor. Evtl. funktioniert mein Vorschlag nicht, wenn ein anderes Floorplan Stil ausgesucht wurde.
Solche Regel kann man z.Bsp. im Chrome auch dynamisch testen, indem man auf dem Element rechte Maustaste, Inspect waehlt, und dann im neuen Fenster rechts im Styles Tab einen der angezeigten Regeln aendert.
Es lohnt sich aber auch eine kurze Einfuehrung ueber die Arbeitsweise der CSS Selektoren zu lesen :)
Leider auch nicht :(
Das einzigen was bisher geht ist
.shutter_open {height:125px; width:125px; }aber eben global.
ZitatEs lohnt sich aber auch eine kurze Einfuehrung ueber die Arbeitsweise der CSS Selektoren zu lesen
Sehr gerne aber wo finde ich sowas? Auch nach HowTos oder Einführungen für css habe ich mich wundgegoogled...in der Einführung für Flooplans habe ich auch nichts gefunden...was vielleicht auch an den falschen Schlagworten lag?!
Neben Code bin ich auch dankbar für Quellen!
sag mal:
hast du in deinem css am ende fest svg mit 32 pixel deffiniert?
damit würdest alles überschreiben, was du vorher gebastelt hast. könnte man warscheinlich aber mit nem !important (#LS_Umschalten svg { height:190px!important; width:190px!important; }) ausbessern oder in andere reihenfolge setzen. bin da aber nicht grade sattelfest.
und nur, damit du mirs glaubst *g*
im anhang jede menge svg's inklusive "#LS_Umschalten" in groß.
Zeig mal das Ergebnis der Inspect-Befehls, wie oben beschrieben.
Zitathast du in deinem css am ende fest svg mit 32 pixel deffiniert?
Ja hab ich. Wenn ich das aber auskommentiere wird nur die Anzeige meiner Heizung groß, die shutter-Bilder bleiben unverändert. Sicher, dass es die svg-Einstellung ist? Das Icon das ich verwende ist eine png-Datei?!
!important... brachte auch keine Veränderung.
ZitatZeig mal das Ergebnis der Inspect-Befehls, wie oben beschrieben.
Inspect-Befehl??? ist das der "!important"-Ausdruck?
Ich habe in einem anderen Raum Icons in verschiedenen Größen im EInsatz und zwar mit
#btn_guestWlan.devicestate img{height:135px; width:135px; }Dort sind die Bilder aber als devStateIcon im Einsatz und nicht als cmdIcon wie in meinem jetzigen Fall...
Ach ja:
Zitatund nur, damit du mirs glaubst *g*
Ich habe nie daran gezweifelt ;)
und
ZitatEs lohnt sich aber auch eine kurze Einfuehrung ueber die Arbeitsweise der CSS Selektoren zu lesen
Gibt es da etwas?
Danke!
ZitatInspect-Befehl??? ist das der "!important"-Ausdruck?
Nein, das ist das, was ich vorher geschrieben habe:
Zitatauf dem Element rechte Maustaste, Inspect waehlt
ZitatGibt es da etwas?
Ich dachte, dass man heutzutage nicht explizit beschreiben muss, wie man eine Suchmaschine bedient, deswegen habe ich die Frage ueberlesen. Ich empfehle den zweiter Treffer bei Google wenn man nach css Selektoren sucht:
http://www.webmasterpro.de/coding/article/css-referenz-selektoren.html
Den ersten Treffer empfehle ich hier gar nicht, da muss man naemlich mehr lesen.
upps - ich verwend nur svg's und hab glatt deine infos zum gif überlesen. würd dir auch generell svg empfehlen wegen der schönen skalierbarkeit und farblichen anpassbarkeit. pixelgrafiken schaun beim skalieren immer so ... igitt ... aus, wenn mans übetreibt.
nur zur info: mit !important kannst du bei css etwas erzwingen. sicher nicht der schönste weg, aber manchesmal gemütlich *g*.
ansonsten würde ich den königlichen pfaden folgen. der herr weiß, wovon er schreibt ...
Es funktioniert. Erst einmal Danke an euch!
Zweitens:
ZitatIch dachte, dass man heutzutage nicht explizit beschreiben muss, wie man eine Suchmaschine bedient
Der tat weh :-\ Ich bin (noch) nicht so bewandert in den Dingen und dachte CSS sei etwas fhem-spezifisches. Nun gib mal "fhem css" bei Google ein ::) Mein Fehler!
Nun zur Lösung:
Mit dem Inspector (allerding Firefox) habe ich die Angaben aus dem Bild im Anhang erhalten. Zusammen mit der Information
ZitatIch schlage
Code: [Auswählen]
div#rol_ug img.shutter_open {height:135px; width:135px; }
vor.
bin ich dann auf folgenden Code gekommen:
div#div-ug_rol.fp_device_div img {height:125px; width:125px; }Und voila...es funktioniert.
Zitatwürd dir auch generell svg empfehlen wegen der schönen skalierbarkeit und farblichen anpassbarkeit
Da hast du sicher recht. Ich finde nur in manchen Fällen die bunten Bildchen schöner und da ich mich gerne im Photoshop austobe ;D Hab mich auch noch nicht wirklich mit dem Erstellen eigener svg Bilder befasst.
Zitatansonsten würde ich den königlichen pfaden folgen. der herr weiß, wovon er schreibt ...
Das weiß ich nicht erst seit diesem Problem ;D
Danke nochmal euch Beiden!