It took some time to understand your first post. So you got a stupid answer from me 
.
Thanks for replying and helping me !
1 Like
Hi All,
I have a working week to show my partners shift patterns but Iām struggling to get this centered with some padding on the edges. Can anybody help me?
When I edit you can see how off-centered it is, Iāve tried putting it into a grid, horizontal-stack, a horizontal stack within a vertical stack but just canāt get it working.
Thanks
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: M
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set monday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(0 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_monday = start_time <= monday <= end_time %}
background-color: {{ 'lightcoral' if is_working_monday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 2px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
- type: custom:mushroom-template-card
primary: T
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set tuesday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(1 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_tuesday = start_time <= tuesday <= end_time %}
background-color: {{ 'lightcoral' if is_working_tuesday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 3px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
- type: custom:mushroom-template-card
primary: W
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set wednesday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(2 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_wednesday = start_time <= wednesday <= end_time %}
background-color: {{ 'lightcoral' if is_working_wednesday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 1.4px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
- type: custom:mushroom-template-card
primary: T
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set thursday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(3 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_thursday = start_time <= thursday <= end_time %}
background-color: {{ 'lightcoral' if is_working_thursday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 3.2px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
- type: custom:mushroom-template-card
primary: F
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set friday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(4 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_friday = start_time <= friday <= end_time %}
background-color: {{ 'lightcoral' if is_working_friday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 3px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
- type: custom:mushroom-template-card
primary: S
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set saturday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(5 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_saturday = start_time <= saturday <= end_time %}
background-color: {{ 'lightcoral' if is_working_saturday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 3px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
- type: custom:mushroom-template-card
primary: S
secondary: ""
icon: ""
card_mod:
style: |
ha-card {
{% set sunday = now().replace(hour=7, minute=0, second=0, microsecond=0) + timedelta(days=(6 - now().weekday())) %}
{% set start_time = states.calendar.sarah_work.attributes.start_time | as_datetime | as_local %}
{% set end_time = states.calendar.sarah_work.attributes.end_time | as_datetime | as_local %}
{% set is_working_sunday = start_time <= sunday <= end_time %}
background-color: {{ 'lightcoral' if is_working_sunday else 'lightgreen' }};
color: white;
border-radius: 25%;
padding: 3px;
max-width: 35px;
max-height: 35px;
box-shadow: 3px 2px 8px rgba(0, 0, 0, 0.4);
}
Hi there,
I added a badge to the header and want to use card_mod to remove the badgeās background. However, thereās no ha-card element in the DOM. Is it possible to modify it?
header_cards:
badges:
- type: entity
show_name: false
show_state: false
show_icon: true
entity: input_boolean.sleep_mode
views:...
Thanks.
Hi there,
What exactly would you like me to share please? The code is shared already in the orginal post (use the second code). Other than that, you place images to your www folder for example: card1.png, card2.png, card3.png and you create a dropdown helper with the options you want. I used names but you can use āCard1ā, āCard2ā then you need to adjust the code to āCallā a specific image when the dropdown option is selected. Here is the code one more time:
card_mod:
style: |
ha-card {
background-image:
{% if is_state('input_select.card_theme', "Blue Waves") %}
url("/local/card.png");
{% elif is_state('input_select.card_theme', "Dots 'n Gradients") %}
url("/local/card1.png");
{%- endif %}
background-position: 0% 0%;
background-repeat: no-repeat !important;
background-size: cover;
}
Regarding to your next question the expander card creates expanded cards (you can put any card. Mine looks like this:
If you need help donāt hesitate to send me a message.
Thanks
1 Like
OK I feel Iāve made some progress understanding how referencing a given component works but obviously havent got it quite right - at this point Iām just looking to generate any kind of change to a button so I know the referenceing is correct - looking to customise HVAC buttons in a climate entity tile card
tile card buttons below
Current code below - any tips appreciated
cheers
card_mod:
style:
hui-card-features $ hui-climate-fan-modes-card-feature $ ha-control-select $: |
div#option-medium.option { color: green !important;
}
check How to set border-radius on Tile card Features - #2 by Mariusthvdb I guess you might find what you are looking for
Dear Chris,
Sorry to bother you again but following our exchange on Nov 25th my your card-mod code worked well, but when I upgraded core yesterday my wind speed went back to white. Iāve looked at the html before and after but canāt understand what has changed? Any thoughts would be greatfully appreciated.
Here is the html:
I tried changing .entities-row to .hui-generic-entity-row, but that hmade no difference?
Many thanks - Colin
Update: from 7th Dec.
It now works on my PC using Firefox but not in the companion apps on phone or tablet nor in Android Firefox? Iāll just wait to see if it sorts itself out!
- type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:power
badge_icon: none
fill_container: true
badge_color: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: script.verlichting_allesuit
data:
browser_id: THIS
card_mod:
style: |
ha-state-icon::after {
content: "{{ expand('light.alle_lichten') | selectattr('state','eq','on') | list | count }}";
position: absolute;
top: 0%;
right: -6%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: rgb({{ states("input_text.kleur_iconen")}});
color: var(--card-background-color);
font-size: 11px;
}
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
width: 160px;
height:60px !important;
border-radius: 8px !important;
margin-bottom: 30px;
}
how can I change the position of the template card ? I want it at the right side of my screenā¦
aligment end ? or margin-left or margin-right ?
edit
- type: custom:mod-card
style: |
ha-card {
display: flex;
justify-content: flex-end;
}
I am not using mushrooms (BTW - there is a dedicated thread for mushroom-addicted people - and there are TONS of tutorials there thanks to Dimitri), so cannot help.
But what I see here - a ācard_modā keyword is missing, should be like:
- type: custom:mod-card
card_mod:
style: ... place here a valid style
card:
type: horizontal-stack
cards:
and using āha-cardā here
- type: custom:mod-card
card_mod:
style: |
ha-card {...}
card:
is a proper way only to change css ā- -ā theme variables which are used in a target card (like āpassing these vars into a target cardā):
- type: custom:mod-card
card_mod:
style: |
ha-card {
--some-theme-variable: ....
}
card:
type: some_card which uses that "--some-theme-variable" internally
And in other cases you need to address a particular element of target card:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
....and so on {
xxx: xxx;
}
card:
type: horyzontal-stack
I would like to use card-mod to modify a list where I track my āalmost emptyā batteries in a custom:auto-entities card. This is working just fine:
type: custom:auto-entities
card:
type: entities
title: Low Battery
filter:
template: >
{% for entity in states.sensor if entity.attributes.device_class == 'battery' and area_name(entity.entity_id) %}
{{ entity.entity_id }}
{% endfor %}
card_param: entities
unique: true
How would I change the icon of the entities based on states? I would like to add something like this:
icon: "mdi:battery"
style: |
:host {
--paper-item-icon-color: {% if entity.state|float < 20 %} red {% elif entity.state|float < 40 %} orange {% else %} yellow {% endif %};
}
but donāt really know where to put it. It seems to be working with explicitely stated entities or static filter, but not templated filters. Can anybody assist me on this?
1st post ā link at the bottom titled āfantasticā ā auto-entities
Thanks for the indeed fantastic collection of references. I went through it and found similar posts. I edited my template and changed it to this:
type: custom:auto-entities
card:
type: entities
title: Critical Battery Status
filter:
template: >
{% for entity in states.sensor if entity.attributes.device_class ==
'battery' and area_name(entity.entity_id) and entity.state|float < 60 %}
{{
{
'entity': entity.entity_id,
'secondary_info': 'last-changed',
'card_mod': {
'style': {
'.': '.ha-card { --paper-item-icon-color: red; }',
}
}
}
}},
{% endfor %}
The icon is still in HA-blue and not getting recolored to red.
Means - this is what you expect, right?
type: entities
title: ...
entities:
- entity: xxx
secondary_info: last-changed
card_mod:
style: |
.ha-card { --paper-item-icon-color: red; }
But the style is wrong, can you see ?)
Unrelated to card-mod:
- Use ādefaultā:
entity.state|float(default=0)
- Should be properly converted to a list - use ā-ā:
... < 60 -%}
...
{%- endfor %}
Besides, what a reason to use āāpaper-item-icon-colorā if all battery-level sensors have colored icons by default? Probably listing problematic entities (< 60%) would be enough. Just add
sort:
method: state
numeric: true
on a auto-entities-card level, not on filter level.
Hello
I just started playing with card_mod for glance card.
I was able to :
- resize the card height
- resize the font size
But iād like to center the text and strangely the area where the text is do not follow the card size
let me explain with image :
font size 30px
font size 80px
Iād like the text to be big and to occupies the whole space, does anyone know how ?
Heās the yaml
show_name: false
show_icon: false
show_state: true
type: glance
entities:
- entity: sensor.poele_on_last_fill_2
card_mod:
style: |
:host {
font-size: 80px;
height: 69px;
}
thx a lot
I tried playing with the Wrapped value example, but I cant get it to work
Ps : glance is not an obligation, i just want the visual, but glance is the one I reached the closest to my needs.
There are examples for Glance, you have already been advised.
yep, thx a lot for that, but I donāt understand how to get it to work.
If you could point me to the right direction that would be lovely 
Take any example for Glance card & start playing)
didnāt think off that !
thx a lot
1 Like
Can someone please help me? I have a camera that has a double feed because it has a stable camera and a rotating one. However the feed comes out as one video. How can I use card-mod to crop the upper half of the image?
Please elaborate. Attaching a picture would be useful.