And how does the whole config for grid layout look like? This is just part for card_mod, I think it would be better if you send the whole config for that card.
This is all based off the older version of Mattias_Persson 's theme, with the sidebar icons, before he switched to the bottom bar. Here is everything from that themes.yaml up to that point if it helps.
####################################################
# #
# CARD-MOD #
# #
####################################################
card-mod-theme: tablet
card-mod-root: |
#view {
background: url('/local/background.png') !important;
background-size: cover !important;
}
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
}
#################################################
# #
# GRID CARD HEADINGS #
# #
#################################################
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 2.4vw !important;
line-height: 0 !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 3.3vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 5.5vw !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
.: |
div {
height: 100%;
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 1px !important;
}
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
background-color: rgba(0,0,0,0);
border-right: none;
min-height: 100%;
margin-left: -0.8%;
margin-bottom: -6%;
}
}
#################################################
# #
# SIDEBAR LAUNDRY TIMER #
# #
#################################################
grid-layout$hui-vertical-stack-card$hui-conditional-card:
.: |
hui-conditional-card {
display: flex;
justify-content: center;
}
/* phone */
@media screen and (max-width: 800px) {
hui-conditional-card > button-card {
zoom: 250%;
width: 100%;
filter: contrast(85%);
}
}
#################################################
# #
# SIDEBAR BOTTOM ICONS #
# #
#################################################
"grid-layout$hui-vertical-stack-card$hui-grid-card":
.: |
hui-grid-card {
display: flex;
flex: auto;
align-items: flex-end;
}
/* phone */
@media screen and (max-width: 800px) {
hui-grid-card {
position: absolute;
right: 5.5vw;
}
}
$: |
#root {
width: 100%;
padding: 0 13% 25% 13%;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
padding: 0 0 0 55%;
}
}
#conditional color - Camera
"$hui-button-card:first-of-type$": |
{% if is_state('sensor.template_recent_outside_motion', 'True') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Music
"$hui-button-card:nth-of-type(2)$": |
{% if is_state('media_player.main_floor', 'playing') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Devices
"$hui-button-card:nth-of-type(3)$": |
{% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Weather
"$hui-button-card:nth-of-type(4)$": |
{% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Network Info
"$hui-button-card:nth-of-type(5)$": |
#{% if not is_state('sensor.template_hass_version', 'Latest') %}
{% if is_state('sensor.template_hass_version', 'Latest') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Vaccuum
"$hui-button-card:last-of-type$": |
{% if is_state('binary_sensor.template_mainfloor_vaccuum_color', 'on') or is_state('binary_sensor.template_upstairs_vaccuum_color', 'on') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
card-mod-card: |
.header .card-header {
letter-spacing: 0.005em;
font-size: 1.6em;
font-weight: 500;
padding: 1em 0 0 1.68em;
line-height: initial;
cursor: default;
}
.content .card-content {
padding: var(--card-content-padding);
}
Before 2024.7, the 6 icons would stick to the bottom of the screen, but now they move with the sidebar text. And they should all be white, except the 6th icon which is active because the Vaccuum is going. Instead all 6 get the modifications for card 6, if that makes sense.
Try removing the quotation marks if that has any effect 
Ahh, if only it were that simple. No effect sadly.
Hi Iāve try to add different border and background to section on the new āexperimentalā Section view. Is card mod compatible to this type ov view?
as example
title: TEMPERATURA
path: temp
subview: false
type: sections
sections:
- type: grid
cards:
- type: heading
heading: Matrimoniale
- graph: line
type: sensor
entity: sensor.sensore_matrimonale_temperature
detail: 2
name: Temperatura
hours_to_show: 6
layout_options:
grid_columns: 2
grid_rows: 2
- graph: line
type: sensor
entity: sensor.sensore_matrimonale_humidity
detail: 2
name: UmiditĆ
hours_to_show: 6
column_span: 1
- type: grid
cards:
- type: heading
heading: Singola
- graph: line
type: sensor
entity: sensor.sensore_singola_temperature
detail: 2
name: Temperatura
hours_to_show: 6
- graph: line
type: sensor
entity: sensor.sensore_singola_humidity
detail: 2
name: UmiditĆ
hours_to_show: 6
- type: iframe
url: >-
https://dagammla.gitlab.io/keep-silk-open/iframe.html?fbclid=IwZXh0bgNhZW0CMTAAAR27Gh9lxMQiyFfXw7QVdbZKG__lB_CTXIQgYsTXqOfRmfFUqhovSdvhn-g_aem_AasYAIErWaw6_YWu4jLX4pkjJyldXOYKmO7chF_nHqzr3nsEUbINtHFrrV1xbh42W0P_3NApkD7SAfYpP1co9avG
aspect_ratio: 0,0001%
- type: custom:bubble-card
card_type: pop-up
hash: "#test"
column_span: 1
- type: grid
cards:
- type: heading
heading: Doppia
- graph: line
type: sensor
entity: sensor.sensore_doppia_temperature
detail: 2
name: Temperatura
hours_to_show: 6
- graph: line
type: sensor
entity: sensor.sensore_doppia_humidity
detail: 2
name: UmiditĆ
hours_to_show: 6
column_span: 1
max_columns: 3
cards: []
wallpanel:
enabled: false
thereās probably a reason Matthias move from that theme to his new version called ha-fusion, didnt he mention something in the repo?
Suppose this is a detailed question for his dedicated thread in the community, did you check there?.
If anything, itās not for this thread, maybe see whatās been done in the Themes topic for card-mod
Just posting in case anyone would like to replicate. If you want to have an inner shadow in the slider of the Tile card, but also have a background, the correct code to do this is:
card_mod:
style:
hui-card-features$:
hui-card-feature$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
box-shadow: inset 0.5px 0.5px 4px 0px #3b3b3b;
}
.: |
ha-card {
background-image:
{% if is_state('input_select.card_theme', "Blue Waves") %}
url("/local/card.png");
{% elif is_state('input_select.card_theme', "Dots 'n Gradients") %}
url("/local/card1.png");
{% elif is_state('input_select.card_theme', "Blood Shapes") %}
url("/local/card2.png");
{% elif is_state('input_select.card_theme', "Color Lines") %}
url("/local/card3.png");
{% elif is_state('input_select.card_theme', "Navy Gold") %}
url("/local/card4.png");
{%- endif %}
background-position: 0% 0%;
background-repeat: no-repeat !important;
background-size: cover;
}
In the above example, i have a dropdown helper and i have uploaded different background images which change based on the helper selection. It works with simple or gradient color as well though. Here is an example:
Notice that the inner shadow is applied on the slider background which was the intended visual.
Hope this helps
Have a query about using card-mod, specifically in a theme with the new āHeadingā card type added in 2024.10.
Iāve seen posts on how to style the cards individually, and using the examples in this thread that works great, but would prefer to apply the styles using the theme support (so it applies to all cards of that type and I donāt have to add to cards individually), but itās not obvious to me how to target the specific ātitleā or āsubtitleā cards separately (Iām no CSS/web developer).
In the DOM for my HA dashboard I see both title and subtitle cards present with:
<ha-card class="type-heading"> ... </ha-card>
and within that, the type of title set as either
<div class="content title"> ... </div>
or
<div class="content subtitle"> ... </div>
around the card icon and text.
I get that I could set CSS at the card level based on the ha-card class, but that would affect both title and subtitle cards, or I could set CSS on the div based on title/subtitle, but that would only apply to the card icon and text, and not the card itself.
Is there a way that I can select based on whether the content of the card is title/subtitle, but then apply CSS to the card as a whole?
Iām absolutely new to card-mod, tried copy-pasting stuff, but itās just not workingā¦
Situation:
- entity: input_text.empty
type: custom:multiple-entity-row
name: " "
icon: mdi:thermometer
entities:
- entity: sensor.aqara_lena_temp
name: "Lena"
format: precision1
unit: false
- entity: sensor.aqara_kato_temp
name: "Kato"
format: precision1
unit: false
Iām displaying 2 temperature sensors with multiple entity-row (actually much more, but I simplified the example)
I have 2 entities containing the minimum temperature for each room
input_number.zv_thermostaat_lena
input_number.zv_thermostaat_kato
I want to color the sensors above red when:
sensor.aqara_lena_temp < input_number.zv_thermostaat_lena
sensor.aqara_kato_temp < input_number.zv_thermostaat_kato
But obviously 1 sensor can be above and the other can be below the required temperature, so I want the correct one to show red, for each sensor individually.
This is what I have now, but nothing happens:
(cut)
entities:
- entity: sensor.aqara_lena_temp
name: "Lena"
format: precision1
unit: false
style: |
:host {
color: {% if states('sensor.aqara_lena_temp') | float < states('input_number.zv_thermostaat_lena') | float %} red {% else %} white {% endif %};
}
(cut)
Just to clarify things: I want to color the temperature, not the icon in the beginning.
What am I doing wrong ?
I tried to understand the posibilities in the overview pages, but nope, Iām not getting it.
I just told you already about ā1st post ā link at the bottom ā styles for m-e-rā
About old-style badges.
We can NOT use card-mod to style badges (neither old-style badges, nor new ones).
(ok, we can do it by using card-mod-theme which is TOO cumbersome and not as flexible as it could be; but this thread is not about themes)
The only place where we can style them - a custom badge-card.
There is a post about this card.
After 2024.8 it became a bit different:
Assume we have a card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
To style a whole card - we used a mod-card :
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
card_mod:
...
To style a particular badge - we defined card-mod code below a particular entity (same what we could do for badges w/o badge-card):
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
card_mod:
...
(unrelated to card-mod) And we were able to customize a ānameā (also was supported for badges w/o badge-card):
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
name: xxxxxx
And same about changing an icon.
Now, after 2024.8:
- To show an old-style badge - we need to use āhui-state-badge-elementā:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- We still can use mod-card to style a whole card:
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style:
badge-card:
$: |
div#badges {
--label-badge-background-color: cyan;
}
- We can NOT style a particular badge like we used to:
(update: we CAN with this fix)
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod: #does NOT work
style: |
ha-state-label-badge {
color: red;
}
We have to style from the cardās level (cumbersome):
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style:
badge-card $:
hui-state-badge-element:nth-child(2) $:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge .label span {
border-style: dashed;
border-color: green;
color: white;
background-color: magenta;
font-size: 12px;
}
.badge-container .label-badge .value {
font-size: 8px;
}
.badge-container .label-badge {
border-radius: 20% !important;
border-style: dotted;
border-width: 10px
}
.badge-container .title {
color: orange;
}
.: |
ha-label-badge {
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
--ha-label-badge-title-width: 170px;
--ha-label-badge-title-font-size: 8px;
--ha-label-badge-size: 100px;
}
- (unrelated to card-mod) We cannot use the ānameā option to change a displayed name (like for still supported badges in Picture elements card - probably that āhui-state-badge-elementā thing came from that card).
To change a name we have to use same way we use for Picture elements:
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style:
badge-card $:
hui-state-badge-element:nth-child(2) $:
ha-state-label-badge $ ha-label-badge $ .badge-container: |
.title {
color: transparent;
line-height: 0px !important;
}
.title::before {
color: var(--primary-text-color);
content: "New name\A";
line-height: normal;
}
As for changing an icon - this might be possible by card-mod but too cumbersome.
5 Likes
Styling multiline-text-input-card
cardās repo
Default look:
type: entities
entities:
- type: custom:lovelace-multiline-text-input-card
entity: input_text.test_text_255
title: some long long long long long long long title
Header:
card_mod:
style: |
.card-header {
color: red;
background: yellow;
line-height: normal; /* needed for multiline title */
}
ha-card {
overflow: hidden; /* needed for colored header's background */
}
With resized font:
card_mod:
style: |
.card-header {
font-size: 40px;
}
Buttons:
max_length: 250
min_length: 10
...
card_mod:
style: |
.flex {
margin-top: 6px;
--mdc-icon-size: 48px;
}
.flex :nth-child(2 of .button) ha-icon {
--icon-primary-color: magenta;
}
.flex .button-disabled ha-icon {
--icon-primary-color: cyan;
}
Note: āmargin-top: 6pxā is needed due to this issue.
Labels:
max_length: 250
min_length: 10
...
card_mod:
style: |
.text-left {
color: cyan !important;
font-size: 20px !important;
}
.text-right {
color: orange !important;
font-size: 20px !important;
}
.text-right.text-red {
color: lightgreen !important;
}
Textarea:
card_mod:
style: |
.textarea {
border: 2px solid yellow !important;
background: red !important;
color: lightgreen !important;
min-height: 40px !important;
max-width: 100%;
min-width: 100%;
overflow-y: auto !important;
}
ha-card {
background: lightblue;
}
Notes:
- āMax/min widthā are added to prevent a possibility to resize the textarea horizontally (causes glitches).
- āOverflowā added to enable a scrollbar.
Service message baloon:
autosave: true
...
card_mod:
style: |
.flex {
margin-top: 6px;
}
.flex #serviceMessage {
background: lightgreen;
border: 1px solid yellow;
color: red;
font-size: 20px;
}
1 Like
I saw you answering in another post the same, āgo thereā.
How greatfull as I am that you try to help people, maybe just post the link itself.
Clearly this is not enough. Otherwise I would not make the same mistake.
When you are new to something, things might not be as clear as you think they are to them.
Maybe a personal solution for the person posing the question is an idea?
That way, I would get an idea on how this (card-mod) works, and grow from there.
The learning curve is high for Home Assistant, especially when you want to do more than just basic stuff. I really want to learn.
With a personal example, I might think: āoh, thatās how it worksā, now I still donāt understand, and just not using it. And I think the idea of the creator is to have as much people as possible enjoy what he created.
Thank you
come on Yves, what is so difficult about:
ā1st post ā link at the bottom ā styles for m-e-rā
Following that you might even find some other stuff you dont know about, which you would not have found by clicking a link.
Give it some effort
2 Likes
I usually spend home 6 days a month and some amount of this time have access to PC, rest of time answering from a mobile not sitting on a sofa, so finding an exact link may not be easy, describing āhow to find a linkā is easier, sorry for inconvenience, wanted to help.
Itās probably me, very sorry for this.
First post:
Links at the bottom
Not seeing itā¦
@Ildar_Gabdullin Again, I know you are trying to help, but hey, if I donāt see what you are trying to reffer toā¦
Yves, it is here:
You will find there a list dedicated to help beginners.
It will not cover 100% of needs - but gives a starting point for people who want to learn.
Iāve try to modify the style of the section but it didnt work
type: grid
card_mod:
style:
.section { background: red !important; }
cards:
- type: heading
icon: mdi:sofa
heading: Zona Giorno
heading_style: title
badges:
- type: entity
entity: sensor.temperatura_zona_giorno
- type: heading
icon: mdi:fridge
heading: Cucina
heading_style: subtitle
- type: tile
entity: light.terra_cucina_faretti
name: Faretti
show_entity_picture: false
vertical: true
hide_state: false
state_content: state
tap_action:
action: toggle
icon: mdi:lightbulb-variant-outline
layout_options:
grid_columns: 2
grid_rows: 2
- type: tile
entity: light.lampadario_cucina
name: Lampadario
vertical: true
icon: mdi:lightbulb-variant-outline
tap_action:
action: toggle
- type: tile
entity: light.shelly_terra_cucinaled
icon: mdi:lightbulb-variant-outline
tap_action:
action: toggle
icon_tap_action:
action: toggle
vertical: false
layout_options:
grid_columns: 4
grid_rows: 1
- type: heading
icon: mdi:television-classic
heading: Salone
heading_style: subtitle
- type: tile
entity: light.terra_salone_lampadetavolinopiano
icon: mdi:lamp-outline
vertical: true
tap_action:
action: toggle
layout_options:
grid_columns: 1
grid_rows: 2
- type: tile
entity: light.terra_salone_lampadeangolodivano
name: Lampada Divano
icon: mdi:floor-lamp-torchiere-variant-outline
vertical: true
tap_action:
action: toggle
- type: tile
entity: light.terra_salone_colonne
name: Colonne
icon: mdi:pillar
vertical: true
tap_action:
action: toggle
layout_options:
grid_columns: 1
grid_rows: 2
- type: heading
icon: mdi:table-furniture
heading: Pranzo
heading_style: subtitle
- type: tile
entity: light.shelly_terra_vetrinetta
name: Vetrinetta
icon: mdi:glass-wine
vertical: true
tap_action:
action: toggle
- type: tile
entity: light.terra_pranzo_lampadario
name: Lampadario
icon: mdi:ceiling-light-multiple-outline
tap_action:
action: toggle
vertical: true
column_span: 1
this is the result that i want to reach
old-style badges FIX:
title: ...
path: ...
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: green;
}
OR - open ācard-mod.jsā in editor and replace
hui-state-label-badge ā hui-state-badge-element
Ofc it may stop working some day )))
Unfortunately, there is no way to restore a āchange name/iconā functionality.
1 Like