WIP: CSS Theme auf Basis vom neuen f18 Style

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

Vorheriges Thema - Nächstes Thema

rudolfkoenig

Diese Unschoenheit kommt daher, dass alle Bloecke einzelne Tabellen sind, die keine Vorgabe fuer die Spaltenbreite haben. Der Browser berechnet fuer jede Tabelle einzeln die optimale Spaltenbreiten, die aber nicht mit den Werten fuer die anderen Tabellen uebereinstimmt.
Wenn jemand weiss, wie man das richtig macht, dann bin ich daran interessiert.
Loesungen, wie Spaltenbreite fest auf X% setzen, gelten nicht als richtig.
Auch ein Umbau auf div kommt nicht in Frage, weil das zu viele Konsequenzen/Umbauarbeiten nach sich zieht.

dmq

Ja, richtig. Auf dem Weg mit der festen Spaltenbreite war ich zwar auch schon, aber das macht definitiv keinen Sinn (Mobilgeräte etc.). Wenn ich alle Geräte in eine Gruppe packe, gelten zumindest die gleichen Regeln. Bei einzelnen Gruppen auf einer Seite sieht es dann aus wie Kraut und Rüben - vor allem sind mir selbst nach Darstellung der "borders" die Regelungen dafür nicht klar.

Ich hoffe hier gibt es fähigere Leute in diesem Bereich als ich (das aber ganz bestimmt  ;))

Peedy

Hallo,
ich habe das Menue eingeklappt.
Als zusaetzliches css habe ich jenes von devil77 verwendet.

Nun versuche ich zum Menue noch einen schwarzen Rahmen zu definieren, damit es nicht mit den unteren Elementen grau in grau verschmilzt.

Unter div#menu habe ich es schon mit
    border-color: black;
    border-width: 2px;

versucht ... leider ohne sichtbare Auswirkung.

Hat jemand einen Tip?

Peedy

#63
Hat jemand eine passende CSP (Content Security Policy) fuer den Style?

Hab einiges schon probiert, bekomme jedoch immer:
f18.js line 14:
EvalError: call to eval() blocked by CSP

fhem ueber Apache reverse-proxy ...

@devil77 ... auch fuer fonts.googleapis.com?


choetzu

hallo,

Ich möchte gerne beim f18 den Inhalt rechts vom Menu genau so darstellen wie beim darkstyle. Nämlich nicht über die ganze Breite, sondern nur soviel, wie gebraucht wird... Das klappt mit folgendem CSS Eintrag eigentlich ganz gut..

div#content > table {
    border-collapse: collapse;
    width: fit-content;
}


nur auf dem iPhone sieht es im Hochformat dann ziemlich beschissen aus. Wie könnte man das lösen? Ich komm mit meinen Laienkenntnisse ans Ende meines Lateins...

danke. LG c
Raspi3, EnOcean, Zwave, Homematic

sash.sc

Besteht eigentlich die Möglichkeit dass alles transparent zu machen, damit ein Hintergrundbild durchschimmert ??

Man kann ja schon ein Hintergrundbild angeben. Aber die Transparenz fehlt.

Besteht die Möglichkeit auch ein Eingabefeld mit in den Style einzubauen, wo die Schriftart angegeben werden kann, die in FHEm bzw dem Style benutzt wird ??

Gruß und Danke
Sascha
Raspi 4B+ Bullseye ;LaCrosse; HomeMatic; MapleCUL; ZigBee; Signalduino ESP32 ; Shellys; MQTT2; Grafana mit Influxdb

Peedy

#66
Das Menü sah beim StyleAddon von Devil77 bei Mobilebrowsern nicht gerade toll aus.
Es fehlte eigentlich nur ein schmaler Rahmen zur optischen Abgrenzung.

Nun habe ich es rausgfunden.

Der berteffende Teil sieht nun so aus:

div#menu > table, div#content > table {\
    border-collapse: collapse;;\
    width: 100%;;\
    border-color: black;;\
    border-width: 1px;;\
    border-top-style: none;;\
    border-right-style: solid;;\
    border-buttom-style: solid;;\
    border-left-style: solid;;\
}\
\
div#menu > .col_header {\
    fill: #3373a6;;\
    font-size: 14px;;\
    border-color: black;;\
    border-width: 1px;;\
    border-top-style: solid;;\
    border-right-style: solid;;\
    border-buttom-style: none;;\
    border-left-style: solid;;\
}\


Peter aus Calw

Hallo zusammen,
versuche es trotzdem hier eine Antwort auf meine Frage zu erhalten. Ich versuche mit "f18" mein FHEM-Web Bild zu ändern.. Da ich Probleme mit meinen Augen hane ,möchte den Text (Schrift) fett black anzeigen. Wie könnte ich das mit "Select style" ändern (z.B. Eintrag in Addons).
Hier ein Abbild der jetzigen Situation im Anhang.
LG Peter

:-\


rudolfkoenig

Fett:
body { font-weight: bold; }

Fett und groesser:
body { font-weight: bold; font-size:120%; }

Peter aus Calw

Hallo Rudi,
besten Dank für diesen super Tipp, da mein Sehvermögen ziemlich nachgelassen hat ist das eine echte Erleichterung. Kann man das auch in Firefox realisieren ? Hier gibt es url die zum Teil kaum lesbar sind, es gibt zwar die Möglichkeit das global per "Barriereeinstellung" zu ändern, aber das passt auch nicht immer zu allen Seiten.
Auf jeden Fall hat es für mich viel gebracht und kann bestens weitermachen mit 75 und einem Auge.
LG von Peter

Benni

Ich habe auf Basis dieses Threads auch eine dark-Variante im Einsatz.

Bei Interesse finden sich die Details in folgendem Thread: https://forum.fhem.de/index.php/topic,125119.msg1197397.html#msg1197397

gb#