Wie kann ich mit diesem CSS meine Widgets verändern? class="semitransparent3d"

[Fixel2012]

Hallo,

ich lese mich nun schon Stunden lang in die Tablet UI Sache ein...

Bevor ich nun weiter an meiner meinem Tablet UI arbeite, hätte ich erstmal gerne ein Hübsches Design!
Ich hatte von einem User seine index.html geladen. Darin war dieses Stück code:

Code Auswählen Erweitern

class="semitransparent3d"

Es scheint wohl die Widgets optisch zu verändern, leider nur auf seinen Screenshots. ich denke mir fehlen entsprechende Dateien...

Nun die Frage, ist es irgendwo beschrieben wie ich die Widgets durch hinzufügen von (wahrschein css) Dateien Design-technisch aufpeppen kann?

Habe dazu leider nichts gefunden. Zum selbst erstellen fehlt mir das können und die Lust 

Hat jemand Tipps und Ideen wie ich am einfachsten ein hübsches Design her zaubern kann??

Grüße Fixel

[tomster]

Servus Fixel,

an Hand Deiner Angaben vermute ich, dass wohl lediglich der von Dir besagte User (paul79?) hierzu etwas sagen kann. Nur der wird wissen was sich hinter der CSS-Klasse verbirgt...

Prinzipiell sei gesagt, dass FTUI standardmäßig das Stylesheet aus css/fhem-tablet-ui.css verwendet. Wenn Du aber in dieser Datei Änderungen vornimmst, dann werden die beim nächsten Update von FTUI wieder überschrieben. Darum rate ich Dir: lege eine eigene Datei an (z.B. /css/ftui-user.css) und füge in der index.html die entsprechende Zeile hinzu:

Code Auswählen Erweitern


<link rel="stylesheet" href="css/ftui-user.css" />

Damit bleiben Deine Änderungen auch bei einem Update erhalten. Allerdings wirst Du bei Wunschänderungen nicht umhin kommen, Dir zumindest rudimentäre Kenntnisse in CSS anzueignen...

[redlav]

Hallo,

im Post https://forum.fhem.de/index.php/topic,37378.msg549640.html#msg549640 gibt es ein zip-File Paul79_v3.zip
in dem die css-Datei fhem-tablet-ui-page-user.css liegt.
Wenn du die in deine Index.html einbindest sollte die Formatierung erfolgen.

Gruß Norbert

[Fixel2012]

Hey, Danke für eure Antworten!


Hatte leider vergessen wie der User heißt, von dem die index.html stammte.

Ich dachte vielleicht da gibt es schon einige frei verfügbare CSS Dateien zum verwenden. Ein selbst erstellen kommt wie oben schon gesagt eigentlich nicht in Frage, dazu habe ich einfach zu wenig Lust und Können um mich mit der Sache tiefer zu beschäftigen.

Danke @redlav für das verlinken der .zip Datei!

Werde mal schauen was bei rum kommt!

Grüße Felix

[moonsorrox]

du mßt dir eine eigen css. Datei erstellen und dann mußt du dir dieses für deinen style nehmen

Code Auswählen Erweitern

.semitransparent3d {
    background: rgba(0, 0, 0, 0.5) !important;
border-radius: 7px !important;
box-shadow: 0 5px 10px rgba(0,0,0,0.5), inset 0 0px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.4) !important;
}