zusätzliches Stylesheet

frankbeckers · 01 April 2014, 22:00:40

Hallo,

manchmal sieht man den Wald vor lauter Bäumen nicht mehr... oder man denkt viel zu kompliziert...

Zur Zeit benutze ich das Default Frontend und bin damit auch soweit zufrieden, möchte aber zwei kleine Dinge anpassen:

Das linke Menü soll breiter werden, da mit RoomIcons und langen sprechenden Namen leider die Bezeichnung in einen Zeilenumbruch wandern.
Das Command Eingabefeld oben rechts soll breiter werden, da manche Befehle doch recht lang werden.

Dazu sind nur wenige Anpassungen in den entsprechende CSS Dateien notwendig. Dazu möchte ich aber kein eigenes Set an Stylesheets erzeugen und mit stylesheetPrefix einbinden, um damit auch vom allgemeinen Update Prozess der Stylesheet Dateien entkoppelt zu sein.

Also ist meine Idee die wenigen Anpassungen in einem nachgelagerten User Stylesheet zu verändern.

Aber wie klinke ich ein solches User Stylesheet ein? Gibt es hierzu bereits eine sinnvolle Lösung?

Als "unsaubere" Umgehung habe ich in der Fhemweb Desktop Instanz folgendes bei menuEntries definiert:

Code Auswählen


attr WEB menuEntries Backup,/fhem?cmd=backup,CSSMod,/fhem"></a><style type="text/css">#content {left: 230px;;} #hdr {left:230px;;} #menuScrollArea {width:225px;;} input.maininput {width:800px;;} #menu {width:220px;;}</style><a href="/fhem

Damit habe ich die wenigen Änderungen wirksam gemacht... aber leider nicht wirklich sehr elegant.

Bin für kreative Vorschläge dankbar.

Gruß
Frankie

Update vom 6.4.2014

Nachdem nun klar ist, dass eine Erweiterung für eigene Modifikation ontop des Stylesheet style.css schwierig ist, bin ich nochmals auf die Suche nach einer "Umgehung" des Problems gegangen, ohne dabei in das System einzugreifen.

Gestossen bin ich dabei auf die undokumentierte Möglichkeit (zumindestens habe ich nichts dazu gefunden) eigene Javascript auf jeder Seite einzubinden. Dazu habe ich es mit folgender Ergänzung der bestehenden FHEMWEB Instanz

Code Auswählen

define WEB FHEMWEB 8083 global
attr WEB JavaScripts pgm2/jquery.min.js pgm2/modstyle.js
...

geschafft eigene Javascripte einzubinden.

jquery.min.js wird bei der Fhem Installation mit ausgeliefert und bietet u.a. viele vereinfachte JavaScriopt Funktionen
modstyle.js beinhaltet die CSS Modifikation gekapselt in Javascript

Das Resultat sieht folgendermaßen aus:

Code Auswählen

...
<script type="text/javascript" src="/fhem/pgm2/fhemweb_time.js"></script>
<script attr='' type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script attr='' type="text/javascript" src="/fhem/pgm2/modstyle.js"></script>
</head>
<body name="Home, Sweet Home" onload="FW_delayedStart()">
...

modstyle.js hat folgenden Inhalt:

Code Auswählen

$(document).ready(function() {
$("#content").css("left", "230px");
$("#hdr").css("left", "230px");
$("#menuScrollArea").css("width", "225px");
$("#menu").css("width", "220px");
$("input.maininput").css("width", "800px");
});

Hierbei werden nach erfolgreichem Laden der gesamten Seite $(document).ready(function() {...} an wenige Elementen der CSS Struktur Anpassungen $("...ident...").css("...csstype...", "...inhalt..."); vorgenommen.

Diese Variante hat z.Zt. noch keine negativen Seiteneffekte aufgezeigt.

Falls FHEMWEB demnächst eine Anpassung für eigene Stylesheets bekommt, kann diese Erweiterung auch sehrt einfach wieder zurück gebaut werden.

betateilchen · 01 April 2014, 22:13:43

Zitat von: define frankie PRESENCE here am 01 April 2014, 22:00:40und langen .. Namen leider die Bezeichnung in einen Zeilenumbruch wandern.

Du meinst so wie bei Deinem sinnlos langen Benutzernamen?

frankbeckers · 01 April 2014, 22:23:50

Zitat von: betateilchen am 01 April 2014, 22:13:43
Du meinst so wie bei Deinem sinnlos langen Benutzernamen?

Du hast recht, war eine unsinnige Spielerei.

Aber um wieder im Thema zu bleiben. Bei Nutzung dieser RoomIcons

Code Auswählen

attr WEB roomIcons DG.*:control_building_modern_s_dg EG.*:control_building_modern_s_eg OG.*:control_building_modern_s_og KG.*:control_building_modern_s_kg

und z.B. dem Text "EG.Wohnen" wird leider bereits ein Zeilenumbruch gemacht.

moonsorrox · 01 April 2014, 23:44:31

ich nutze ja den Darkstyle und habe die Anpassung in der darkstyle.css gemacht..!

rudolfkoenig · 02 April 2014, 07:48:47

Am enfachsten ist es eine oder mehrere neue Dateien nach dem Muster XXXstyle.css/XXXsmallscreenstyle.css/XXXtouchpadstyle.css in fhem/www/pgm2 anzulegen, hier als zunaechst das Original reinzuladen mit

Code Auswählen

@import url("style.css"); und darunter die eigenen Aenderungen reinzuschreiben. In FHEMWEB waehlt man dann im "Edit style" Abschnitt die Zeile XXX aus.

moonsorrox · 02 April 2014, 12:51:47

dazu habe ich mal eine Frage:
ich erstelle also z.B. eine mydarkstyle.css mit den Änderungen die ich gemacht habe, diese könnte ich dann in der Form nachladen
@import url("mydarkstyle.css");in die darkstyle.css lade ich ja jetzt schon einmal die @import url ("dashboard_darkstyle.css") hier kann ich jetzt auch nochmal die geänderte mydarkstyle.css nachladen oder reichen nur die Änderungen..?

rudolfkoenig · 02 April 2014, 13:14:11

Falsch.
Du erstellst mydarkstyle.css, mit @import url("darkstyle.css") gefolgt von allen privaten Aenderungen, danach wird darkstyle.css in den "Ursprungszustand" versetzt. In FHEMWEB musst du mydark auswaehlen.

moonsorrox · 02 April 2014, 14:32:37

Super vielen Dank, dass habe ich jetzt so gemacht...
Nun braucht die darkstyle.css nach Änderung nicht mehr von mir geändert werden

moonsorrox · 02 April 2014, 15:35:20

ich habe noch eine Frage zu den Plots, die werden jetzt wie im default Style dargestellt d.h. Schrift schwarz Plots in leichten gelb..!
Das müßte ich jetzt zusätzlich in meinem Style ändern, denn das wird nicht in der darkstyle.css eingestellt.
Ich habe probiert eine darkstyle.css ohne Änderungen zu mydarkstyle.css zu machen und auch hier bleiben die Plots gelb mit schwarzer Schrift.

fiedel · 02 April 2014, 17:11:53

Das mit den Styles ist eine irre Tüftelei und Probiererei - wenn man nicht Firebug benutzt.

Such mal im Forum danach. Damit kannst du den ganzen Stylekram einfach erforschen, Änderungen live und gefahrlos testen und dann in der entspr. css ändern.

moonsorrox · 02 April 2014, 18:55:38

ja ich kenne das zur genüge, aber ich habe ja firebug und suche mal danach.
Was ich aber nicht verstehe
- ich nutze den darkstylec.ss dann sind die Plots OK
- nutze ich meinen mystyle.css mit einer unveränderten darkstyle.css sind die Plots default also gelb mit schwarzer Schrift...
- da kann ich in meiner mystyle.css einstellen was ich will, weil ich ja eine abgespeckte darkstyle.css nutze da wird sich nie was ändern.

Also muss das wo anders drin sein und wenn man das nicht weiß sucht man echt vergebens

rudolfkoenig · 02 April 2014, 18:59:43

SVG-Faerberei benoetigt noch XXXsvg_defs.svg und XXXsvg_style.css

Und nix gegen Firebug, aber eine vergleichbare Funktionalitaet haben inzwischen die meisten Browser auch ohne Plugin eingebaut.

fiedel · 02 April 2014, 19:36:53

Uneingeschränkte Zustimmung, oder neudeutsch "Full Ack" !

frankbeckers · 02 April 2014, 20:45:16

Den Vorschlag

Zitat von: rudolfkoenig am 02 April 2014, 13:14:11
Du erstellst mydarkstyle.css, mit @import url("darkstyle.css") gefolgt von allen privaten Aenderungen, danach wird darkstyle.css in den "Ursprungszustand" versetzt. In FHEMWEB musst du mydark auswaehlen.

konnte ich erfolgreich testen.

Nutze ich aber das default style.css, funktioniert es nicht. Ich habe dazu die Datei /www/pgm2/mystyle.css mit folgendem Inhalt erzeugt:

Code Auswählen

@import "style.css";

#content { left: 230px; }
#hdr { left: 230px; }
#menuScrollArea { width:225px; }
#menu { width:220px; }

input.maininput { width:800px; }

Nach dem Aktivieren über "Select Style" auf "my" gehen alle Formatierung (bis auf die wenigen modifizierten) verloren. Das Ergebnis ist fatal. Der @import "style.css"; scheint nicht aufgelöst zu werden. Wenn ich dagegen @import "darkstyle.css"; einsetze, funktioniert es mit dem Dark Style... also ist die neue css Datei anscheinend erst einmal in Ordnung.

Meine Vermutung: Trotz eingestelltem Attr stylesheetPrefix wird im HTML Code weiterhin

Code Auswählen

<link href="/fhem/pgm2/style.css" rel="stylesheet"/>

eingesetzt. Die anderen Daten werden durch FHEMWEB unter der Decke "eingebaut". D.h. für den Browser (hier Safari 7.0.2 unter OSX) wird trotzdem die Datei style.css geladen. Also würde ein @import "style.css"; zwangsläufig zu einer Endlosschleife führen.

Liege ich da richtig? Und wenn ja, was kann man noch tun?

rudolfkoenig · 02 April 2014, 22:59:54

Vermutlich ja, und es waere ein TODO fuer mich, das gesetzte style nicht unter dem Namen "style.css" auszuliefern.
Allerdings weiss ich dann nicht, wie ich commandref & co mit der richtigen .css Datei versehen soll.
Vielleicht faellt jemanden eine Loesung ein.