[gelöst]Falsche Größe des Icon im Floorplan

[Paul]

Ich wollte im FLOORPLAN einen weblink-Button einbauen.

Der Button ist wie folgt definiert

Code: [Auswählen]

define zuRSS weblink htmlCode <a href="http://192.168.178.124:8083/fhem/rss/myrss.html"><img src="/fhem/icons/control_arrow_right@red"></a>
Der Button führt auch die entsprechende Funktion aus. Aber :

1. dachte ich, dass er rot wäre.

2. ist er viel zu groß

Ist das ein Fehler im FLOORPLAN oder meine Dämlichkeit?

[nobody42]

Hi,

ich hatte auch solche Effekte, Du kannst das über das floorplan CSS beeinflussen.

unter /opt/fhem/www/pgm2/ gibt es die Datei darkfloorplanstyle.css

Dort kannst Du alle Elemente oder auch Einzelne anpassen.

Wenn Du ein einzelnes Element anpassen willst, dann bekommst Du am einfachsten über FireFox die Info,
wie es heißt: Rechtsklick in Firefox auf das Icon, dann "Inspect Element", dann geht unten ein Info Fenster auf,
wo das Element markiert ist. Dann auf die markierte Zeile unten gehen und nochmal Rechtsklick, "Copy unique selector".
Dann den Inhalt der Zwischenablage in die darkfloorplanstyle.css pasten.

Sieht dann z.B. so aus: #fp_wifi_icon > img:nth-child(1)

dahinter kannst Du dann mit CSS die Eigentschaften verändern. z.B.

#fp_wifi_icon > img:nth-child(1)  {height:40px; width:52px; fill:#eee; background:#383c45;  border:10px solid; border-color:#383c45;}

Hoffe das hilft.

Gruss

[Paul]

Besten Dank hat geklappt.

Super Anleitung.

[GiBy]

...
Wenn Du ein einzelnes Element anpassen willst, dann bekommst Du am einfachsten über FireFox die Info,
wie es heißt: Rechtsklick in Firefox auf das Icon, dann "Inspect Element", dann geht unten ein Info Fenster auf,
wo das Element markiert ist. Dann auf die markierte Zeile unten gehen und nochmal Rechtsklick, "Copy unique selector".
Dann den Inhalt der Zwischenablage in die darkfloorplanstyle.css pasten.

Sieht dann z.B. so aus: #fp_wifi_icon > img:nth-child(1)

dahinter kannst Du dann mit CSS die Eigentschaften verändern. z.B.

#fp_wifi_icon > img:nth-child(1)  {height:40px; width:52px; fill:#eee; background:#383c45;  border:10px solid; border-color:#383c45;}

Auch bei mir sind (und wären wahrscheinlich alle) Icons im Floorplan etwa 10-fach zu groß (s. beigefügten Screenshot aus Firefox und den Code zum Element im HTML-Inspektor).
Doch wie reduziere ich das, in den CSS-Dateien? Ich habe im Inspektor keinen Menüpunkt "Copy unique selector", allenfalls "Copy -> CSS selector", und  in /opt/fhem/www/pgm2/*.css bisher keinen Hinweis auf dieses Element gefunden. Und das leuchtende Birnchen, besteht aus einer ganzen Reihe potrace-Pfade und ist nicht nur ein img wie von Nobody42 beschrieben.

Ich bin für Kommentare, Tips und Lösungswege dankbar.
Gebhardt

[jude]

Hallo GiBy,

bist du hier schon weiter gekommen?

Ich habe eben gesehen, dass ich das selbe Problem habe. Mein Workaround: Ich habe die Icons rausgenommen :- (

Danke und lG
Jürgen

[fiedel]

Setze mal das hier in deine css- Datei:

Code: [Auswählen]

svg { height:32px; width:32px; fill:#278727; }Dadurch werden erst mal alle SVG- Icons klein.
Danach kannst du noch einzelne anpassen, indem du wie oben beschrieben den genauen Pfad suchst und einträgst.

Gruß
Frank

[gestein]

Hallo,

ich muss mich in diesen relativ alten Thread einklinken, da ich als Anfänger gerade meinen ersten Floorplan erstellen wollte.
Auch bei mir sind alle SVG-Icons viel zu groß (siehe Bild im Anhang).

In den Dateien /opt/fhem/www/pgm2/darkfloorplanstyle.css und /opt/fhem/www/pgm2/defaultfloorplanstyle.css sind die Zeilen für svg sschon drinnen:

Code: [Auswählen]

svg { height:32px; width:32px; fill:#fff; vertical-align:middle; margin:2px 0; }
Ich benutze Chrome unter Windows und iOS.

Was kann ich da noch tun?

Danke, lg, Gerhard

[gestein]

Bitte um Entschuldigung, kaum abgeschickt - Fehler gefunden.

Hier stehts eh, ich onnte es aber nicht zuordnen bzw. habe es immer übersehen:
https://forum.fhem.de/index.php/topic,106128.msg1000203.html#msg1000203

Auch bei mir hat das Attribut stylesheet (noch) gefehlt.
Nun klappt es.

lg, Gerhard