Check the docs for conditional card. Your problem is likely with that part of the code, not card-mod.
Conditional card takes a dictionary not a list.
1 Like
The condition is working ā¦
Meaning what? My post helped, didnāt help, you still get the same error? Bit cryptic honestly.
1 Like
sorry, misread what you typed.
So you mean the ātypeā cannot be a custom mod card ?
your post helped 
Using the custom:mod-card should be fine (I definitely use it myself in a conditional card), but because you put a hyphen before the card (as if you were about to put several cards there), the conditional card complained that no card was configured.
Without the hyphen, your mod card configuration is read as a map/dictionary, which is what the conditional card expects.
1 Like
Well, your code changes a color of a state as expected. Is it what you need?
Not sure if that is possible, by default you can style cards (with a ha-card element), and in some cards you can style the elements, but it cannot be done in every element, just in the ones that are patched to accept card-mod, and it seems that map is not one of them.
notice: card: ? not cardS:
need a single card, and not a list
1 Like
Well blimey, I have never seen thatā¦
interesting indeed
I got it, finally, after finding the wiki on the card-mod-theme and seeing that I could access hui-view through that! I have a theme like this, if anyone is trying to find how to do itā¦:
unsplash:
card-mod-theme: unsplash
card-mod-view: |
hui-view {
background: url('{{ states('sensor.unsplash_random_image') }}') no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: 100%;
}
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?