Autor Thema: WIP: CSS Theme auf Basis vom neuen f18 Style  (Gelesen 7723 mal)

Offline HeikoE

  • Jr. Member
  • **
  • Beiträge: 90
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #45 am: 09 November 2018, 18:01:47 »
Danke! hat funktioniert.

Offline ArduPino

  • Full Member
  • ***
  • Beiträge: 290
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #46 am: 02 Dezember 2018, 12:27:49 »
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
« Letzte Änderung: 02 Dezember 2018, 12:36:55 von ArduPino »
FHEM auf Raspberry Pi3 / nanoCUL433 mit a-CulFW
Pollin Funksteckdosen, Außentemperatursensor
Shelly 1
Digispark (Attiny85) Eigenbau Temp/Hum/Alarm Sensoren
DashButtons, günstige Bewegungsmelder

Offline Simon74

  • Full Member
  • ***
  • Beiträge: 344
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #47 am: 17 Dezember 2018, 15:36:41 »
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
INTEL Nuc: KVM,FHEM,Bluetooth,RfxTRX-E | Raspberrys: Bluetooth,Presence,SmsGateway
Homematic: CCU3, LAN Adapter, Türkontakte, Keymatic, Schalter/Dimmer/Taster, Steckdosen, Bewegungsmelder usw.
Sonstiges: Somfy, Logitech Hub, Squeezebox, Alexa

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 19815
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #48 am: 17 Dezember 2018, 15:45:50 »
Zitat
Wie 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.

Offline Simon74

  • Full Member
  • ***
  • Beiträge: 344
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #49 am: 17 Dezember 2018, 21:21:27 »
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.
« Letzte Änderung: 17 Dezember 2018, 22:46:49 von Simon74 »
INTEL Nuc: KVM,FHEM,Bluetooth,RfxTRX-E | Raspberrys: Bluetooth,Presence,SmsGateway
Homematic: CCU3, LAN Adapter, Türkontakte, Keymatic, Schalter/Dimmer/Taster, Steckdosen, Bewegungsmelder usw.
Sonstiges: Somfy, Logitech Hub, Squeezebox, Alexa

Offline Simon74

  • Full Member
  • ***
  • Beiträge: 344
orientation: portrait, spalten nächste Zeile
« Antwort #50 am: 25 Dezember 2018, 11:05:07 »
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 ?
INTEL Nuc: KVM,FHEM,Bluetooth,RfxTRX-E | Raspberrys: Bluetooth,Presence,SmsGateway
Homematic: CCU3, LAN Adapter, Türkontakte, Keymatic, Schalter/Dimmer/Taster, Steckdosen, Bewegungsmelder usw.
Sonstiges: Somfy, Logitech Hub, Squeezebox, Alexa

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 19815
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #51 am: 26 Dezember 2018, 11:32:23 »
Zitat
Wurde 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.

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 19815
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #52 am: 26 Dezember 2018, 11:34:16 »
Zitat
Ich 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.
Zustimmung Zustimmung x 1 Liste anzeigen

Offline Simon74

  • Full Member
  • ***
  • Beiträge: 344
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #53 am: 26 Dezember 2018, 13:33:32 »
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" ?


« Letzte Änderung: 26 Dezember 2018, 13:45:57 von Simon74 »
INTEL Nuc: KVM,FHEM,Bluetooth,RfxTRX-E | Raspberrys: Bluetooth,Presence,SmsGateway
Homematic: CCU3, LAN Adapter, Türkontakte, Keymatic, Schalter/Dimmer/Taster, Steckdosen, Bewegungsmelder usw.
Sonstiges: Somfy, Logitech Hub, Squeezebox, Alexa

Offline knopf_piano

  • Full Member
  • ***
  • Beiträge: 351
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #54 am: 26 Dezember 2018, 14:48:06 »
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, Bananapi-R1, fhem-trunk, hmlan, jeelink, zwave, tablet-ui,  ESPeasy, pywws, raspi, yamaha-671, ufs910-titan

Offline Simon74

  • Full Member
  • ***
  • Beiträge: 344
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #55 am: 27 Dezember 2018, 13:14:24 »
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 ?
« Letzte Änderung: 28 Dezember 2018, 16:01:58 von Simon74 »
INTEL Nuc: KVM,FHEM,Bluetooth,RfxTRX-E | Raspberrys: Bluetooth,Presence,SmsGateway
Homematic: CCU3, LAN Adapter, Türkontakte, Keymatic, Schalter/Dimmer/Taster, Steckdosen, Bewegungsmelder usw.
Sonstiges: Somfy, Logitech Hub, Squeezebox, Alexa

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 19815
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #56 am: 27 Dezember 2018, 19:12:50 »
Zitat
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.)
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; }
}

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

Offline Simon74

  • Full Member
  • ***
  • Beiträge: 344
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #57 am: 29 Dezember 2018, 11:26:45 »
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.
INTEL Nuc: KVM,FHEM,Bluetooth,RfxTRX-E | Raspberrys: Bluetooth,Presence,SmsGateway
Homematic: CCU3, LAN Adapter, Türkontakte, Keymatic, Schalter/Dimmer/Taster, Steckdosen, Bewegungsmelder usw.
Sonstiges: Somfy, Logitech Hub, Squeezebox, Alexa

Offline dmq

  • Full Member
  • ***
  • Beiträge: 125
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #58 am: 04 Januar 2019, 22:50:32 »
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 :)
« Letzte Änderung: 04 Januar 2019, 22:52:10 von dmq »

Offline dmq

  • Full Member
  • ***
  • Beiträge: 125
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #59 am: 05 Januar 2019, 10:32:06 »
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.