Layout Web Interface

[Juppix]

Hallo Leute,

ich bin gerade dabei auf Fhem umzusteigen. Dabei möchte ich das Web Interface möglichst einheitlich aussehen lassen. Es soll schlicht und übersichtlich sein. Ich habe mir dir Optik schon ein wenig angepasst, aber stosse bei der Anordnung der Symbole an meine Grenzen. Ich finde keine Lösung wie man die Elemente anders anordnet.
Ein Bild sagt mehr als tausend Worte.  Damit ihr wisst was ich erreichen möchte...


(http://www.fotos-hochladen.net/uploads/originalhr37t2ejpo.jpg)
so sieht es im Original aus

(http://www.fotos-hochladen.net/uploads/mockupc8u0klz4ag.jpg)
und so ungefähr hätte ich es gerne...


Hat jemand eine Idee wie man das Webinterface anpasst?

Grüße,
Juppix

[justme1968]

das geht mit dem 'normalen' web interface nicht direkt. die reihenfolge name/icon/webCmd ist hier fest.

wenn du die stylesheets anpasst kannst du es vermutlich so aussehen lassen wie in deinem beispiel.

ich vermute aber mit einer readingsGroup (oder mehreren) ist es einfacher und flexibler umzusetzen.

gruss
  andre

[gelbfuessler]

Du hast ja bereits das Layout angepasst, daher gehe ich davon aus, dass Du etwas CSS kannst.

Wie justme1968 bereits geschrieben hat, ist die Reihenfolge der Elemente zwar fix, aber über CSS kann man diese trotzdem verschieben. Am Einfachsten wird es sein, wenn Du Dir mit dem Mozilla Firebug im Firefox den Pfad zu den Bildern raussuchst und eine entsprechende Regel erstellst.

So etwas in der Art:
#content table {position: relative;}
#content table a img {position: absolute; right:0;}
#content table tr td:last {padding-right: 50px;}

Wahrscheinlich bekommst Du mit dem Firebug noch spezifischere Pfade mit mehr IDs und Klassen, sodass es nicht das komplette Layout verändern wird.

[Puschel74]

Hallo,

kleiner Hinweis am Rande:
Wenn du die css-Datei änderst gehen diese Änderungen bei einem update (wenn diese Datei auch upgedatet wird) wieder verloren da die Datei durch die neue überschrieben wird.
Daher entweder ein Backup der Datei vorhalten oder merken was geändert werden musste.
Muss ich bei der darkstyle.css auch jedesmal im Auge behalten da ich den Anzeigebereich anpassen muss.

Grüße

[justme1968]

um das zu verhindern ist es am besten sich ein neues style file anzulegen, dort das original das man ändern möchte zu includen und dann das zu überschreiben das man ändern möchte.

in fhem konfiguriert man dann sein eigenes file als style.

gruss
  andre

[Puschel74]

Hallo,

das stimmt.
Wobei dann aber auch keine "gewollten" Anpassungen durch ein update eingespielt werden.

Da es sich bei mir aber nur um eine! Zahl handelt die ich nach einer Update-Änderung anpassen muss kann ich mit meiner Variante gut leben 
Zumal die darkstyle.css nicht so häufig geändert wird durch das update.

Grüße

[Juppix]

Vielen Dank für die Anregungen.

Der Ansatz mit der readingsGroup ist sehr interessant. Davon hab ich bisher noch gar nichts gelesen. Bin ja auch noch ein Anfänger.

Meine CSS Kentnisse sind leider begrenzt, aber mal sehen was ich da noch tüffteln kann...

[Franz Tenbrock]

Hallo, falls du eine schöne Bedienoberfläche habne willst, schau dir mal das Dashboard an.
Hatte selbst vorher mit dem Floorplan gespielt bin dann aber mit dem dashboard super glücklich.