Hello Everyone. Asking here as a last resort. How can I add a colour border around more info history cards.
So far I have copied some code to my themes under card-mod-more-info-yaml and managed to blur the background when any more info pop-up opens, however cannot get my head around to add a border. Is it even possible ?
Thank you in advance for any help.
Answering my own question here. Managed to get a custom coloured border and blurred effect around more-info popups using the code below. Include this in your theme yaml file(explained brilliantly in the docs). I have no idea how it works why it works and directory structure whatever…lol… I am just a copy paster. Hope this helps someone .
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
background: rgba(0,0,0,0.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none;
border-radius: 20px;
border: 2px solid cyan;
}
1 Like
Hello
Can I set the font/icon size on this card in card mod?
Hello
I have a problem that I hope you can help me solve. Hope this is the right place to ask. Otherwise, I hope you can guide me correctly. I know the topic has been discussed before but I haven’t found a solution that helps me.
I have a custom:mushroom-template-card with an icon that spins, but unfortunately not around the center (on the fan in this case). I’m assuming it’s around what it thinks is the center, but that doesn’t match what I’m seeing. Is there any way around this?
type: custom:mushroom-template-card
entity: light.skrivbordslampa
icon: mdi:fan
icon_color: red
layout: vertical
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--icon-animation: spin 1s linear infinite;
}
Some useless styling:
code
type: vertical-stack
cards:
- type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
background: linear-gradient(90deg, rgba(255,0,0,1) 50%, rgba(0,255,0,1) 50%);
border-color: #e0e0e0;
}
- type: entities
entities:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
background: repeating-linear-gradient( -45deg, transparent 0 3px,rgba(255,127,127,0.2) 3px 6px);
}
Notes:
- The “border-color: #e0e0e0” style is needed since a default border is semitransparen - at least in a default theme.
- No idea how to apply gradient fill for icons - they are SVG, this seems to be a different story.
Strange that this was not posted yet…
How to customize colors for graphs:
There is an undocumented (i.e. could become unsupported) method.
Compare these cards:
Use “–graph-color-xxxx” vars to customize colors.
Note that the 2nd & 3rd cards have no filled bullets in a legend. Imho a format of defining a color matters - so use hex colors.
code
type: vertical-stack
cards:
- type: history-graph
entities: &ref_entities
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_2_co2
- entity: sensor.mijia_300_1_co2
card_mod:
style: |
ha-card {
--graph-color-1: #ff0000;
--graph-color-2: #0000ff;
--graph-color-3: #00ff00;
}
- type: history-graph
entities: *ref_entities
card_mod:
style: |
ha-card {
--graph-color-1: rgb(255,0,0);
--graph-color-2: rgb(0,0,255);
--graph-color-3: rgb(0,255,0);
}
- type: history-graph
entities: *ref_entities
card_mod:
style: |
ha-card {
--graph-color-1: red;
--graph-color-2: blue;
--graph-color-3: green;
}
P.S. a small remark: sometimes I think that conventional “history-graph” card is in some ways much better than shiny custom cards - they are “streaming” & show unavailable states properly.
This method may be also used for statistics graph card:
Here only hex format is advised, otherwise I observed this:
Tested in Chrome & FF (Win), iOS companion app (iOS 15.x)
4 Likes
not useless! kind of like the 50% background mimicking a toggle switch. I certainly see a use case there
quick draft
compared to
- type: entities
entities:
- entity: input_boolean.test
card_mod:
style: |
ha-card {
background: {{'linear-gradient(90deg,ivory 50%, gold 50%)'
if states('input_boolean.test') == 'on' else
'linear-gradient(90deg,gainsboro 50%, silver 50%)'}}
;
}
nice!
didnt understand your remark on the border color, I left it out and all is well
Hi 
I’m trying to set the class of a card based on the state of an entity. E.g. if it’s an alarm in stafe ‘off’ then I’d like the class to be something like ‘off’ or ‘alarm-off’.
Been trying a few approaches, but can’t seem to get it to write out the state of the entity.
Latest attempt:
card_mod:
class: alarm-"{{states(entity)}}"
Have tried a bunch of other variants like, but either it writes out nothing - or literally just writes out the text “{{states(entity)}}”
Any help is appreciated
Probably because you replaced a standard border in your custom theme.
a yes, I forgot about that, I have no border 
ha-card-border-width: 0px
other than that, a very nice mod!
I’m a total newbie at this, but I want to simply change the color of badges based on a condition.
Here is the code. I have card-mod installed as I have been able to customize other cards, just not badges. What am I doing wrong?
- entity: light.backyard_house_sconce_1
card_mod:
style: |
:host {
{% if is_state('light.backyard_house_sconce_1', 'on') %} --label-badge-red: #02B9F4;
{% elif not is_state('light.backyard_house_sconce_1', 'home') %} --label-badge-red: #fd79a8;
{% else %} #fff;
}
- entity: sensor.current_pool_temperature_3
style: |
:host {
--label-badge-green: {% if is_state('sensor.current_pool_temperature_3') | int <115 %} green {% else %} red {% endif %};
}
Start with a simpler task:
– a sensor (or a binary_sensor) entity;
– no jinja.
Examples for badges are provided (1st post → link at the bottom).
Thank you for that, so I think it does have something to do with the sensor itself because I can use a binary sensor or a light or a switch and get the intended result.
Is there something in the condition that causes the color not to change. For instance, I know that the sensor reports a number as Fahrenheit. Is the condition setup to measure against that?
I do not recall this var - “–label-badge-green”.
(may be it was added for some domains? but sensors use “–label-badge-red”)
Use provided examples as was already suggested.
Imho any math in jinja must conform to a specified UoM.
So…. where would I learn about that.
I also tried a ‘simpler’ condition which would examine a sensor and NOT display the badge if the sensor = 0. The UoM is ‘packages’
- entity: sensor.mail_fedex_packages
name: FedEx Deliveries
style: |
:host {
{% if is_state('sensor.mail_fedex_packages') | int == 0 %}
display: none;
{% else %}
display: inline-block;
{% endif %}
}
BTW - The only examples I see are based in jinja
When I say “test w/o jinja” - I mean w/o using HA templating.
This is w/ templating:
style: |
:host {
{% if ... %}
some_property: some_value;
{% endif %}
}
and this is w/o:
style: |
:host {
some_property: some_value;
}
I advised to start testing w/o templates since this is simpler, a user may add less errors etc.
A small remark for your test: no need to do this, just leave it untouched:
{% else %}
display: inline-block;
This small demo may help you may be:
title: badges-test
path: badges-test
subview: true
badges:
- entity: sensor.processor_use
style: |
:host {
{% set RED = 255 * (states('input_number.test_level_1')|float / 100) %}
{% set GREEN = 255 * (states('input_number.test_level_2')|float / 100) %}
{% set BLUE = 255 * (states('input_number.test_level_3')|float / 100) %}
--label-badge-red: rgb({{RED}},{{GREEN}},{{BLUE}});
}
cards:
- type: entities
entities:
- entity: input_number.test_level_1
name: red
- entity: input_number.test_level_2
name: green
- entity: input_number.test_level_3
name: blue
code for input helpers:
input_number:
test_level_1: &ref_number_1_100
min: 0
max: 100
step: 1
mode: slider
test_level_2: *ref_number_1_100
test_level_3: *ref_number_1_100
1 Like
I am trying to make a dropdown to show additional info in a card. I fond this code from anther post, but can’t make it work to rotate the icon 180 degrees based on the status of the entity. Can someone provide me the correct code for inverting the icon.
type: custom:mushroom-template-card
entity: input_boolean.hvac_filter_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
.: |
ha-card {
border-width: 0px;
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: None !important;
}
I found the solution in this post so my new code is
type: custom:mushroom-template-card
entity: input_boolean.hvac_filter_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-state-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
ha-card {
border-width: 0px;
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: None !important;
}
1 Like
Some styles for “timeline” history-graph
On December 2022 default colors for icons & “timeline” graphs were changed.
Later users got a possibility to customize colors by defining theme variables (also, in a normal format, not like “234,23,45” which did not allow users to use colors like “green” & “rgb(2,34,45)”).
One of changes was related to using a transparent color for history-graph for “unavailable” values.
Earlier a transparent color was used for periods when an entity did not exist.
On a screenshot from 2022.7.4 the upper entity was not created yet before ~06:05:
And here is a similar picture from 2023.7 - the upper entity was just created, the 2nd entity is currently unavailable :
Can you see a difference between “not created” & “unavailable” here?
Created an issue on 13.12.22, but it appeared to be a waste of time since I failed to convince people in obvious (imho) things.
What I can do now is using a theme variable (let’s use “cyan” as intuitively “unavailble”):
my_super_theme:
history-unavailable-color: cyan
which gives us this 100% clear picture:
Here are ways to style graphs locally:
code
- type: history-graph
entities:
- binary_sensor.testing_availability
hours_to_show: 0.15
show_names: false
- type: history-graph
entities:
- binary_sensor.testing_availability
hours_to_show: 0.15
show_names: false
card_mod:
style: |
ha-card {
--history-unavailable-color: cyan;
}
BTW, I especially love this puzzle - what is this?
Correct answer - this is a DEFAULT graph for “unavailable” entity.
For “unknown”:
code
- type: history-graph
entities:
- sensor.web_scrape
hours_to_show: 1
show_names: false
- type: history-graph
entities:
- sensor.web_scrape
hours_to_show: 1
show_names: false
card_mod:
style: |
ha-card {
--history-unknown-color: pink;
}
As for other values - a similar method can be used:
type: history-graph
entities:
- entity: ...
hours_to_show: ...
card_mod:
style: |
ha-card {
--graph-color-1: red;
--graph-color-2: orange;
--graph-color-3: yellow;
--graph-color-4: green;
--graph-color-5: lightblue;
--graph-color-6: blue;
--graph-color-7: violet;
}
But it will not be persistent - colors depend on an order of occurrence in a timeline.
Only for some domains & device_classes persistent colors may be defined.
4 Likes
Just found card-mod and love it but i’m struggling with 1 single thing, define multiple lines for badges.
I have 2 custom conditional badges that i would like to always be visible (if condition is matched) on a second line, is such possible with card mod?