Hello, I am attempting to use card-mod to change the background picture every 10 seconds, But I cant seem to get the scripts to function. Is there a better way to do this? Here is my current code:
type: custom:flipclock-card
time:
face: TwelveHourClock
card_mod:
style: |
ha-card {
width: 1279px;
height: 393px !important;
--card-background-color: #b1aaab;
background: url(http://picsum.photos/1280/400?random=${timestamp});
box-shadow: inset 0 0 0 2000px rgb(56 43 1 / 44%);
}
.fc-date {
font-size: 45px !important;
height: 55px !important;
display: none;
}
.flip-clock {
font-size: 50px;
}
.flip-clock-label {
display: none;
}
.fc-now {
opacity: 90%
}
.background {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
}
scripts: |
function updateBackground() {
console.log('updateBackground');
var timestamp = Date.now();
var backgroundImage = `url(http://picsum.photos/1280/400?random=${timestamp})`;
var style = `
ha-card {
background: ${backgroundImage};
}
`;
console.log('style:', style);
var card = document.querySelector("flipclock-card");
console.log('card:', card);
if (card) {
card.card_mod_style = style;
console.log('card_mod_style:', card.card_mod_style);
} else {
console.error('flipclock-card element not found');
}
}
updateBackground();
setInterval(() => {
updateBackground();
console.log('Interval set');
}, 10000);
console.log('Initial Interval set');
Tomm206
February 23, 2023, 7:35pm
4338
Hi all,
It looks like a simple question but I cannot find the working answer. Could you please advise me how to change the header font size (make it smaller) in following vertical stack and how to save some space between header and button cards?
Thank you.
type: vertical-stack
title: Scene
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.sonoff_1120a09bd4
name: Lamps
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:lamps
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:lamps-outline
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
entity: switch.sonoff_1120a09345
name: TV light
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:television
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:television-off
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
entity: switch.sonoff_1120b0389f
name: Garden lights
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:alarm-light-outline
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:alarm-light-off-outline
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
entity: switch.sonoff_11211a38ac
name: Kitchen lights
size: 40%
state:
- value: 'on'
color: rgb(223, 218, 0)
icon: mdi:track-light
styles:
card:
- background-color: ivory
- box-shadow: 0px 0px 20px 2px rgb(240, 194, 9)
- value: 'off'
icon: mdi:track-light-off
styles:
card:
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: horizontal-stack
cards:
- type: custom:button-card
name: Gate
entity: binary_sensor.gate_opening_detector
color: rgb(64, 114, 164)
size: 40%
state:
- value: 'on'
color: rgb(255, 124, 128)
icon: mdi:gate-open
styles:
card:
- background-color: lightpink
- box-shadow: 0px 0px 20px 2px rgb(255, 124, 128)
- value: 'off'
icon: mdi:gate
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.gate_open_close
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
name: Gate entrance
icon: mdi:gate-arrow-right
color: rgb(64, 114, 164)
size: 40%
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.gate_entrance
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
name: Garage door (W)
entity: binary_sensor.garage_door_w_opening_detector
color: rgb(64, 114, 164)
size: 40%
state:
- value: 'on'
color: rgb(255, 124, 128)
icon: mdi:garage-open-variant
styles:
card:
- background-color: lightpink
- box-shadow: 0px 0px 20px 2px rgb(255, 124, 128)
- value: 'off'
icon: mdi:garage-variant
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.open_garage_door_w
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
- type: custom:button-card
name: Garage door (E)
entity: binary_sensor.garage_door_e_opening_detector
color: rgb(64, 114, 164)
size: 40%
state:
- value: 'on'
color: rgb(255, 124, 128)
icon: mdi:garage-open-variant
styles:
card:
- background-color: lightpink
- box-shadow: 0px 0px 20px 2px rgb(255, 124, 128)
- value: 'off'
icon: mdi:garage-variant
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.open_garage_door_e
styles:
card:
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.7
- height: 80px
- border-radius: 10%
- padding: 10%
- font-size: 10px
Spartacus
February 23, 2023, 7:44pm
4339
Hi there,
I am new in HA and I try to modify a mushroom-template card. Actually it looks like this:
Now I wanted to modify the second line of the grey text in that way, that it shlould have a different color but I don´t know, if this is possible.
Here is my code for the respective card.
type: custom:mushroom-template-card
primary: '🔦 Gartenbeleuchtung:'
multiline_secondary: true
secondary: >-
{%- set days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnestag",
"Freitag", "Samstag"] %} {%- set months = ["Januar", "Februar", "März",
"April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November",
"Dezember"] %} {%-set su = state_attr('sensor.su_gartenlicht',
'tomorrow').timestamp() %} {%-set wd_su = days[ su | timestamp_custom("%w") |
int] %} {%-set mo_su = months [( (su )| timestamp_custom("%m") | int)-1]%}
nächste Einschaltzeit:
{{ su | timestamp_custom(wd_su~ ", %d. " +mo_su~" %Y um %H:%M Uhr")}}
icon: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.8rem;
--card-primary-font-weight: normal;
--card-secondary-font-size: 1.0rem;
--card-primary-line-height: 2.0;
--card-secondary-line-height: 1.5;
--primary-text-color: #E0E0E0;
--secondary-text-color: #808080;
font-family:'roboto';
font-weight: normal;
border: none;
box-shadow: none;
margin-top: 0.0rem;
## background:none;
}
This part represents the second line:{{ su | timestamp_custom(wd_su~ ", %d. " +mo_su~" %Y um %H:%M Uhr")}}
and btw.i am not good at coding, so this all looks quite bumpy. Maybe someone has a better idea to build this card
Spartacus
Jeroennl
February 24, 2023, 12:43pm
4340
For some reason after upgrading to card-mod 3.2.0 cardmod isn’t working anymore on my “custom:vertical-stack-in-card”. Any idea what i’m missing my “.card-header” class isn’t working anymore?
- type: custom:vertical-stack-in-card
title: Buiten
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- sensor.tempbuiten_temperature
name: Temp - Actueel
line_width: 2
hours_to_show: 24
font_size: 200
font_size_header: 18
decimals: 1
- type: vertical-stack
cards:
- type: statistic
entity: sensor.tempbuiten_temperature
period:
calendar:
period: day
stat_type: min
name: Temp - Min (24h)
style: |
.info .value {
font-size: 35px;
}
.info .measurement {
font-size: 35px;
}
.header .name {
font-size: 20px;
}
- type: statistic
entity: sensor.tempbuiten_temperature
period:
calendar:
period: day
stat_type: max
name: Temp - Max (24h)
style: |
.info .value {
font-size: 35px;
}
.info .measurement {
font-size: 35px;
}
.header .name {
font-size: 20px;
}
- type: custom:mini-graph-card
entities:
- sensor.tempbuiten_humidity
name: Luchtvochtigheid
line_width: 2
hours_to_show: 24
font_size: 200
font_size_header: 18
decimals: 1
card_mod:
style: |
.card-header {
padding-top: 2px;
padding-bottom: 2px;
font-size: 33px;
}
arganto
February 24, 2023, 1:00pm
4341
Jeroennl:
title: Buiten
card-header is now in the shadow root or the other way round not manipulated to another place from card_mod anymore.
So you have to dig one $ deeper. Examples and topic is somewhere above in this thread around update time which intrpoduced this change.
alladyn21
February 24, 2023, 3:16pm
4342
problem fix
anyway … how to add this:
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: transparent;
color: transparent;
background-color: transparent;
}
.badge-container .title {
color: transparent;
}
.: |
ha-label-badge {
--label-badge-background-color: gray;
--label-badge-text-color: white;
--label-badge-red: black;
}
to this
- entity: sensor.cleargrass_1_co2
icon: mdi:home ###creates a placeholder
card_mod:
style: |
:host {
{% if states(config.entity) | int > 600 %}
--card-mod-icon: mdi:fire;
{% else %}
--card-mod-icon: mdi:leaf;
{% endif %}
}
oneteam
February 25, 2023, 5:12pm
4344
I have been looking for the error in my code for days now.
Code:
- type: image
entity: cover.velux_window_roof_window
state_image:
open: /local/ui/floorplan/lite-on.png
closed: /local/ui/floorplan/lite-off.png
half-open: /local/ui/floorplan/lite-unavailable.png
style:
top: 5%
left: 50.5%
width: 2%
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: roof-window
content:
type: custom:shutter-row
entity: cover.velux_window_roof_window
name: Garden
invert_position: false
state_color: true
card_mod:
style: |
ha-card { border: yes; padding: 100px; }
Picture of the DOM Navigation
phairplay
February 25, 2023, 8:11pm
4345
Hi guys,
I’m trying to reduce the padding from above and below to reduce the card size. I’ve edited it in the web console and have the required affect
Yet when i save the yaml code and reload my page it ignores it and reverts back
Could you please tell me what I’m doing wrong
Shestak
February 26, 2023, 7:48am
4346
Maybe add !important ?padding: 10px 1px !important;padding-bottom: 1px !important;
1 Like
phairplay
February 26, 2023, 12:45pm
4347
thank you for the help,
style: |
ha-card.type-custom-alarmo-card {
padding-bottom: 1px;
}
div.header {
padding: 10px
1 Like
Fifthy
February 26, 2023, 1:51pm
4348
I’m trying to change the padding for a vertical stack card but i can´t get it to work, any ides?
type: vertical-stack
title: Kitchen
card_mod:
style: |
.card-header {
padding: 6px 16px 2px !important;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_77
- type: entity
entity: sensor.humidity_76
- type: entity
entity: sensor.lightlevel_48
for this reason, and for the issue in setting a card-mod-icon correctly using 3.2.0, I still am using 3.1.4, and never see any issue, or performance problem.
really not sure what went wrong (was there any issue at all?) and required 3.2.0, but it’s safe to not upgrade, and keep all card-header mods we had…
searched all of my scroll/overflows, but couldn’t find this:
- type: custom:mod-card
card_mod:
style: |
:host {
max-height: 500px;
overflow-y: scroll;
}
card:
type: grid
columns: 4
cards:
fixes it
78andyp
February 27, 2023, 10:47am
4351
Hi
Grateful for some help. What is the appropriate style: structure to alter the name of the button-card.
I’ve tried all sorts of variants having read many examples in this post - but none work. Currently on:
card_mod:
style: |
ha-card:
$:
.vertical.no-icon.no-state.no-label:
.ellipsis: { color: red !important; }
Have tried with/without ha-card:, $:, using id names instead of class names etc…
Thanks
78andyp
February 27, 2023, 11:41am
4353
Ildar_Gabdullin:
div#conatiner
Many thanks for your relpy.
I’ve now got this but it still doesn’t work:
card_mod:
style: |
ha-card:
div#container:
div#name: { color: red !important; }
I will also look at button-card styles again.
Thanks
Not correct(((
Also, “!important” may be omitted.element_1 element_2 element_3” path may be replaced by “element_3”.
78andyp
February 27, 2023, 12:37pm
4355
Hi
Many thanks indeed. Working now with:
card_mod:
style: |
div#name { color: red !important; }
Is there a good guide to when/when not to use ha-card, when you need all elements/when you can just use the last one, when you need ‘$’ or ‘:’ or preceding ‘.’ etc.??
Thanks very much
Check docs in card-mod repo.
Some more styles added :
remember to use custom:badge-card not state-badge…
