Do you understand a difference between card-mod and mod-card? The latter is supposed to be used only for cards w/o ha-card. That is why I asked you about ha-card.
I think you would greatly benefit from re-reading the documentation on GitHub.
Judging from your code, there have been significant changes that you need to catch up with.
Yes, probably, my code is from a very old version of the card/module.
I did the change to āload it as a moduleā in the frontend section when it was advised.
Using the new way of working, I managed to change my text to black again, keeping my background.
Thanks
Is it possible to change the border thickness of the person icon/badge on the maps card? I see itās in the .marker style but canāt find a way to change it with card_mod.
haha, thats wild for Sylvester . And yes, Ive been using gifs for buttons since forever, btw, also as entity_picture. use
for my app device_trackers 
Was wondering if you could help me fix this glowing Christmas card I triedā¦
Id like it to appear glowing from the background of the card, but for now managed to set the box-shadow like this.
1 Like
can we at all use word wrap on an individual glance state (3d (last) one, Prediction)?
type: entities
title: Buienradar Iungo
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
entities:
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
entities:
- sensor.temp_current
- sensor.windspeed
- sensor.prediction. # <--- needs word-wrap
- type: custom:fold-entity-row
I checked the examples for word-wrap but probably missed it, and this is what is actually in the state:
1 Like
geez, really did a word search for thatā¦ still, doesnt work out of the box (the mod still has the old style though, so I used it as:)
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
.entities .entity:
$: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
no change unfortunately nor does
- entity: sensor.prediction
card-mod:
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
work
try this (not tested):
card_mod:
style:
.entities .entity:
$: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
.: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
That post contained examples for wrapped names only, I just added examples for values - specially for @Mariusthvdb )))
!!!
- type: glance
title: Wrapped value (1st entity) + aligned
entities:
- entity: input_text.test_text
name: Wrapped
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
- entity: input_text.test_text
name: Not wrapped
card_mod:
style: |
.entities {
align-items: start !important;
}
right!
so this does it all:
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
.entities {
align-items: start !important;
}
entities:
- sensor.temp_current
- sensor.windspeed
- entity: sensor.prediction
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
is it on purpose we dont use ācard-modā on the entity, or an oversight and I should add it:
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
.entities {
align-items: start !important;
}
entities:
- sensor.temp_current
- sensor.windspeed
- entity: sensor.prediction
card_mod:
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
btw, the !important can be deleted, works without it just as fine.
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
.entities {
align-items: start;
}
entities:
- sensor.temp_current
- sensor.windspeed
- entity: sensor.prediction
card_mod:
style: |
div:not(.name) {
text-overflow: unset;
white-space: unset;
}
in the card now, thanks Ildar!
If you are talking about adding a card_mod keyword - that was an old code from card-mod 2.0, I just edited it and forgot to add this keywordā¦ It works w/o it but surely we should add it always.
1 Like
since š¹ Card-mod - Add css styles to any lovelace card - #1522 by Ildar_Gabdullin didnt yet have a mod for the background (which I needed) please have a look at my attemptsā¦
trying to get rid of the default background color which does not match any of my themes at all, and creates a huge dark blob in the interface :
I managed to do something like:
and have it mimics the settings for the headers I use in my frontend:
not sure this is the best code for it, but it seems to work fine for now:
- type: media-control
entity: media_player.tv_auditorium
card_mod: &media
style: |
.player {
background-color: var(--background-color-off);
}
.title-controls {
background-color: var(--background-color-on);
margin: 16px -16px 0px -16px;
padding: 0px 8px;
}
.title-controls {
color: var(--icon-color-on);
}
if this could be optimized, please give me a hint? thx
note the 
has disappeared completely, not sure whereā¦
Try with semi-transparent background
odd thing is it is no longer in inspector at allā¦
trying to replace my old footer mod:
.header-footer.footer {
--mdc-icon-size: 30px;
padding-bottom: 10px;
font-weight: bold;
font-size: 20px;
color: orange;
}
and manipulate the chips in the footer at all, I copied your code to:
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
.header-footer.ha-scrollbar ha-chip:
$: |
.mdc-chip {
border-radius: 4px !important;
}
.mdc-chip span {
text-align: center;
width: 250px;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
and, ofc, see nothing happeningā¦
while it needs to be something like:
which I now realize with an extra stack of buttons:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: script.garage_lamellen_open
icon: mdi:arrow-up
<<: &button
show_name: false
aspect_ratio: 3/1
styles:
card:
- box-shadow: none
- type: custom:button-card
entity: script.garage_lamellen_my
name: My
show_icon: false
aspect_ratio: 3/1
styles:
card:
- color: orange
- box-shadow: none
name:
- font-weight: bold
- font-size: 40px
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
haptic: light
hold_action:
action: more-info
haptic: light
- type: custom:button-card
entity: script.garage_lamellen_close
icon: mdi:arrow-down
<<: *button
which is ok-ish, but a huge bit of code for 3 little buttonsā¦
how can we manipulate the footer chips?
Try this (not tested):
style:
.header-footer.ha-scrollbar ha-chip:
$: |
..
.: |
.card-header {
...
}
really sorry but unfortunately no:
card_mod:
style:
.header-footer.ha-scrollbar ha-chip:
$: |
.mdc-chip {
border-radius: 4px !important;
color: orange
}
.mdc-chip span {
text-align: center;
width: 250px;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
.: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
does exactly nothing