zusätzliches Stylesheet

Begonnen von frankbeckers, 01 April 2014, 22:00:40

Vorheriges Thema - Nächstes Thema

frankbeckers

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:


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

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:

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

$(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.
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

betateilchen

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?

-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

frankbeckers

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

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.
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

moonsorrox

ich nutze ja den Darkstyle und habe die Anpassung in der darkstyle.css gemacht..!
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

rudolfkoenig

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
@import url("style.css"); und darunter die eigenen Aenderungen reinzuschreiben. In FHEMWEB waehlt man dann im "Edit style" Abschnitt die Zeile XXX aus.

moonsorrox

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..?

Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

rudolfkoenig

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

Super vielen Dank, dass habe ich jetzt so gemacht...
Nun braucht die darkstyle.css nach Änderung nicht mehr von mir geändert werden
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

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.
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

fiedel

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

moonsorrox

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
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

rudolfkoenig

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

Uneingeschränkte Zustimmung, oder neudeutsch "Full Ack" !  ;)
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

frankbeckers

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:

@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

<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?
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

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.

svenson08

Hallo Rudi

mit dem folgenden JavaScript kann eine CSS Datei "nachträglich" geladen werden. Das habe ich vorgesehen um die CSS Dateien vom Dashboard zu nutzen ohne das @import in die anderen CSS Dateien einzufügen. Das hatte ich dir gegenüber kurz in Karlsruhe erwähnt. Evtl. hilft das dir hier weiter.

function LoadCSSFile(cssLocation){
if(document.createStyleSheet) { document.createStyleSheet(cssLocation); }
else {
var objStyle = document.createElement("style");
var objText = document.createTextNode("\@import url("+cssLocation+") screen;");
objStyle.appendChild(objText);
document.getElementsByTagName("body")[0].appendChild(objStyle);
}
}


Gruß Svenson

rudolfkoenig

@Svenson: ich sehe im Moment nicht, wie das helfen soll (kann aber auch sein, dass ich heute einfach nur langsam bin :) )

Eine Datei an sich koennen wir auch heute laden (siehe @import), das Problem ist, dass FHEMWEB eine automatische Ersetzung "style.css" -> dein-aktuell-gesetztes-style.css macht. Wenn also frankbeckers in seinem mystyle.css ein @import("style.css") reinschreibt, dann kriegt er statt style.css wieder mystyle.css von FHEMWEB ausgeliefert.

betateilchen

Zitat von: rudolfkoenig am 03 April 2014, 14:05:44Wenn also frankbeckers in seinem mystyle.css ein @import("style.css") reinschreibt, dann kriegt er statt style.css wieder mystyle.css von FHEMWEB ausgeliefert.

Dann sollte FHEMWEB einfach prüfen, ob das Ergebnis der Ersetzung identisch mit dem aktuell ersetzten style.css ist und falls ja, keine Ersetzung vornehmen.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

rudolfkoenig

FHEMWEB kriegt "GET ... style.css".
Auszuliefern ist: beim ersten Aufruf mystyle.css, beim zweiten style.css

Wie genau ist jetzt dein Algorithmus?

moonsorrox

Zitat von: rudolfkoenig am 02 April 2014, 18:59:43
SVG-Faerberei benoetigt noch XXXsvg_defs.svg und XXXsvg_style.css

puuh jetzt wird es für mich kompliziert...
ich weiß jetzt überhaupt nicht mehr was ich für xxxxx.css nutzen soll. mich stört ja nicht so das gelbe an den Plots sondern eher die schwarze Schrift auf dem schwarzen Untergrund.
Ich habe versucht die obigen XXXsvg nachzuladen aber das funktioniert nicht.
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

betateilchen

So tief habe ich mich mit dem Mechanismus in FHEMWEB noch nicht befaßt, ich hatte nur vorhin Deine "Problem-"Beschreibung gelesen.

Was müsste FHEMWEB denn beim [3..n]. Aufruf bekommen?
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

betateilchen

Zitat von: moonsorrox am 03 April 2014, 14:48:03mich stört ja nicht so das gelbe an den Plots sondern eher die schwarze Schrift auf dem schwarzen Untergrund.

ja, früher war die Schrift auf grauem Hintergrund, das fand ich auch besser lesbar.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

moonsorrox

kann ich das nicht so machen das ich die darkstyle.css lade und da ich das Dashboard nutze die @import url("dashboard_darkstyle.css"); und meine Änderungen mit  @import url("mydarkstyle.css"); nachladen..?
Oder lädt er nur eine xxxx.css nach..? Klar muss ich dann immer bei Update der darkstyle das oben wieder einfügen, also meine Änderung..

Ich habe nun erst einmal wieder die darkstyle.css in Betrieb und habe hier meine Änderungen eingefügt, anders wird das nix hier bei mir.
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

frankbeckers

Vielleicht vergesse ich bei meinem Vorschlag einige "Ecken", aber ich versuche es trotzdem einmal:


  • Der Browser fordert eine Seite vom Webserver an
  • Der Webserver liefert die Seite zurück
  • Der Browser fordert weitere "includete" Dateien vom Webserver an
  • Der Webserver liefert die Dateien zurück

Im Falle von FHEMWEB passiert aus meiner Sicht aber folgendes:


  • Der Browser fordert eine Seite von FHEMWEB
  • FHEMWEB liefert eine HTML Seite zurück in welcher "hardcoded" immer das Ergebnis FW_pO "<link href=\"$FW_ME/pgm2/style.css\" rel=\"stylesheet\"/>"; (Auszug aus 01_FEHMWEB.pm Zeile 608) enthalten ist
  • Der Browser fordert die entsprechende css Datei (hier also IMMEER style.css) von FHEMWEB an
  • FHEMWEB liefert bei eingeschaltetem stylesheetPrefix jetzt den INHALT von [prefix]style.css zurück

Der Browser denkt er hat style.css bekommen... hat er aber nicht. Der @import(style.css) wird vom Browser aufgelöst, da die style.css aber schon geholt wurde, wird keine neuen GET Anforderung gestellt.


In 01_FEMWEB.pm ab Zeile 398:

sub
FW_serveSpecial($$$$)
{
  my ($file,$ext,$dir,$cacheable)= @_;
  $file =~ s,\.\./,,g; # little bit of security

  $file = "$FW_sp$file" if($ext eq "css" && -f "$dir/$FW_sp$file.$ext");
  $FW_RETTYPE = ext2MIMEType($ext);
  return FW_returnFileAsStream("$dir/$file.$ext", "",
                                        $FW_RETTYPE, 0, $cacheable);
}


wird der entsprechende Fake ausgeliefert. (Wenn ich das bis dahin verstanden habe ;-)



Warum nicht 01_FEHMWEB.pm auf Zeile 608

FW_pO "<link href=\"$FW_ME/pgm2/style.css\" rel=\"stylesheet\"/>";

ersten durch

FW_pO "<link href=\"$FW_ME/pgm2/\"$FW_sp\"style.css\" rel=\"stylesheet\"/>";

und danach nur noch die Inhalte der angeforderten CSS Dateien ausliefern?



Ich hoffe ich habe keine Denkfehler gemacht und schicke Euch nicht in die falsche Richtung.
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

Weil dann commandref.html und die anderen statischen Dateien nicht mit dem gewaehlten style versorgt werden.

frankbeckers

Zitat von: rudolfkoenig am 03 April 2014, 19:00:07
Weil dann commandref.html und die anderen statischen Dateien nicht mit dem gewaehlten style versorgt werden.

Aber statische Seiten können doch statisch versorgt werden. Oder verstehe ich das jetzt falsch. Kommt bei denen der Stylesheet auch aus der o.g. Zeile? Wenn ja, dann vielleicht dort nur für nicht statische ersetzen?
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

ZitatWenn ja, dann vielleicht dort nur für nicht statische ersetzen?
FHEMWEB weiss nicht, wer eine Seite abgerufen hat.

frankbeckers

Zitat von: rudolfkoenig am 03 April 2014, 19:23:13
FHEMWEB weiss nicht, wer eine Seite abgerufen hat.

...aber vielleicht an der Uri?

192.168.178.44:8083/fhem/docs/commandref.html ist doch an dem /docs nach der Basis zu erkennen, oder?
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

Wir haben nicht mit commandref.html das Problem, sondern mit style.css, und das ist identisch in allen Faellen.

Man muesste den ersetzten/kuenstlichen style.css anders benennen als den "echten" style.css (z.Bsp. fhem.css fuer kuenstlich von FHEMWEB generiert, style.css bleibt im filesystem so wie es ist). Man darf danach ein paar Kombinationen testen: FHEMWEB generiert fuer desktop/smallscreen/touchpad, commandref direkt aus dem Filesystem, commandref ueber FHEMWEB. Fuer commandref aus FileSystem muss man tricksen mit einem fhem.css im Fileystem, was style.css per import reinholt. Dieser taucht aber im FHEMWEB Style-Selektor nie auf, da es nicht auf style.css endet.

frankbeckers

#29
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

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:

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

$(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.

Grüße
Frankie

P.S. Ich werde das erste Posting um diesen Text erweitern.
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

ZitatGestossen bin ich dabei auf die undokumentierte Möglichkeit..
Die Schnittstelle ist noch nicht ganz gereift, Dokumentation kommt noch.

Statt komplette .css ins Skript zu schreiben koennte man auch mit
Zitat$('head').append("<link rel='stylesheet' type='text/css' href='".../mystylesheet.css"'/>");
das eigene css nachladen, das koennte einfacher sein. "..." muss im www Verzeichnis sein.

Andererseits kann man mit jquery die Seite nach belieben umbauen, und man hat damit mehr Moeglichkeiten, als mit css alleine.

roedert

#31
Zitat von: rudolfkoenig am 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.

Ich wollte auch einige Anpassungen bzgl. Farbe vornehmen. Also habe ich mal deinen Vorschlag ausprobiert ... funktioniert auch bestens mit darkstyle etc.
Aber was muss ich importieren wenn ich den Default-Style anpassen will?

Analog zu darksytle.css habe ich leider keine defaultstyle.css gefunden?
nur die style.css importiert funktioniert leide rnicht ... da habe ich so gut wie gar keine Formatierung mehr.

rudolfkoenig

defaultCommon.css.
Siehe auch style.css.

australien

ZitatDu 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.

ich habe das auch gemacht, wollte die Breite der "Räume" unter dem Logo ändern, leider kein Erfolg.

meine myStylestyle.css
@import url("darkstyle.css");

#logo    { position:absolute; top:10px; left:20px; width:200px; height:150px; }
#menu    { position:absolute; top:170px;left:20px; width:200px; }
#content { position:absolute; top:50px; left:230px; bottom:20px; right:10px; }


es bleibt leider alles beim alten
raspberry pi3
signalduino, Shelly1, Shelly2, Sonos, Unifi
Amazon Fire Tablet 7 | Noname Android Tablet 10"