WIP: CSS Theme auf Basis vom neuen f18 Style

Begonnen von Thyraz, 21 Februar 2018, 23:54:43

Vorheriges Thema - Nächstes Thema

HeikoE


ArduPino

#46
Hallo.

Da hier ja CSS Experten am Werk sind, klinke ich mich mal ein, auch wenn es mir hier nicht um das vorgestellte CSS geht.
Das hier gezeigte gefällt mir schon, doch stört es mich, das alles auf volle Bildschirmbreite gezogen wird.
"ON" und "OFF" stehen sehr weit auseinander, andere Dinge wie das letzte Kommando von einem DOIF sind dann mittig.
Alles sehr verschoben.

Grundsätzlich finde ich das darkstyle ok. Deshalb habe ich gerade versucht, dieses zuerst mal nach zu bauen, also Font usw.
Ich erkenne zwar grob was im CSS passiert, nur weiß ich nicht was welche Bedeutungen hat, deshalb habe ich mir Elemente aus der darkstyle.css raus kopiert und in die f18 eingefügt.

Leider bekomme ich es nicht hin, das ich einen runden Rahmen habe, wie im original Style. Auch sind die Gruppennamen in einem Schwarzen Balken versehen, im darkstyle haben diese keine Hintergrundfarbe.

Kann mir hier jemand helfen ?

Das hier habe ich zur Zeit eingefügt:
body     { font-family:Arial, Helvetica, sans-serif; font-size:13px;}


a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }


table.room { background: #111111; width: 140px; border-radius:8px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
table.room a { color: #CCCCCC; text-decoration: none; }
table.room a:hover { color: #ffffff; }       
table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}


Danach kann ich dann z.B. ein Hintergrundbild einfach über die FHEM Oberfläche anpassen oder andere Kleinigkeiten, eben direkt aus FHEM heraus...irgend wie muss man ja anfangen  ;)

EDIT:
Gibt es eine Möglichkeit, das eine feste Bildschirmhöhe festgelegt wird bei "normalen" Räumen (das Log müsste natürlich weiterhin komplett angezeigt werden) und die Gruppen dann seitlich angeordnet werden ?
Ich habe einen Raum der alle Wohnungsräume hat. Setze ich nun ein Hintergrundbild sieht das natürlich nicht schön aus, da das Bild ja irgend wo endet, die Liste aber weiter geht.
Wenn das zu aufwändig ist, werde ich mir die Wohnräume anders aufteilen, eben in zwei Räume (FHEM Räume)...aber fragen kann man ja mal  ;D

Simon74

Danke für die CSS Vorlagen, sieht schon mal ganz vernünftig aus:

Was mir noch auffällt:

1. Text Color im Eingabefeld
2. Text Color in webcmd "control:uzsuToggle,off,on"

Wie finde ich die richtigen CSS Attribute dazu ?  :)
https://i.imgur.com/vO9anQs.png

rudolfkoenig

ZitatWie finde ich die richtigen CSS Attribute dazu ?
Mit Rechte-Maustaste im Browser, Inspect, und dann nach eine eindeutige Klassen/ID Kombination suchen. Das ist aber nicht FHEM spezifisch, sondern CSS Grundkurs, und ich bin auch nicht der perfekte Ansprechpartner.
P.S.: Bitte Bilder nicht extern verlinken, sondern hier im Forum direkt hochladen.

Simon74

#49
Danke,

1.
input[type="text"] {
    color: black; /* Eingabefelder*/
}


2. Text Color in webcmd "control:uzsuToggle,off,on"
Finde das passende CSS Attrbibut auch nach längerer Suche nicht  :'(
HTML Code sieht so aus:
<tr class="even"><td><div class="col1"><a href="/fhem?detail=HM_sd_wz_led">LED WZ</a></div></td>
<td informId="HM_sd_wz_led"><div id="HM_sd_wz_led"  title="off" class="col2"><a href="/fhem?cmd.HM_sd_wz_led=set HM_sd_wz_led on&room=Wohnzimmer&amp;room=Wohnzimmer&fwcsrf=csrf_121181142182844"><svg class=" light_led_stripe9" data-txt="off" version="1.0" xmlns="http://www.w3.org/2000/svg"  width="361.000000pt" height="361.000000pt" viewBox="0 0 361.000000 361.000000"  preserveAspectRatio="xMidYMid meet">  <g transform="translate(0.000000,361.000000) scale(0.100000,-0.100000)"  stroke="none">
SNIP..
SNAP..
"/> </g> </svg></a></div></td>
<td><div class='col3'><div class='fhemWidget' cmd='control' reading='control' dev='HM_sd_wz_led' arg='uzsuToggle,off,on' current='off'></div></div></td>
</tr>


EDIT: Für mich sieht es so aus das dies vom f18 "cols.fg" übersteurt wird.

Simon74

Ich bin weitergekommen, und sieht für mich im Desktop Modus zufriedenstellend aus.  :)


Ich würde nun gerne erreichen das in der "mobilen Ansicht" im portrait Modus alle Commands angezeigt werden, wenn zu breit sollte in die nächste Zeile gewechselt werden.

Wurde für diese Anforderung schon etwas vorbereitet im F18 Style ?

rudolfkoenig

ZitatWurde für diese Anforderung schon etwas vorbereitet im F18 Style ?
Nicht bewusst.
Die Spalte wird. z.Zt im@media screen and (max-width: 480px) and (orientation: portrait) {
  #content > table { width: 100%; table-layout: fixed; }
  #content > table, table.block.wide { width: 100%; }
  table.block tr td:nth-child(2) { width: 0; }
  table.block tr td:nth-child(n+3) { width: 0px; display: none; }
...
CSS Abschnitt ausgeblendet.

rudolfkoenig

ZitatIch bin weitergekommen, und sieht für mich im Desktop Modus zufriedenstellend aus.
Bitte in solchen Faellen auch die dazugehoerigen CSS oder Attributwerte hier anhaengen, damit die, die das genauso haben wollen, es einfacher haben.

Simon74

#53
Vielen Dank,

es reicht ein entfernen/auskommentieren der letzten Zeile im folgende Codeauschnitt [f18style.css]
@media screen and (max-width: 480px) and (orientation: portrait) {
  #content > table { width: 100%; table-layout: fixed; }
  #content > table, table.block.wide { width: 100%; }
  table.block tr td:nth-child(2) { width: 0; }
  /* table.block tr td:nth-child(n+3) { width: 0px; display: none; } */


Commands werden nun einfach in neuer Zeile dargstellt.
Es gelingt mir jedoch nicht diese Einstellung in meinem optionalen CSS einzufügen, dort greift Sie nicht (möchte eigentlich keine Änderung in Originaldatei machen.)

Ev. wäre es möglich diese Einstellung in den f18 Einstellungen zu machen ?
Porträt Mode: "Anzahl Spalten" oder unbegrenzt" ?



knopf_piano

Zitat von: rudolfkoenig am 26 Dezember 2018, 11:34:16
Bitte in solchen Faellen auch die dazugehoerigen CSS oder Attributwerte hier anhaengen, damit die, die das genauso haben wollen, es einfacher haben.
@simon74,
kannst du dein css bitte komplett hier einstellen/anhängen?

Gesendet von meinem SM-J510FN mit Tapatalk
zotac nano mit proxmox und ganz viel zeug drauf

Simon74

#55
Es ist derselbse Code wie in Posts davor zu finden..
Farbliche Anpassungen halt..
Für mich ist es das erste mal FHEM am Smartphone sinnvoll zu bedienen, ohne das *würgreiz* ausgelöst wird  ;D

Offene Punkte:

  • Dropdowns (Schönheitsproblem unter iphone bzw. Safari) wenn die Codezeilen 52-54 fehlen
  • Hochkant (Portät) Modus: Tabellenspalten/Commands, siehe mein Beitrag davor, ohne sichtbare Commands macht das Ding genau 0 Sinn, (mM.)
  • Bei zoom dasselbe, sollte global im f18 einstellbar sein ?

rudolfkoenig

ZitatEs gelingt mir jedoch nicht diese Einstellung in meinem optionalen CSS einzufügen, dort greift Sie nicht (möchte eigentlich keine Änderung in Originaldatei machen.)
Die Anweisungen aus f18style.css CSS muss man nicht wiederholen.
Wenn man welche ueberschreiben will, dann muss man das betroffene Element "genauer" spezifizieren:@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}


Zitatohne sichtbare Commands macht das Ding genau 0 Sinn, (mM.)
Ich sehe das anders: mit Befehlen wird die schmale Seite unuebersichtlich, und die standard Befehle kann man auf dem Statusbild legen (devStateIcon). Bei on/off passiert das automatisch.

Simon74

Danke, das ist es. :-)

@media screen and (max-width: 480px) and (orientation: portrait) {
div#content table.block tr td:nth-child(n+3) { width:auto; display:block; }
}


Ich verwende zum grössten Teil Dimmer mit voreingestellten Dimmstufen als Dropdown, daher ist mir ein on/off zu wenig um sinnvoll steuern zu können.
Auch andere Geräte lassen sich nun perfekt steuern, Befehle die nicht alle nebeneinander passen, wandern in eine neue Zeile.

Ich habe noch Logfile, Set, Get, Modify angepasst, und somit einen neuen Dark CSS Style für WEB und WEBPhone.
Vielleicht findet jemand noch weitere Verbesserungen.

Meine Einstellungen:
Background 101010
Foreground cccccc
Link d3d3d3
Even row                161616
Odd row                 202020
Header row              333333
Menu                    111111
Menu:Selected           333333
Input bg                ffffff

hide pin


CSS im Anhang.

dmq

#58
Hi,

ich benutze die CSS und Farbanpassung von devil77. Vielen Dank - sowohl an Rudolf für f18, als auch für deine Anpassungen!

Ich habe allerdings ein "Problem" mit den Spalten. Die Länge eines Strings in der ersten Spalte beeinflusst auch die anderen Spalten (bin mir da aber auch nicht wirklich sicher) - damit sieht vieles leider sehr unordentlich aus. Was ich gerne hätte wäre, dass die Spalten angezeigt werden und es ein Padding gibt, so dass alles bündig ist.

Anbei mal ein Screenshot, vielleicht kann mir ja jemand helfen?

Danke vielmals :)

dmq

Ok ich denke, dass ich da wohl oder übel mich mehr mit dem css beschäftigen muss.

Ich spiele derzeit mit den padding und border Elementen rum - allerdings ziemlich ineffizient.