It should work, except when it doesn’t. For example with cards that handle styles on their own, like custom-button-card, or as you say picture-elements.
I may have to remove it at some point, though, because it could collide with core functionality.
It’s much more unlikely that Home Assistant core will ever want to use the keyword card_mod than style…
completely missed that, now editing all style: …
do we need to change:
- type: custom:mod-card
style: |
ha-card {
margin: 0px -16px -16px -16px;
}
too on mod-card?
I had a style which narrowed the spaces between a list of entities in a card and it doesn’t work any more.
Can anyone help? I have hidden the icon itself with the help of multiple-entity-row but need to reduce the height allocated from 40px.
entities:
- entity: sensor.wts_ensuite_current_temp
icon: nothing
style: |
:host {
height: 17px;
margin: -10px 0px;
}
type: custom:multiple-entity-row
Can I use an if statement to chose the ‘top’ and ‘left’ style? This does not work…
- type: 'custom:button-card'
entity: input_select.page
style:
top: >
[[[
if (entity.state == 'Lighting') return '215px';
if (entity.state == 'Home') return '175px';
else return '500px';
]]]
left: >
[[[
if (entity.state == 'Lighting') return '270px';
if (entity.state == 'Home') return '175px';
else return '500px';
]]]
Has anyone got it working to use card-mod with grid card to change the title attributes? For instance changing font size and padding? I believe card-mod usually does not work with cards like grid, stacks etc. Perhaps with 3.0 it’s become possible.
I see it’s under a constructed style sheet when I inspect element:
element.style {
}
And there is the code under it:
.card-header {
color: var(--ha-card-header-color, --primary-text-color);
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
font-weight: normal;
margin-block: 0px;
letter-spacing: -0.012em;
line-height: 32px;
display: block;
padding: 24px 16px 16px;
}
Changing it in inspector works, but I can’t seem to find a way to use it in card-mod.
Maybe this is possible using the theme as well, in that case I need to ask in that topic. However I wonder if it’s possible per card as well, so you can have different font sizes and paddings per grid card.
Edit: I got the font size working per theme by using ha-card-header-font-size in theme.yaml. Padding still no go.
Could you give a simple test example of the card?
I use it inside an auto-entities card, so it might make it extra complicated. This is the code I use:
- type: custom:auto-entities
card:
type: grid
columns: 4
square: true
title: Kantoor
card_param: cards
filter:
include:
- entity_id: light.kantoor_*
options:
type: 'custom:decluttering-card'
template: light
variables:
- entity: this.entity_id
- template: light
sort:
method: entity_id
ignore_case: true
So inside that code, I want to mod the part: title: Kantoor. The code that I got using inspect element is posted in my original post, but I can’t get it to work and don’t really know where to put is (if it’s at all possible using on grid-card).
Not sure, is it want you want?
type: custom:mod-card
card_mod:
style: |
ha-card {
color: red;
background-color: green;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 4
square: true
title: Kantoor
card_param: cards
filter:
include:
- entity_id: sensor.ha_count_*
options:
type: entity
entity: this.entity_id
sort:
method: entity_id
ignore_case: true
type: custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: red !important;
background-color: green;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 4
square: true
title: Kantoor
card_param: cards
filter:
include:
- entity_id: sensor.ha_count_*
options:
type: entity
entity: this.entity_id
sort:
method: entity_id
ignore_case: true
type: custom:mod-card
card_mod:
style: |
ha-card {
--ha-card-header-color: cyan;
--ha-card-header-font-size: 30px;
background-image: url(/local/images/pink.jpg);
background-size: 100% 100%;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 4
square: true
title: Kantoor
card_param: cards
filter:
include:
- entity_id: sensor.ha_count_*
options:
type: entity
entity: this.entity_id
sort:
method: entity_id
ignore_case: true
Not entirely. While I can adjust the font size with this, I can’t change the padding and font weight. Basically I want to make the font bold and remove the paddings.
When I change the padding to 0 using inspect element it works:
.card-header {
color: var(--ha-card-header-color, --primary-text-color);
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
font-weight: normal;
margin-block: 0px;
letter-spacing: -0.012em;
line-height: 32px;
display: block;
padding: 24px 16px 16px;
}
But can’t change it using card-mod.
I tried adding:
--ha-card-header-font-weight: bold;
--ha-card-header-padding: 0;
But those don’t work. So I want the text to be smaller (which works) and bold (does not work) and no padding around the title (also doesn’t work).
type: custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: red !important;
background-color: green;
--ha-card-header-font-size: 30px;
font-weight: bold !important;
padding: 0px 0px 0px !important;
letter-spacing: 0.112em !important;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 4
square: true
title: Kantoor
card_param: cards
filter:
include:
- entity_id: sensor.ha_count_*
options:
type: entity
entity: this.entity_id
sort:
method: entity_id
ignore_case: true
Thank you, this works! Though unfortunately card-mod loads the styling after page has been opened, so you see a brief jump in style when opening the page. This behavior started in one of the card-mod updates (even before 3.0). I noticed this with markdown card a long time ago.
Thank you for the code!
Unfortunately, cannot help about themes, know very little about it.
On my setup (RPi 3) markdowns are slowly appearing somtimes (because of jinjia2, I think).
I notice this was way better handled on previous HA versions. It happened with HA 117. I also maintain a HA installation for my younger brother, and haven’t updated his version yet (still on HA 116). Markdown works a lot faster there. They also changed the default card size (which you can only change with !important variable, which causes the jump effect after opening a tab) with HA 117. After that they updated a few times, which made it even worse for me.
Unfortunately markdown card is subject to change a lot of times. I had breaking changes 4x in the last 9 months or so. I’m now trying to just remove markdown completely because they just change too much and it just gets worse each time for me.
I’ll stick to titles in grid/vertical/horizontal stacks and perhaps use button-card for template texts.
I almost do not use markdown card in my setup.
Only as a kind of caption for test cards like this:
Hi, Thomas, may be I did not express my thought clearly - now with HA 2021.6.5 errors are occurred when using "style" with the ":host":
type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
style: |
:host {
color: red;
}
The code works but the HA editor does not allow to save changes.
Could be a bug in HA, may be?
Found one more issue with "card-mod" - be careful.
Probably, it is a bug (or a feature) of HA frontend editor.
card-mod:type: entities
entities:
- type: custom:multiple-entity-row
card_mod:
style: |
:host {
color: red;
}
entity: sun.sun
entities:
- entity: sun.sun
- entity: sun.sun
- type: custom:multiple-entity-row
card_mod:
style: |
:host {
color: red;
}
entity: sun.sun
entities:
- entity: sun.sun
- entity: sun.sun
Looks fine in the HA frontend editor:
Save the card.
Open the card in the HA frontend editor.
Remove some row using UI editor - see that red color style is not working:
The saved card is w/o "card-mod" - the HA frontend editor removed the "card-mod" code:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sun.sun
entities:
- entity: sun.sun
- entity: sun.sun
This happens not with "multiple-entity-row" only - it happens with simple entity rows too.
So, do not edit the card using UI editor.
this might be a long shot, but since the custom-card with the ‘issue’ I have with it seems abandoned, please let me ask here:
can we style the position of the title of these shutter cards, which now all seem randomly aligned above the shutter image. Card option is set to 'top. but other than that, the card doesnt offer styling options:
thanks for having a look
Hi. I’m working on a theme in a “Neuromorphic style”
I’m able to customize elements but only in a cards, now i wanna move config to theme file and i’m searching for a help, because every try ends as a failure. Below images as it look in cards configs, and link to github with a working code.
https://github.com/maskaz/HA-Neuromorphic
Thanks and regards
Awesome! Is it possible change the icon for the badges at the top of dashboards using this? I cannot find anything.
