Dark Theme für FHEM Standardoberfläche

2,540 views
Skip to first unread message

Till

unread,
Nov 18, 2011, 9:42:54 AM11/18/11
to FHEM users
Hallo Leute:

Für alle, die es ausprobieren möchten:

Dark Theme:
http://musicbee.amasongs.de/style.css

Einfach unter "Edit files" in der style.css den Inhalt ersetzen.

Grüße Till

Rudolf Koenig

unread,
Nov 18, 2011, 9:50:02 AM11/18/11
to fhem-...@googlegroups.com
Schoen :) Kriege ich bitte auch noch einen passenden CSS fuer die SVG's?

Till

unread,
Nov 18, 2011, 9:58:46 AM11/18/11
to FHEM users
Ich kenne Fhem erst seit Anfang der Woche...
Wofür sind SVG's denn gut, bzw. wo seh ich das Resultat der CSS Datei?

Till

unread,
Nov 18, 2011, 10:02:22 AM11/18/11
to FHEM users
Achso, ich hatte jetzt einfach das Logo geändert, weil ich keine
Vectorgrafik zur Hand hatte, Ziel ist es aber auf jeden Fall das
Original Logo zu verwenden.

Rudolf Koenig

unread,
Nov 18, 2011, 10:11:32 AM11/18/11
to fhem-...@googlegroups.com
On Fri, Nov 18, 2011 at 06:58:46AM -0800, Till wrote:
> Wof�r sind SVG's denn gut, bzw. wo seh ich das Resultat der CSS Datei?

svg_style.css ist fuer die plots da, siehe auch http://fhem.de/pgm2-3.png, auf
fhem.de unter SVG-Plots verlinkt.

Till

unread,
Nov 18, 2011, 11:38:51 AM11/18/11
to FHEM users
Ok , ich muss mich erstmal am Wochenende in die Materie mit den SVG's
einlesen... ;-) Oder gibt es irgendeine schnelle Möglichkeit einen
Plot anzeigen zu lassen, ohne einen Sensor für Regen etc. im System zu
haben? z.B: über das virtuelle Weather Plugin?
Wenn dem so wäre könnte ich noch kurz die CSS heute Abend anpassen,
ansonsten eben irgendwann am Wochenende...

Grüße
Till

On 18 Nov., 16:11, Rudolf Koenig <inf...@koeniglich.de> wrote:
> On Fri, Nov 18, 2011 at 06:58:46AM -0800, Till wrote:
> > Wof r sind SVG's denn gut, bzw. wo seh ich das Resultat der CSS Datei?
>
> svg_style.css ist fuer die plots da, siehe auchhttp://fhem.de/pgm2-3.png, auf
> fhem.de unter SVG-Plots verlinkt.

Andy Fuchs

unread,
Nov 18, 2011, 1:03:19 PM11/18/11
to fhem-...@googlegroups.com
Hi Till,

SVGs sind ganz normale vektoren, die über xml gemalt werden. Man kann die entweder über CSS stylen, meistens macht man das aber über svg selbst (oder gemischt :-)). Bei mir sieht's z.B. so aus:


Der Vorteil, wenn man's direkt im SVG macht ist, dass man jede Komponente (hier die Linien und den Grid) separat stylen kann (ich könnte also alle Temperatur-Verläufe in einen Grid malen und nur die Linienfarbe anpassen). Das ist deutlich flexibler, als ein CSS vorzudefinieren... Andererseits wird CSS oft hardware-beschleunigt auf der Grafikkarte gerendert und ist dann meist deutlich schneller (bei 50 oder mehr Grids ist das dann auch signifikant - allerdings werden SVGs weichgezeichnet und sehen daher besser aus).

Grüße

andy


--
To unsubscribe from this group, send email to
fhem-users+...@googlegroups.com

Volker

unread,
Nov 19, 2011, 3:55:44 AM11/19/11
to fhem-...@googlegroups.com
Hallo Till,
 
sieht super aus.
 
Danke
 
MfG
 
Volker

Volker

unread,
Nov 19, 2011, 4:32:28 AM11/19/11
to fhem-...@googlegroups.com
Hallo,

svg_style.css ala Till

MfG

Volker
svg_style.css
Message has been deleted

Till

unread,
Nov 19, 2011, 11:27:06 AM11/19/11
to FHEM users
Hallo Volker

Perfekt, danke ;-)

Allen ein schönes Wochenende
Till

>  svg_style.css
> 1KAnzeigenHerunterladen

Volker

unread,
Nov 20, 2011, 2:52:58 AM11/20/11
to fhem-...@googlegroups.com
Hallo Till,

wenn du die commandref.html und die faq.html auch im gleichen aussehen haben willst,
kannst du die folgenden Zeilen noch in deine *.css einfügen:

Begin Code

/*
next lines are for commandref and faq
*/
    #left  { position:absolute; top:140px; left:60px; width:140px; }
    #right { position:absolute; top:20px; left:200px; bottom:20px; right:10px; }
    body>div#left { position:fixed; }
    div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
    div#dist { padding-top:0.3em; }
    h2,h3,h4 { color:#0026FF; line-height:1.3; margin-top:1.5em; font-family:Verdana; }

End Code

In der Commandref.html sowie der faq.html müsste dann noch diese Zeile im head Bereich ergänzt werden:

Beginn Code
<link rel="stylesheet" type="text/css" href="style.css">
End Code

Falls du eine andere *.css Datei benutzt, dann muss der href= part angepasst werden.

Den Abschnitt Style dann auskommentieren.

@All
Gibt es eigentlich eine (einfache) Möglichkeit die Info über eine Stylesheet aus der fhem.cfg auszulesen?
Falls das dann in die commandref und faq eingebaut würde, bräuchte man nicht nach jedem update diese beiden Dateien anzupassen.

MfG

Volker

Peter Maier

unread,
Nov 20, 2011, 10:57:46 AM11/20/11
to FHEM users
Hallo

gibt es eine Möglichkeit die stylesheets für svg in der cfg
festzulegen?

normale css geht: attr WEB stylesheet dark_style.css
und für dark_svg_style.css ?

Gruss Peter

Rudolf Koenig

unread,
Nov 20, 2011, 2:24:06 PM11/20/11
to fhem-...@googlegroups.com
Damit man andere .css Dateien einfacher verwenden kann, habe ich vor den
stylesheet Attribut mit einem stylesheetPrefix Attribut zu ersetzen.

Folge: wenn von fhem <name>.css angefordert wird, dann liefert es
{stylesheetPrefix}<name>.css aus. Damit kann man auch commandref & co mit einem
neuen Theme versehen und ein neues css fuer SVG sollte auch kein Problem sein.

Gegenargumente?

Peter Maier

unread,
Nov 21, 2011, 7:44:02 AM11/21/11
to FHEM users
> stylesheet Attribut mit einem stylesheetPrefix Attribut zu ersetzen.
...
> Gegenargumente?

Keine ... eigentlich eine galante Lösung

Till

unread,
Nov 21, 2011, 12:54:33 PM11/21/11
to FHEM users
Klingt sehr gut ;-)

Rudolf Koenig

unread,
Nov 26, 2011, 7:15:50 AM11/26/11
to FHEM users
stylesheetPrefix eingefuehrt:

- FHEMWEB hat jetzt einen zusaetzlichen Eintrag "Select style", fuer
Tippfaule. save ist trotzdem notwendig :)
- ich war frech, und darkstyle samt Bild nach fhem/webpgm/pgm2
eingecheckt, immerhin mit einem Author Till/Volker. als Kommentar.
Wenn Till oder Volker Veto einlegen, dann werde ich die Dateien
entfernen. Solange hat man wenigstens was zum auswaehlen.
- h4 von blau auf hellgrau geaendert, sonst tut es weh :)
- darksvg_defs.svg hinzugefuegt, sonst sind die Plot-Hintergruende
unpassend gelb.
- fuer smallscreen ist dark nicht optimal
- das Bild/Logo wird jetzt im .css definiert
- alle HTMLs (fhem.html/commandref.html/USB.html/etc) angepasst.
- fuer updatefhem bereitgestellt.

Volker

unread,
Nov 26, 2011, 11:38:49 AM11/26/11
to fhem-...@googlegroups.com
Super,

das hatte ich mir schon lange gewünscht.

Wem bei der commandref.html die Überschrift "fhem.pl reference" zu weit links steht der kann in der Datei commandref.html,
die Zeile 
<div id="menu">
mit
<div id="left">
ersetzen, dann zieht die Zeile

#left  { position:absolute; top:140px; left:60px; width:140px; }
wieder.

@Rudi
vielleicht möchtest du das in den sources einchecken?

MfG

Volker

Rudolf Koenig

unread,
Nov 27, 2011, 2:32:16 AM11/27/11
to fhem-...@googlegroups.com
> @Rudi
> vielleicht m�chtest du das in den sources einchecken?

Ungern:
- #left in style.css wurde mit menu ersetzt
- ich will nicht ueberall 60px Rand links haben
- bei 60px ragt die linke Seite in fhem.html in die Rechte rein.

Volker

unread,
Nov 27, 2011, 4:37:00 AM11/27/11
to fhem-...@googlegroups.com

Vielleicht dann so?

#left  { position:absolute; top:160px; left:30px; width:140px; text-align: center; }

Ich habe in fhem.html kein #left gefunden. Die Zeile mit# left war in der ürsprünglichen .css nicht vorhanden, die habe ich mal für die anderen .htmls bei mir eingefügt.

Die Änderung muss aber auch nicht sein, dann werde ich mir halt die Dateien, nach jedem update, händisch anpassen.

Rudolf Koenig

unread,
Nov 27, 2011, 5:20:43 AM11/27/11
to fhem-...@googlegroups.com
> Ich habe in fhem.html kein #left gefunden.

Sagte ich doch: "#left in style.css wurde mit menu ersetzt"


> Die �nderung muss aber auch nicht sein, dann werde ich mir halt die
> Dateien, nach jedem update, h�ndisch anpassen.

Oder eigene Stylesheets mit stylesheetPrefix verwenden :)

Volker

unread,
Nov 27, 2011, 7:33:10 AM11/27/11
to fhem-...@googlegroups.com

In den commandref.html, howto.html und faq.html wurde #left auch mit #menu ersetzt.

Ich habe ja meine eigenen Stylesheets, aber wenn in der commandref.html, howto.html und faq.html die div id ="menu" ist, dann siehts halt so aus:


Aber von mir aus können wir jetzt diese Diskussion abbrechen, ich weis ja was ich machen muss damit es mir gefällt. :)

UliM

unread,
Nov 27, 2011, 7:43:51 AM11/27/11
to FHEM users
Huhu,
noch mal kurz vom Inhalt zum meta..

> - FHEMWEB hat jetzt einen zusaetzlichen Eintrag
> "Select style", fuer Tippfaule.

Ich hab nirgends was gefunden. So genau kann man das denn wohl finden?

> - fuer updatefhem bereitgestellt
Bei meinem heutige updatelauf kam kein neues .css mit. oder waren
damit "nur" die Erweiterungen in den *.html für stylesheetprefix
gemeint?


Generell: Habe den Inhalt meiner style.css überschrieben. Wie schaffe
ich es, dass das neue Farbschema zur Anwendung kommt?
Rereadcfg -> Nix.
shutdwon&restart -> Fehlanzeige
Bisher hilfr nur ein restart der ganzen FB7390 - da muss es doch was
einfacheres geben??

Dankbar für alle Hinweise,
Uli

Rudolf Koenig

unread,
Nov 27, 2011, 8:26:00 AM11/27/11
to fhem-...@googlegroups.com
> Generell: Habe den Inhalt meiner style.css �berschrieben. Wie schaffe

> ich es, dass das neue Farbschema zur Anwendung kommt?

Browser -> reload. Alles andere ist Zeitverschwendung.

molestior

unread,
Nov 28, 2011, 8:38:54 AM11/28/11
to FHEM users
@Till: sehr gelungenes Theme. Gefällt mir!
Reply all
Reply to author
Forward
0 new messages