FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: dt2510 am 18 April 2018, 09:31:36

Titel: [gelöst] Hintergrundfarbe <header> ändern ?
Beitrag von: dt2510 am 18 April 2018, 09:31:36
Ich weiß langsam nicht mehr weiter ...
Ich versuche den Hintergrund eines Headers von #262626 in IRGENDETWAS anderes zu ändern, aber es funktioniert nicht. Sehe ich mir den Header mit den Chrome Entwickler-Tools an, zeigt er mir folgende Stelle in der fhem-tablet-ui.css an, die wohl für die Darstellung des Headers verantwortlich ist:

.gridster li header,
.dialog > header,
.card > header {
    background: #262626;
    color: #8c8c8c;
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 2em;
    text-align: center;
    width: 100%;
}


Aber egal welche Farbe ich bei Background angebe, es verändert sich absolut gar nichts ... auch die Angabe von style="background-color:..." direkt im Header Tag hat keine Auswirkung. Was übersehe ich ?
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: sek_is_back am 18 April 2018, 11:46:54
ich hab ein meiner user.css folgendes stehen

.gridster li header, .card > header {
    background: #3a4f5c;
    color: #cecece;
}


damit wird bei mir
.gridster li header, .dialog > header, .card > header
überschrieben
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: dt2510 am 18 April 2018, 11:54:54
Ich hatte den Wert "background" testhalber direkt in der fhem-tablet-ui.css (die einzige .css Datei, die bei mir geladen wird) geändert ?! Ich teste aber trotzdem mal mit der user.css ...
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: dt2510 am 18 April 2018, 15:01:13
Macht leider auch keinen Unterschied ... der Hintergrund hat immer noch die gleiche Farbe, egal was ich dort angebe ... hier mal der Quellcode

user.css
.gridster li header,
.card > header {
    background: #AABBCC;
}


index.html
<!DOCTYPE html>
  <html>
    <head>
      <title>TabletUI</title>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
      <link rel="stylesheet" href="user.css" />
      usw...


Verwendung im html-Code
<header><div class="large thin bg-gray" style="font-family: Arial;color:Linen">Erdgeschoss - Esszimmer</div></header>

Der Header sollte jetzt Richtung Türkis gehen (war nur 'ne Beispielfarbe), bleibt aber unverändert (s. Screenshot)
Ach ja, die user.css liegt im gleichen Verzeichnis wie die index.html
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: sek_is_back am 18 April 2018, 15:39:22
wird die css durch noch eine überschrieben? kannst Du mal den CSS Teil aus dem Chrome Entwickler-Tools als screencopy posten?
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: dt2510 am 18 April 2018, 15:48:49
Ich hab' nur die beiden css Files in der index.html

Hier der Screenshot
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: dt2510 am 18 April 2018, 15:50:25
hier nochmal mit dem Ergebnis
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: sek_is_back am 18 April 2018, 15:53:37
ich glaube du überschreibst mit der Div class="large thin bg-grey" deinen Background
Titel: Antw:Hintergrundfarbe <header> ändern ?
Beitrag von: dt2510 am 18 April 2018, 15:59:33
den bg-grey hatte ich völlig überlesen ... jetzt funktioniert es auch - danke !! :)