- 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.
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
Wrong, .ha-scrollbar is inside shadowRoot.
Check Code Inspector for the correct path.
A bit more compact view for custom:sun-card:
type: custom:sun-card
showAzimuth: false
showElevation: false
timeFormat: 24h
card_mod:
style: |
.sun-card-header span {
font-size: var(--mdc-typography-body1-font-size) !important;
padding-bottom: 0px !important;
}
.sun-card-footer span {
font-size: var(--mdc-typography-body1-font-size) !important;
padding-bottom: 0px !important;
}
.sun-card-footer-row {
padding-top: 0px !important;
}
Left - with card-mod, right - w/o card-mod:
A similar for a horizon-card (fork of the archived sun-card):
type: custom:horizon-card
card_mod:
style: |
.horizon-card-header {
margin-top: 0px !important;
}
.horizon-card-graph {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.horizon-card-footer {
margin-bottom: 0px !important;
}
.horizon-card-footer > * {
margin-top: 0px !important;
}
.horizon-card-field-name {
font-size: 0.8rem !important;
color: red !important;
}
.horizon-card-field-value {
font-size: 1.8rem !important;
color: cyan !important;
}
and another challenge, which is probably easy, but at the end of the day…
- type: custom:fold-entity-row
head:
type: section
label: Camera
padding: 0
entities:
- type: custom:hui-element
card_type: picture-entity
card_mod:
# document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > horizontal-layout").shadowRoot.querySelector("#columns > div:nth-child(1) > hui-entities-card:nth-child(9)").shadowRoot.querySelector("#states > div:nth-child(5) > fold-entity-row").shadowRoot.querySelector("#measure > div > hui-element > hui-picture-entity-card").shadowRoot.querySelector("ha-card > hui-image").shadowRoot.querySelector("#image")
style: |
div#container.image {
margin: 0px -16px -16px -16px;
}
ha-card {
box-shadow: none;
}
I want the picture to take the full width in the fold, and not respect the margins…
path in inspector:
# document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > horizontal-layout").shadowRoot.querySelector("#columns > div:nth-child(1) > hui-entities-card:nth-child(9)").shadowRoot.querySelector("#states > div:nth-child(5) > fold-entity-row").shadowRoot.querySelector("#measure > div > hui-element > hui-picture-entity-card").shadowRoot.querySelector("ha-card > hui-image").shadowRoot.querySelector("#image")
normally, this works:
card_mod:
style: |
ha-card.type-picture-entity {
box-shadow: none;
margin: 0px -16px -16px -16px;
}
but the only thing modded is the box-shadow.
Ive had fights like this with folded Map cards, and they are successfully modded with:
- type: custom:fold-entity-row
head:
type: section
label: Map
card_mod:
style: |
div#items {
margin: 16px -16px -16px -16px;
}
no so this case ;-((
Adapt this for your needs:
type: entities
entities:
- sun.sun
- sun.sun
- type: section
- sun.sun
- sun.sun
- type: custom:fold-entity-row
head:
type: section
label: Camera
card_mod:
style: |
:host {
overflow: visible !important;
margin-bottom: 8px;
}
padding: 0
open: true
entities:
- type: custom:hui-element
card_type: picture-entity
entity: input_boolean.test_boolean
image: /local/images/blue_low_2.jpg
card_mod:
style: |
div#items {
margin-left: -16px;
margin-right: -16px;
margin-bottom: -16px;
}
:host {
margin-bottom: 16px;
}
- type: section
card_mod:
style: |
.divider {
margin-top: 16px !important;
}
- sun.sun
- sun.sun
Not as elegant as it could be - not 100% perfect: the image’s top edge is not on the same height as the divider when folded. This is happening because of using entities card. You should use stacks instead.
Compare with stack solution:
thanks. Tried the full stack-in-card, but that has various other ugly results. Mixing it like:
- type: custom:fold-entity-row
card_mod:
style: |
div#items {
margin: 8px -16px -16px -16px;
}
# :host {
# margin-bottom: 16px;
# }
head:
type: section
label: Camera
padding: 0
entities:
- type: custom:stack-in-card
keep:
background: true
cards:
- type: custom:hui-element
card_type: picture-entity
# card_mod:
# style: |
# ha-card {
# box-shadow: none;
# }
entity: camera.buienradar
makes it show as I want, folded and unfolded!
For people who are still using badges:
I realized that we can replace icons for badges - even if badges do not have badges displayed.
For example, this badge has an icon displayed:
badges:
- entity: sun.sun
And this badge does not have an icon:
badges:
- entity: sensor.cleargrass_1_co2
We can replace an icon for the 1st badge:
badges:
- entity: sun.sun
icon: mdi:home
And also we can do it for the 2nd badge:
badges:
- entity: sensor.cleargrass_1_co2
icon: mdi:home
Why it could be useful?
Suppose we have a sensor whose badge is with no icon displayed (like that “CO2” badge) - and then we need to display an icon dynamically (dependingly on some conditions).
To achieve this, we need to:
icon: something” (this particular icon will not be displayed);card-mod by using templates: - entity: sensor.cleargrass_1_co2
icon: mdi:home ###creates a placeholder
card_mod:
style: |
:host {
{% if states(config.entity) | int > 600 %}
--card-mod-icon: mdi:fire;
{% else %}
--card-mod-icon: mdi:leaf;
{% endif %}
}
One of possible usage - showing an icon for a season badge.
By default the season badge shows a current state:
badge:
- entity: sensor.season
Here is how to change it:
badges:
- entity: sensor.season
icon: mdi:home
card_mod:
style: |
:host {
{% set season = states(config.entity) %}
{% set icon =
{
'winter':'mdi:snowflake',
'spring':'mdi:flower',
'summer':'mdi:sunglasses',
'autumn':'mdi:leaf'
} %}
{% set icon_color =
{
'winter':'rgb(138,180,248)',
'spring':'rgb(106,168,79)',
'summer':'rgb(0,0,0)',
'autumn':'rgb(255,126,0)'
} %}
{% set border_color =
{
'winter':'rgb(138,180,248)',
'spring':'rgb(106,168,79)',
'summer':'rgb(230,145,56)',
'autumn':'rgb(255,126,0)'
} %}
{% set back_color =
{
'winter':'rgb(255,255,255)',
'spring':'rgb(216,251,135)',
'summer':'rgb(255,242,204)',
'autumn':'rgb(252,229,205)'
} %}
--card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
--label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
--label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
--label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
}
Probably you may find more nice color combinations )))
Another case is - show either an icon or a value:
post
More examples are described here.
sure, left full stack-in-card, right my (entities) card with bottom stack-in-card (and especially note the height of the fold title row, which seems better I the right version:
folded:
opened:
here’s the full code for the right card (which I have changed to use a picture card for the top banner, didnt have that one yet in the config 
and seems even more adequate than what I had before:
type: entities
entities:
- type: custom:hui-element
card_type: picture
image: /local/images/buienradar_banner.png
card_mod:
style: |
ha-card.type-picture {
box-shadow: none;
margin: -16px -16px 16px -16px;
}
tap_action:
action: url
url_path: https://www.buienradar.nl
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -16px -16px -16px -16px;
}
entities:
- entity: sensor.buienradar_feel_temperature
name: Apparent
- entity: sensor.buienradar_wind_force
name: Wind force
- entity: sensor.buienradar_condition
name: Condition
- type: custom:fold-entity-row
head:
type: section
label: Temp & condition
padding: 0
entities:
- entity: sensor.buienradar_temperature
name: Temperature
- entity: sensor.buienradar_ground_temperature
name: Ground temperature
# - entity: sensor.buienradar_condition_code
# name: Code
- entity: sensor.buienradar_detailed_condition
name: Detailed condition
- entity: sensor.buienradar_full_condition
name: Condition
- entity: sensor.buienradar_symbol
name: Symbol
- entity: sensor.buienradar_wind_direction
name: Wind direction
- entity: sensor.buienradar_wind_direction_azimuth
name: Wind azimuth
- entity: sensor.buienradar_wind_force
name: Wind force
- entity: sensor.buienradar_wind_gust
name: Wind gust
- entity: sensor.buienradar_wind_speed
name: Wind speed
- type: custom:fold-entity-row
head:
type: section
label: Barometer
padding: 0
entities:
- entity: sensor.buienradar_precipitation
name: Precipitation
- entity: sensor.buienradar_precipitation_forecast_average
name: Precipitation forecast average
- entity: sensor.buienradar_precipitation_forecast_total
name: Precipitation forecast total
- entity: sensor.buienradar_humidity
name: Humidity
- entity: sensor.buienradar_pressure
name: Pressure
- entity: sensor.buienradar_barometer
name: Barometer
- entity: sensor.buienradar_barometer_value
name: Barometer value
- entity: sensor.buienradar_stationname
name: Station
- entity: sensor.buienradar_visibility
name: Visibilty
- type: custom:fold-entity-row
card_mod:
style: |
div#items {
margin: 8px -16px -16px -16px;
}
# does nothing? left for reference
# :host {
# margin-bottom: 16px;
# }
head:
type: section
label: Camera
padding: 0
entities:
- type: custom:stack-in-card
cards:
- type: custom:hui-element
card_type: picture-entity
# not sure if the 'none' does anything, hard to see, so I left it out for now
# card_mod:
# style: |
# ha-card {
# box-shadow: none;
# }
entity: camera.buienradar
btw, we still cant do this can we:
ha-card {
background: camera.weerkaart_nl;
}
?
update
just for reference here: yes we can, and check the link 
Newbie to card-mod question…
I’ve installed from HACS, have added as a front-end module in configuration.yaml.
I notice all of the instructions say to use card-mod:
Yet these two cards both display identically, even though the second does not use the card-mod tag.
- type: entities
entities:
- sensor.home_external_average_humidity
- sensor.ensuite_absolutehumidity
- sensor.ensuite_heatindex
card_mod:
style: |
ha-card {
color: red;
}
- type: entities
entities:
- sensor.home_external_average_humidity
- sensor.ensuite_absolutehumidity
- sensor.ensuite_heatindex
style: |
ha-card {
color: red;
}
Is this because it’s loaded as a module? And are there functional differences that mean it is necessary to always use the card-mod: line?
Hi,
Both still work indeed, however you should use the first example. The second one is legacy and will most likely stop working at some point.