FHEM Forum

FHEM => Frontends => Thema gestartet von: Bubbles71 am 05 September 2014, 00:23:04

Titel: Docu zu Stylesheet
Beitrag von: Bubbles71 am 05 September 2014, 00:23:04
Hallo!

Ich versuche gerade, ein Stylesheet für meine Bedürfnisse neu zu gestalten. Mit "Trial and Error" komme ich schon recht weit, aber viel schöner wäre eine gezielte Modifikation.

Gibt es eine Docu, was im Stylesheet wie beschrieben wird?

Mein aktuelle Problem: Ich würde im Menü der Floor-Pläne auf der linken Seite gerne Trennstriche zwischen den einzelnen Menüpunkten einbauen... gelingt mir aber nicht.

Ach würde ich gerne die Schriftfarbe im Menü anpassen. Ändere ich aber "a", dann erhalten alle links diese Farbe.

Liebe Grüße,

Roland
Titel: Antw:Docu zu Stylesheet
Beitrag von: Frank Hell am 05 September 2014, 08:49:04
Servus,

du brauchst scheinbar ein allgemeines Tutorial zum Thema "CSS" (http://de.html.net/tutorials/css/lesson6.php (http://de.html.net/tutorials/css/lesson6.php)).

Wenn man verstanden hat wie CSS funktioniert, dann muss man auch keine Doku zum Stylesheet schreiben bzw. lesen.

Viel Glück!

Gruß
Frank
Titel: Antw:Docu zu Stylesheet
Beitrag von: rudolfkoenig am 05 September 2014, 08:54:22
Doku gibts nicht, und ich plane auch keine, aber vielleicht stellt jemand kleine HOWTOs ins fhemwiki.

Mit etwas CSS-Wissen und den eingebauten Entwickler-Werkzeugen von FF, Chrome & Co kann man etliches bewerkstelligen, siehe auch die diversen Fremd-Styles wie dark, ios6, ios7.
Titel: Antw:Docu zu Stylesheet
Beitrag von: Bubbles71 am 05 September 2014, 21:53:33
Hallo Frank und Rudolf,

die Kombination aus dem CSS Tutorial und den Entwicklungstools + weiterem Trial and Error hat geholfen.

Danke,

Roland


Titel: Antw:Docu zu Stylesheet
Beitrag von: zohaa am 13 September 2014, 12:40:50
Wenn in FHEMWeb ein PNG-Icon als Zustands-Icon dargestellt wird, so kann ich einen Tooltip / eine Quickinfo mit dem STATE sehen,
wenn ich kurz mit der Maus über dem Icon warte. Wenn das Icon allerdings als SVG vorliegt funktioniert das nicht.

Kann man das evtl. irgendwie aktivieren? Wenn nicht, kann ich mir neben dem Icon zusätzlich den Zustand als Text ausgeben lassen?
Titel: Antw:Docu zu Stylesheet
Beitrag von: justme1968 am 13 September 2014, 12:52:06
http://forum.fhem.de/index.php/topic,26787.msg197554.html#msg197554

man müsste mal probieren ob alttext einigermaßen browserunabhängig funktioniert.

gruss
  andre
Titel: Antw:Docu zu Stylesheet
Beitrag von: Elektrolurch am 13 September 2014, 13:23:16
Hallo,

das letzte mit der Textausgabe über dem Icon würde mich auch interessieren, da ich nun mal auf einen Screenreader angewiesen bin. Bei dem Browser auf meinem Handy wird von dem SVG - Icon der Tag "metadata" vorgelesen, so dass ich überall, wo ich die SVG-Ikons verwendet habe, das Copyright aus dem metadata - Tag gelöscht habe und einen Text für das Ikon eingesetzt habe (shutter-90 heißt dann "offen 90").

Noch eine Frage zu dem Thema:
Ich habe das schon seit langem auf meiner todo-Liste, aber mir noch nichts dazu angesehen.
Ich habe noch ein bisschen (wenig, wenig) Sehrest und würde mir gerne die plots ansehen. Dazu müsste ich aber den Hintergrund auf schwarz setzen und die Linien dick und weiß.
a) Welches css ist das?
b) Wirken Änderungen dort auf alle vorhandenen plots oder nur auf neu erstellte?

Wenn da jemand mir einen "Anschub" geben könnte ohne das ich erst mir css  durchlesen müsste.... wäre nett. Danke.

Gruß

Elektrolurch
Titel: Antw:Docu zu Stylesheet
Beitrag von: rudolfkoenig am 13 September 2014, 18:15:19
a) es sind drei Dateien betroffen:
    XXXsvg_style.css (wobei XXX leer fuer default und dark fuer das darkstyle ist) bestimmt die Farben, die Linien sind als .l0,.l1 etc aufgefuehrt.
    XXXsvf_defs.css die Hintergruende/Fuellfarben (siehe gr_bg)
    Liniendicke kann man direkt im Editor setzen
b) es wirkt auf alle SVGs aus.
Titel: Antw:Docu zu Stylesheet
Beitrag von: Prof. Dr. Peter Henning am 17 September 2014, 09:16:52
Gerne stelle ich ein paar Seiten aus einem meiner Bücher als Kurzanleitung (und nur für den Einstieg ausreichend ...) zu CSS zur Verfügung, siehe Anhang.

LG

pah