runtimeInfo:
Hi all,
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,
JustinG
July 25, 2022, 3:34pm
2
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
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,
JustinG
July 25, 2022, 9:04pm
4
fibu-freak:
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.
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
fibu-freak:
bgColor: lightblue
Hi Justin, i have an issue with background color of a list-card, that won’t take the color from its parent.
it look so bad:
i’ve tried to use “transparent” or “none” as background, but with no effect.
JustinG
September 29, 2022, 1:52pm
6
bgColor is an F7 configuration, not a shortcut to a css style. The F7 color configs only accept a limited number of color name strings as inputs:
Try:
style:
background: transparent
instead
i’ve tried this as first, but no effect…it’s really strange that only transparent/none is not working…and i don’t want to think that is not possible to use the background color of the card as unique color…
JustinG
September 30, 2022, 3:05pm
8
Sorry, missed that you were also using a list-card. For the OH specific cards, the style is not passed directly to the cards. In this case, the easiest thing to do is to change the f7 variable --f7-card-bg-color. The trick is that you have to do it at some level above the list card. That is, you have to add it to the style of the page (if you want all the cards changed) or just the direct parent of the card you are working with. For example:
- component: f7-block
config:
style:
--f7-card-bg-color: transparent
slots:
default:
- component: oh-list-card
config:
title: Transparent list Card
thanks! i’ve tried to add colors but not with --f7.
