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;
}
5 Likes
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:
1 Like
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:
- add an icon first by β
icon: somethingβ (this particular icon will not be displayed); - replace this icon by
card-modby 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.
2 Likes
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.
2 Likes
Also, the 2nd example will not work with picture-elements for styling an element. So, again we should use the 1st type (card_mod β style β β¦)
1 Like
I have to first apologize if someone has already covered this as I must be failing on how to search and cannot seem to find an answer / example and my guessing is not working.
I have a button that I cannot seem to find a way to change the font size of the βstateβ or would it be βoperationβ or βsettingβ or ??? text.
When pressed it pops open my thermostat in the Kitchens settings
I am trying to increase the font-size of the βHeatβ text in this button and I thought it might be reffered to as the βstateβ, however, in the control panel that pops open it is called βOperationβ.
Here is what I have, less all my attempts to add a font-size change for the text that shows now as βHeatβ.
- type: button
tap_action:
action: more-info
entity: climate.kitchen
show_name: false
show_state: true
show_icon: true
icon: mdi:fan
icon_height: 25px\
card_mod:
style: |
ha-card {
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
Iβll keep searching the 2400 plus posts while I hope someone knows the answers I seekβ¦
Thanksβ¦
Thank you both - noted and changed in code.
Can you help me?
Trying to change the standard card https://pastebin.com/5fUNmPWH
But out of all css blocks only this ha-card {} is applied. And in blocks:
ha-card .header .name {}
ha-card .info .value {}
ha-card .info .measurement {}
For some reason, nothing is applied at all.
Plus, there is an additional question regarding the icons in this card, in particular, I would like to apply a code like this to it:
img_cell:
- background-color: rgba(var(--color-theme),0.05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
Thank you.
You got a mixed code - Entities card + card_mod for Entity card.
ha-card {
border-radius: 20px;
#font-weight: bolder;
Do not use β#β here since you are trying to comment a part inside a string.
This is for custom:button-card (ref this thread).
If you are talking about βmay I apply a similar code for an entity iconβ - ok, just a minute.
may be achieved:
type: entities
show_header_toggle: false
entities:
- entity: sun.sun
- entity: sun.sun
style: |
ha-card {
--mdc-icon-size: 60px;
}
As for this:
already applied for icons.
As for this:
you can change a background:
type: entities
entities:
- entity: sensor.cleargrass_1_co2
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
background-color: aqua;
}
1 Like
Thank you for help. Hereβs what I got.
Similarly to this:
but with less efforts and only for static headers:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sun.sun
style: |
:host .entity {
display: flex;
flex-direction: column-reverse;
}
entities:
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
toggle: true
name: Bottom headers
show_state: false
1 Like
If anyone needs this:
type: entities
show_header_toggle: false
entities:
- entity: input_boolean.test_boolean
name: normal
- entity: input_boolean.test_boolean
name: toggle on the left
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
hui-generic-entity-row {
flex-direction: row-reverse !important;
}
2 Likes
What about shortcuts in mini-media-player?
Like this:
shortcuts:
attribute: sound_mode
buttons:
- icon: mdi:monitor-cellphone-star
id: ΠΡΠ±ΠΈΠΌΠ°Ρ ΠΌΡΠ·ΡΠΊΠ°
type: command
Color for play-control buttons - ok, i find it.
I realy use search, but donβt find solution. Thanks again *ΡΠΌΠ°ΠΉΠ»_ΠΏΠΎΠΆΠ°ΡΠΈΡ_ΡΡΠΊ