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

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 20012
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #60 am: 05 Januar 2019, 11:30:06 »
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.

Offline dmq

  • Full Member
  • ***
  • Beiträge: 157
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #61 am: 05 Januar 2019, 11:36:19 »
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  ;))

Offline Peedy

  • New Member
  • *
  • Beiträge: 20
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #62 am: 07 Januar 2019, 18:06:54 »
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?

Offline Peedy

  • New Member
  • *
  • Beiträge: 20
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #63 am: 10 Januar 2019, 11:28:45 »
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?

« Letzte Änderung: 10 Januar 2019, 17:20:33 von Peedy »

Offline choetzu

  • Sr. Member
  • ****
  • Beiträge: 939
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #64 am: 12 Januar 2019, 23:38:59 »
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
Interesse an Schweizer Usertreffen? https://forum.fhem.de/index.php/topic,88308.0.html

Raspi3, EnOcean, Zwave, Homematic

Offline sash.sc

  • Hero Member
  • *****
  • Beiträge: 1445
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #65 am: 02 Februar 2019, 21:43:02 »
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 2 ; LaCrosse; HomeMatic; 1x TX 29 als Lichtsensor umgebaut;
ESP8622 ;nanoCUL a-fw (433 & 868 MHz); miniCULwlan;
WLANduino 433&868 ; WlanCul

Offline Peedy

  • New Member
  • *
  • Beiträge: 20
Antw:WIP: CSS Theme auf Basis vom neuen f18 Style
« Antwort #66 am: 03 Februar 2019, 14:44:26 »
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;;\
}\

« Letzte Änderung: 03 Februar 2019, 14:50:53 von Peedy »

 

decade-submarginal