Oh-list-card background-color - header

runtimeInfo:
version: 3.3.0
buildString: Release Build
locale: de-DE
systemInfo:
configFolder: /etc/openhab
userdataFolder: /var/lib/openhab
logFolder: /var/log/openhab
javaVersion: 11.0.13
javaVendor: Azul Systems, Inc.
javaVendorVersion: Zulu11.52+13-CA
osName: Linux
osVersion: 5.15.32-v7l+
osArchitecture: arm
availableProcessors: 4
freeMemory: 92585528
totalMemory: 259522560
startLevel: 100

Hi all,
I want to make my oh-list-cards a bit more colored, but my efforts failed so far to bring color to the headline.
grafik

The Yaml-Code for it is:

component: oh-list-card
config:
  accordionList: false
  bgColor: lightblue
  mediaList: true
  noBorder: true
  simpleList: false
  title: Spielereien
  style:
    backgroundColor: green
slots:
  default:
    - component: oh-label-item
      config:
        after: ="(" + Number.parseFloat(items.radiator_valve_06_Set.state).toFixed(1)
          +")  "
        item: radiator_valve_06_Temp
        title: ="Heizkörper Speisekammer( " +items.radiator_valve_06.state + " )"
    - component: oh-list-item
      config:
        after: =dayjs(items.Current_DateTime.state).format('ddd, DD:MM:YY')
        icon: f7:alarm_fill
        iconColor: blue
        iconUseState: false
        textColor: red
        title: test dayjs format
    - component: oh-list-item
      config:
        action: group
        actionGroupPopupItem: gBatt
        after: =items.gBatt.displayState
        icon: "=items.gBatt.state === 'OFF' ? 'oh:battery-90' : 'oh:battery-0'"
        iconColor: "=items.gBatt.state === 'OFF' ? 'green' : 'red'"
        iconUseState: false
        noChevron: true
        title: Batterie Status Gruppe
    - component: oh-label-item
      config:
        icon: oh:lowbattery1
        iconUseState: true
        item: HmIP_SWDO_6A36_0LOWBAT
        title: Batterie Status
    - component: oh-toggle-item
      config:
        icon: oh:light
        iconUseState: true
        item: Dummy_3
        title: Dummy 3
    - component: oh-list-item
      config:
        after: =dayjs(items.Current_DateTime.state).fromNow()
        title: test/time mit dayjs
    - component: oh-list-item
      config:
        after: =dayjs(items.Current_DateTime.state).format('HH:mm:ss  dddd')
        title: test dayjs format
    - component: oh-list-item
      config:
        after: =dayjs(items.Current_DateTime.state).format('DD:MM:YY  dddd')
        icon: material:access_time_filled
        iconColor: green
        iconUseState: true
        title: test dayjs format
    - component: oh-list-item
      config:
        after: ="Sydnay " +dayjs().add(+8,"hour").format("HH:mm ") + " Uhr "
          +     dayjs().add(8,"hour").format("dd, DD.MM")
        title: Sydney - Zeit

Any ideas for me ? Thx in advance.

Cheers,
Peter

The standard list card properties don’t provide access to the header styles. You may be able to find and set the f7 css variable that controls that or just use the stylesheet to change the card-header class:

component: oh-list-card
config:
  ...other config options...
  stylesheet: >
    .card-header {
      background: green
    }
1 Like

@JustinG you are my hero. Thank you very much. You showed me the right direction in similar problem here.

Do you have a hint for me, where I can read about such features/syntax an to use it in correct manner, like

  stylesheet: >
    .card-header {
      background: green
    }  

as I didn’t found any sources here.

BTW: I just used it in an oh-label-card too
grafik

component: oh-label-card
config:
  stylesheet: |
    .card-header {
      background: linear-gradient(to bottom, #6fa8dc 0%, #ffe74c 100%)
    }
     .card-footer {
      background: linear-gradient(to bottom, #6fa8dc 0%, #ffe74c 100%)
    }
  background: "linear-gradient(to bottom, #6fa8dc 0%, #ffe74c 100%)"
  fontSize: 28px
  footer: ="momentane Distanz ist. " + items.esp_amica_01_dist.displayState
  icon: '=(items.esp_amica_01_dist.state > 230) ? "oh:cistern-0"
    :     (items.esp_amica_01_dist.state > 50) ? "oh:cistern-60"
    :     (items.esp_amica_01_dist.state > 21) ? "oh:cistern-100" : ""'
  item: esp_amica_01_dist
  label: =Number(6000 - ( 6000/230) *
    (items.esp_amica_01_dist.state-20)).toFixed(0) + " Liter"
  title: Zisterneninhalt
slots: null

Cheers,
Peter

I don’t know that the stylesheet has been included in the docs yet, but it can be applied to most pages and most components. It’s just a shortcut way to add a set of css style directives that are scoped (only apply to an element and it’s children) at a certain component. So really, the syntax to learn is css and references and tutorials for that can be found in a million places. Typically when I’m quickly checking a css property reference, I go here, but others will have their own preferred sites.

1 Like