[gelöst] Hintergrundfarbe <header> ändern ?

dt2510 · 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:

Code Auswählen

.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 ?

sek_is_back · 18 April 2018, 11:46:54

ich hab ein meiner user.css folgendes stehen

Code Auswählen

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

damit wird bei mir

Code Auswählen

.gridster li header, .dialog > header, .card > header
überschrieben

dt2510 · 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 ...

dt2510 · 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

Code Auswählen

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

index.html

Code Auswählen

<!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

Code Auswählen

<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

sek_is_back · 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?

dt2510 · 18 April 2018, 15:48:49

Ich hab' nur die beiden css Files in der index.html

Hier der Screenshot

dt2510 · 18 April 2018, 15:50:25

hier nochmal mit dem Ergebnis

sek_is_back · 18 April 2018, 15:53:37

ich glaube du überschreibst mit der Div class="large thin bg-grey" deinen Background

dt2510 · 18 April 2018, 15:59:33

den bg-grey hatte ich völlig überlesen ... jetzt funktioniert es auch - danke !!