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

Begonnen von Paul, 11 März 2015, 16:13:59

Vorheriges Thema - Nächstes Thema

Paul

Ich wollte im FLOORPLAN einen weblink-Button einbauen.

Der Button ist wie folgt definiert

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?

Cubietruck, HM-USB, CUL, FS20, FHT, HUE, Keymatic

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.
Cubietruck, HM-USB, CUL, FS20, FHT, HUE, Keymatic

GiBy

#3
Zitat von: nobody42 am 11 März 2015, 16:41:48
...
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
Nutze FHEM 5.9 auf Pi3B Raspbian
4.19.66-v7+ #1253 SMP Thu Aug 15 11:49:46 BST 2019 mit Mosquitto und CUL 3.4 868MHz, λ/4-Antenne,
433MHz-Funkschaltdosen, Sonoff/Tasmota: RF Bridge 433 MHz (incl. Portisch-FW), Basic, POW-R2

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
FHEM auf Linux, CUL, HMLAN, ...

fiedel

Setze mal das hier in deine css- Datei:
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
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

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