Hi!
Card mod no longer working on mini media player card?
I recently upgraded from 2023.10 to 2024.6. I also updated to the latest releases of card-mod and mushroom. Iāve tried to change the margins to extreme values, but to no avail.
When upgrading like this, itās always worth checking the release notes:
1 Like
Hey Card-mod peeps, - dont know whether I should open a new thread or just post hereā¦
I am casting a dashboard to a Google Chromecast and am having trouble with getting card_mod to translate over all the changes to the card, esp when it comes to fonts.
In the case below, Amatic SC is displayed correctly in a browser, but not on the chromecast. The margin: offsets work correctly on both the browser and the chromecast.
However, if the font is defined in a theme, it works correctly on the chromecast.
Anyone know how to get font-family to translate into a chromecast???
I sort of remember seeing a post somewhere suggesting that there is an alternate way of making sure that card_mod always translates (caching/module/resources) - I just cant seem to find the post
- type: markdown
content: <h1><center>BACKYARD</h1>
card_mod:
style:
.: |
ha-card {
margin: -40px 0px -130px -60px !important;
text-align: center !important;
font-family: Amatic SC;
font-size: 25px;
}
Worth testing quotes around Amatic SC and adding serif
font-family: "Amatic SC", serif;
card_mod:
style:
.: |
ha-card {
The code above can be changed to
card_mod:
style: |
ha-card {
It may also be beneficial to describe what method are you using to cast. Does the font still change if casting from Chrome to Chromecast?
Thank you! I totally didnāt see I was missing the card-mod: itself.
1 Like
Iām trying to change the padding for the header on a todo list card, but itās in a shadow root and I canāt figure it out, could someone please give me a hand?
My card so far:
type: todo-list
entity: todo.grocery
view_layout:
position: sidebar
title: Grocery List
card_mod:
style:
.: |
ha-card.type-todo-list$ {
color: red !important
}
ha-card.type-todo-list div.header {
display: none;
}
ha-card.type-todo-list div.addRow {
padding: 0px 16px;
}
ha-check-list-item.editRow.completed {
display: none;
}
:host {
--mdc-checkbox-ripple-size: 33px;
}
ha-check-list-item {
min-height: 28px !important;
}
ha-card {
--mdc-typography-subtitle1-font-size: 17px;
}
ha-icon-button.reorderButton,
ha-icon-button.addButton {
margin-top: -35px !important;
}
.divider {
display: none;
}
The dev tools
Add
card_mod:
style: |
.has-header {
color: red;
padding: 10px;
}
I didnāt check the remainder of your code, but you should be able to remove ha-card from mods like this
ha-card.type-todo-list div.header {
display: none;
}
This should work the sameā¦
card_mod:
style: |
.has-header {
color: red;
padding: 10px;
}
div.header {
display: none;
}
div.addRow {
padding: 0px 16px;
}
.completed {
display: none;
}
.addButton {
margin-top: -35px !important;
}
.divider {
display: none;
}
ha-card {
--mdc-typography-subtitle1-font-size: 17px;
}
Shadow-root => $ as always
card_mod:
style:
$: |
.card-header {
color: red !important;
}
.: |
ha-card.type-todo-list$ {
color: red !important
}
The code you posted does not work. I think you meanā¦
card_mod:
style:
$: |
.card-header {
color: red !important;
}
.: |
.type-todo-list {
color: red !important;
}
I didnāt correct and donāt care other errors. I only added, was has to be added to style the card-header, as this was the question and yours above is not taking care about the shadow-root.
Only left the rest, because of the follow-up question, how to combine shadow-root and not shdow-root items.
Yet the code I posted worksā¦
1 Like
I am going down the rabit hole of trying to create better Lovelace page anchors,
The issue I have is using the current anchor-card, when the card is added it creates a massive empty space in my dashboard, Ideally, what I want is the ability to add a lovelave HTML page anchor to any card, something like
<h1 id="my_anchor"></h1>
Then the ability to call said anchor with
lovelace/#my_anchor
Would this be possible to achieve with card-mod?
Thanks
that works to change the text color, but I still canāt get rid of the padding for some reason.
card_mod:
style:
.: |
.type-todo-list {
color: green !important;
padding: 0px
}
$: |
.card-header {
color: red !important;
padding: 0px; !important
}
The ; at padding is at the wrong place.
Dāoh youāre right, thank you!
It depends how you are defining working. 
Yes, it is red and yes there are paddings.But you are not modding the card-header (though that was the question) but the div around the card-header (and in this case the whole card). So you are setting the padding there.
instead of here
And the color is only working by chance, because it is passed in this case (inherited) in the shadow-root, what is normally not the case. And the color is here set not only to the text, but to the + and other elements as well.
So I would recommend the style the card-header the way I posted.
card_mod:
style:
$: |
.card-header {
color: red !important;
padding: 10px !important;
}
But of course, everyone can do, whatever is fitting to the requirements.
trying to āreplicateā certain styles of custom:bar-card, which has been abandoned for 3 years now sadly, I came up with 2 versions. One using the core type: entity card
- type: entity
entity: sensor.buienradar_sunchance_2d
card_mod:
style: |
ha-card {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{{'linear-gradient(90deg,ivory ' ~ perc ~ '%, gold ' ~ rest ~ '%)'}};
color: var(--primary-color);
}
but to my surprise (caused by lack of css masteryā¦) the gradient went the wrong wayā¦ I want the 30% to be gold, starting on the left)
So I experimented some more and nested the entity cards in a vertical-stack, changing the gradient to āto leftā:
- type: vertical-stack
title: Zonkans
cards:
- entity: sensor.buienradar_sunchance_1d
<<: &chance
type: entity
card_mod:
style: |
ha-card {
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{{'linear-gradient(to left,ivory ' ~ rest ~ '%,gold ' ~ perc ~ '%)'}};
color: var(--primary-color);
}
- entity: sensor.buienradar_sunchance_2d
<<: *chance
- entity: sensor.buienradar_sunchance_3d
<<: *chance
- entity: sensor.buienradar_sunchance_4d
<<: *chance
- entity: sensor.buienradar_sunchance_5d
<<: *chance
which was already much better:
still very big, (well theyāre entity cards so what did I expect), and I admit to have been looking for something to use in the core entities card, and finally made it into this:
- type: entities
title: Zonkans
entities:
- entity: sensor.buienradar_sunchance_1d
<<: &style
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
margin: 0px -16px;
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{{'linear-gradient(to left,ivory ' ~ rest ~ '%,gold ' ~ perc ~ '%)'}};
color: var(--primary-color);
}
- entity: sensor.buienradar_sunchance_2d
<<: *style
- entity: sensor.buienradar_sunchance_3d
<<: *style
- entity: sensor.buienradar_sunchance_4d
<<: *style
- entity: sensor.buienradar_sunchance_5d
<<: *style
which is getting closer to what I had hoped for:
this is the bar-card:
I might still need to do something with the background of the wrapping card, or, separate the entities a bit more by not wrapping them at all. Not sure yet.
Id love to hear suggestions to make this better.
(the jinja template feels a bit verbose / hacky too, so do have a look there)
linear-gradient(to left,ivory {{rest}}%, gold {{perc}}%);
might be a bit more robust
Thinking of changing the color based on the % level (like we can do with the bar-card).
Anyways, since I couldnāt find a post on dynamically changing the background color in an entities card, I figured this would be a useful addition to this thread.
1 Like
Iāve used a negative integer to flip the direction.
{{'linear-gradient(-90deg,ivory ' ~ perc ~ '%, gold ' ~ rest ~ '%)'}};
Ive tried that before, but it doesnt change the colorization:
gold showing 70% here (I wish)
btw, if youād like to have a toggle flip its colors:
- type: entities
entities:
- entity: input_boolean.test
card_mod:
style: |
ha-card {
background: {{'linear-gradient(90deg,ivory 50%, gold 50%)'
if is_state('input_boolean.test','on') else
'linear-gradient(90deg,gainsboro 50%, silver 50%)'}}
;
}
Seems like the second value in the linear gradient is impacting the color spread
{% set perc = state_attr('light.pc_lights','brightness') | multiply(1/2.55) |round(0) %}
{% set rest = (100 - perc) -100 %}
{{'linear-gradient(90deg, gold ' ~ perc ~ '%, ivory ' ~ rest ~ '%)'}};
color: var(--primary-color);
or
{% set perc = state_attr('light.pc_lights','brightness') | multiply(1/2.55) |round(0) %}
{% set rest = (0 - perc) %}
{{'linear-gradient(90deg, gold ' ~ perc ~ '%, ivory ' ~ rest ~ '%)'}};
color: var(--primary-color);