Been trying to do the same and also trying to have a grid card with a background color for the entire grid card. Please share if you find a solution to your problem.
If I have an Entities card with multiple entities, is there a way I can generically or via a template apply the same formatting conditional based on the entity state value across all entities without actually having to place the code multiple times under EVERY entity?
For example.
type: entities
card_mod:
style: |
:host {
{% if states(config.entity) < '4.0' %}
--card-mod-icon-color: green
{% else %}
--card-mod-icon-color: red
{% endif %}
}
entities:
.........
You can either write a macro you can reuse (check the April release notes) or use YAML anchors.
so I think I did find the correct element, but I cant find the correct Dom path in the card_modā¦
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
:host {
--text-field-padding: 0px;
}
.mdc-floating-label {
inset-inline-start: 0px !important;
}
hope anyone can help me out here, find the correct path to that on a regular input_text inside an entities card?
Note I took out the margin, because that also moves the divider to the edge of the card, and thats is not very nice.
thx
Think I figured it out, thanks for the note here on this one! One follow-up question, do I need to reference the import in EACH entity, or can I somehow include the import once on the entity card. I tried to throw it right at top, was the validator was barfing on it.
As you are most probably the one with the most mods, I canāt really get, why you are still having this kind of questions. You should be in the meantime very familiar with it. 
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
:host {
--text-field-padding: 0px;
}
ha-textfield:
$: |
#label {
left: 0px !important;
}
Youād be amazed probably. I mostly use only a couple of very standard mods, which tend to be generic for certain cards.
I hardly use any colorings on entities, and most of them are layouts to adjust margins in embedded entities cards, or take out box-shadow.
Yep. I admit to having a blind spot for the more complex of dom paths and corresponding elements.
The current search ( thx btw!) being a fine example.
I figured to have found the correct element ( and tested that inside Inspector) and you come up with a completely different solution
Making me think , shouldnāt I be able to modify the complete textfield line thereā¦.
O well, Iāll go back to the drawing board ā¦
edit/update
only re-ordered it and it works perfectly
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-textfield:
$: |
#label {
left: 0px !important;
}
.: |
:host {
--text-field-padding: 0px;
}
Now convince the dev Frontend team to option the icon, and do all of this for us
A macro is inline code (as if you copy and paste it), so you need to include it where you use it.
No. Not ccomplete different. It is the same element. But if it has an id (here label) it is easier and most of the times more secure to address it via the id and not via the class, what you wanted to to.
So. Iām addressing the same one, you have found as well. But as it is in the shadow-root, ofc you have to go there.
And then I looked, why it is not left aligend, and voila found the first reason:
and reset to 0. But ofc inset-inline-start is set as well and would then work as well.
So it was the same element, but only differently addressed. And only another way of overstearing. The problem was, that you missed the shadow-root.
1 Like
Hi all,
I am struggling with the tabbed-card to modify the width.The width:of all the 3 Tabs should be less that the the ānormalā 50% within a horizontal stack of 2 cards. I tried: to modify the respective markdown-cards under tha tabs, but this doesn`t help, the tabs will use the complete space. Can someone pleasse help to add the width -code for this card?
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(1) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(1) ha-icon $: |
ha-svg-icon {
color: green;
}
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(2) ha-icon $: |
ha-svg-icon {
color: orange;
}
mwc-tab:nth-child(3) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(3) ha-icon $: |
ha-svg-icon {
color: blue;
}
mwc-tab:
$: |
.mdc-tab__text-label {
text-transform: none;
}
.: |
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 1px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: horizontal-stack
cards:
Hi Marius, sorry for a delay; seems that you already found a solution.
Let us know if not.
I do not understand the initial task.
Please post two pictures: 1st is what you have now, 2nd is what you want to achieve (made in MS Paint or any other SW).
Also, when posting a code - please do not post parts which are not relevant to the issue (avoid cluttering).
Update: from your (is it yours?) github issue I see that you need to manage a width of a card placed inside a horizontal stack.
1st post ā link at the bottom ā styling horiz stack
The initial code from this post is wrong since "config.entity" variable is available only for a particular row, not on the cardās level. So, the only way is proposed by Pieter - define a style for EACH row by using either a custom template or a yaml anchor.
Hi,
ok, I understand, the width is only for lines. In order to split the panel in different sizes, I have to use the layout card and the grid-view. Then I can split the dashboard and I can use different widths for my cards.
But this seems not to work for the swipe card. The different cards within the card are shown beside each other! This means, the swipe card does not support the grid of the layout card or is there something wrong in my config?
Letās simplify a case.
Assume you need a horiz stack with 2 cards: markdown (30%) + tabbed (70%).
This case - as I already said - is described: 1st post ā link at the bottom ā styles for horiz stack.
Alternatively, you may use layout-card and specify widths there.
As for grid card - no need to use it (unless you want to either use a horiz stack or a vertical stack dependently on a client - but same may be achieved by layout-card as well, this is an off-topic here).
Then you said āswipe cardā.
And here I do not understand the issue.
Swipe card is not supposed to contain cards of different widths.
Swipe card may contain several cards - and one of them may be that discussed āhoriz stack = markdown+tabbedā card.
Post a SIMPLIFIED code (not 100500 lines) of a card that you need to create.
ok,
let me try to explain my usecase:
I have two cards in a horizontal alignment.
1st card:
Swipe card, which contains two slides:
type: custom:swipe-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_wz_li
name: Wohnzimmer links
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_wz_re
name: Wohnzimmer rechts
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_kueche
name: KĆ¼che
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_wc
name: GƤste WC
- type: vertical-stack
cards:
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_fynn
name: Fynn
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_schlafen
name: Schlafen
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_bad
name: Bad
- type: custom:mushroom-select-card
primary_info: name
layout: horizontal
fill_container: true
entity: input_select.pr_buero
name: BĆ¼ro
2nd. Card:
Tabbed Card with 3 Tabs, each tab contains a horizontal stack and in each horizontal stack there is a vertical stack. the left half of this horizontal stack contains a mix of markdown and entity card, the right side contains a very huge markdown card. The left side must have a smaller width than the right side due to the fact, that the markdown on the right side has a lot of text as an explaination of the left side.
The split of the the horizontal alignment of the dashboard should also have an asymmetric ratio. The left side with Card 1 e.g. 30% the right side e.g. 70% due to the fact, that the right side contains the tabbed-card with the huge markdown-card on the right side of each tab.
Summary:
I need a solution to split the horizontal stack within each tab in an asymmetrical ratio and I need to split the dashboard with Card1 and Card2 asymmetrically.
Issues during implementation:
If I try to split the dashboard like this:
views:
- theme: Backend-selected
title: Home
subview: true
layout:
grid-template-colums: 30% 70%
grid-template-rows: auto
grid-template-areas: |
"left right"
and try to align card 1 to the left, I absolutely have to use the grid mode of the dashboard. But this means that the two slides of the swipe card are displayed side by side and swiping through the slides is not possible, maybe I have chosen the wrong setting.
The tabbed card is aligned to the right and is displayed correctly.
At the moment I have no clue how to split the horizontal stack asymmetrically below each tab. If someone has a good idea how to solve this usecase, please let me know!
Here is the code of Card 2 which is shorten and only showing the full content of Tab1. I think it is usefull to understand why the asymetric split of the horizontal stack is necessary
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(1) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(1) ha-icon $: |
ha-svg-icon {
color: green;
}
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(2) ha-icon $: |
ha-svg-icon {
color: orange;
}
mwc-tab:nth-child(3) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(3) ha-icon $: |
ha-svg-icon {
color: blue;
}
mwc-tab:
$: |
.mdc-tab__text-label {
text-transform: none;
}
.: |
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 1px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: markdown
content: >-
|{{'<font size="3"><ha-icon
icon="mdi:window-shutter-auto"></ha-icon>
Erdgeschoss</font>'}}|{{' '}}|{{'<font
size="3"><ha-icon icon="mdi:window-shutter-auto"></ha-icon>
Obergeschoss</font>'}}|||
|:----|:----|:----|:----|:----|
|{% if states('input_select.pr_wz_li')==('Garten') %} <font
color="#00CC00"> {{' ā¢ Wohnen links'}} </font>
{%else%} <font color="#7E7E7E"> {{' ā¢
<s>Wohnen</s> <s>links</s>'}}</font> {%- endif %}||{% if
states('input_select.pr_schlafen')==('Garten') %} <font
color="#00CC00"> {{' ā¢ Schlafzimmer'}} </font>
{%else%} <font color="#7E7E7E"> {{' ā¢
<s>Schlafzimmer</s>'}} </font> {%- endif %}|
|{% if states('input_select.pr_wz_re')==('Garten') %} <font
color="#00CC00"> {{' ā¢ Wohnen rechts'}} </font>
{%else%} <font color="#7E7E7E"> {{' ā¢
<s>Wohnen</s> <s>rechts</s>'}}</font> {%- endif %}||{% if
states('input_select.pr_fynn')==('Garten') %} <font
color="#00CC00"> {{' ā¢ Fynns Zimmer'}} </font>
{%else%} <font color="#7E7E7E"> {{' ā¢
<s>Fynns</s> <s>Zimmer</s>'}} </font> {%- endif %}|
|{% if states('input_select.pr_kueche')==('Garten') %} <font
color="#00CC00"> {{' ā¢ KĆ¼che'}} </font> {%else%}
<font color="#7E7E7E"> {{' ā¢
<s>KĆ¼che</s>'}}</font> {%- endif %}||{% if
states('input_select.pr_buero')==('Garten') %} <font
color="#00CC00"> {{' ā¢ BĆ¼ro'}} </font> {%else%}
<font color="#7E7E7E"> {{' ā¢ <s>BĆ¼ro</s>'}}
</font> {%- endif %}|
|{% if states('input_select.pr_wc')==('Garten') %} <font
color="#00CC00"> {{' ā¢ GƤste WC'}} </font>
{%else%} <font color="#7E7E7E"> {{' ā¢
<s>GƤste</s> <s>WC</s>'}}</font> {%- endif %}||{% if
states('input_select.pr_bad')==('Garten') %} <font
color="#00CC00"> {{' ā¢ Bad'}} </font> {%else%}
<font color="#7E7E7E"> {{' ā¢ <s>Bad</s>'}} </font>
{%- endif %}|
{{' '}}
title: 'Schaltzeiten:'
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: input_datetime.eg_up_time
name: 'Auf:'
- entity: input_datetime.eg_down_time
name: 'Ab:'
show_header_toggle: false
card_mod:
style:
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-time-input {
height: 38px;
border: 1px solid transparent;
border-radius: 4px !important;
}
ha-time-input:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.: |
:host {
{% if
is_state('input_boolean.ui_eg_rolladen','off') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--mdc-select-ink-color: var(--disabled-text-color);
--mdc-select-idle-line-color: var(--disabled-text-color);
--mdc-select-dropdown-icon-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--ha-card-header-font-size: 20px;
--ha-card-header-color: #C0C0C0;;
}
- type: entities
entities:
- entity: input_number.shutdown_rollo_offset
name: in Minuten
title: 'Verzƶgerung Rolladen:'
card_mod:
style:
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--ha-card-header-font-size: 20px;
#--ha-card-header-color: #C0C0C0;
}
view_layout:
grid-area: row1-m
- type: markdown
content: >
<font color="#C0C0C0">Die Ćffnungszeiten richten sich nach
dem</font> **<ha-icon icon="mdi:weather-sunset-up"></ha-icon>
Sonnenaufgang**<font color="#C0C0C0"> und werden tƤglich neu
berechnet.</font>
||||
|:---|:---|:----:|
|<font color="#C0C0C0">ā¢ Sonnenaufgang
heute:</font>|{{' '}}|**{{(state_attr('sensor.sa_rollo',
'today')).strftime('%H:%M')}} Uhr**|
|{{' '}}<font color="#C0C0C0">ā¢ ƶffnet aber nicht
vor:</font>||**{{states("input_datetime.eg_earliest_up_time").split('
')[1][:-3]}} Uhr**|
|{{' '}}<font color="#C0C0C0">ā¢ und ƶffnet nicht
nach:</font>||**{{states("input_datetime.eg_latest_up_time").split('
')[1][:-3]}} Uhr**|
{{' '}}
<font color="#C0C0C0">Die SchlieĆzeiten richten sich nach
folgendem Zeitplan:</font>
||||
|:---|:---|:----:|
|**<ha-icon icon="mdi:sun-clock-outline"></ha-icon>
Zeitplan**||**<ha-icon icon="mdi:window-shutter"></ha-icon> ab**|
|{{' '}}<font color="#C0C0C0">ā¢ Sonntag -
Donnerstag:</font>|{{' '}}|**{{states("input_datetime.eg_down_time_werktags").split('
')[1][:-3]}}** Uhr|
|{{' '}}<font color="#C0C0C0">ā¢ Freitag,
Samstag:</font>||**{{states("input_datetime.eg_down_time_weekend").split('
')[1][:-3]}}** Uhr|
|{{' '}}<font color="#C0C0C0">ā¢ vor
Feiertagen:</font>||**{{states("input_datetime.eg_down_time_weekend").split('
')[1][:-3]}}** Uhr|
|{{' '}}<font color="#C0C0C0">ā¢ Silverster ā
Neujahr:</font>||**{{states("input_datetime.eg_down_time_neujahr").split('
')[1][:-3]}}** Uhr|
<font color="#FF0000">ACHTUNG:</font>
<font color="#C0C0C0">beim Ausschalten des Gartenlichts
zwischen</font>
**{{states('input_datetime.on_time_gartenlicht').split('
')[1][:-3] }} Uhr** <font color="#C0C0C0">und</font>
**{{states('input_datetime.off_time_gartenlicht').split('
')[1][:-3] }} Uhr**<font color="#C0C0C0">, wird diese
Rolladengruppe mit</font> **{{
states("input_number.shutdown_rollo_offset")|int }} Minuten**
<font color="#C0C0C0">Verzƶgerung geschlossen.
Ein erneutes Einschalten des Gartenlichts innerhalb dieses
Verzƶgerungszeitraums, verhindert das SchlieĆen der Rolladen. Das
SchlieĆen muss dann manuell vorgenommen werden.</font>
attributes:
icon: mdi:numeric-1-circle
label: |-
Programm
Garten
- card:
type: vertical-stack
cards:
- type: markdown
content: Prgramm 2
title: Rolladen Programm 2
attributes:
icon: mdi:numeric-2-circle
label: |-
Programm
Sonnenstand
- card:
type: vertical-stack
cards:
- type: markdown
content: Programm 3
title: Rolladen Programm 3
attributes:
icon: mdi:numeric-3-circle
label: |-
Programm
Schubert
view_layout:
grid-area: right
I got some great help here recently but ever since I have been struggeling how to get H1, H2ā¦ in here so that I can control their appearance. Thought it would be simple but Iām failingā¦
Would really appreciate if someone could help me out adding H1 as an example in the code below.
type: custom:mod-card
card_mod:
style:
hui-markdown-card:
$: |
ha-card {
margin: 17px 15px 0px 15px;
background: rgba(250, 250, 250, 1.0);
box-shadow: none;
font-size: 15px;
font-family: 'Segoe UI Light';
color: #404040;
font-weight: 300;
text-align: left;
border-radius: 15px;
--mdc-icon-size: 35px;
}
Edit:
This is what Iām trying to do but Iām lostā¦ 
card_mod:
style:
hui-markdown-card:
$: |
ha-card {
margin: 17px 15px 0px 15px;
background: rgba(250, 250, 250, 1.0);
box-shadow: none;
font-size: 15px;
font-family: 'Segoe UI Light';
color: #404040;
font-weight: 300;
text-align: left;
border-radius: 15px;
--mdc-icon-size: 35px;
}
ha-markdown $: |
h1 {
font-weight: 200;
color: 404040;
margin: 0px;
font-size: 30px;
}
h6 {
margin: 0px;
font-size: 14px;
font-family: 'Segoe UI Light';
color: #404040;
font-weight: 400;
}
Hi all,
I have tried do simply the usecase and maybe some knows, what is going wrong
I have a very simple tapped-card and tried to align this on a clean dashboard.
The setting of the dashboard:
views:
- theme: Backend-selected
title: Home
subview: true
layout:
grid-template-colums: 30% 70%
grid-template-rows: auto
grid-template-areas: |
"left right"
type: custom:grid-layout
badges: []
cards:
The card:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(1) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(1) ha-icon $: |
ha-svg-icon {
color: green;
}
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(2) ha-icon $: |
ha-svg-icon {
color: green;
}
mwc-tab:nth-child(3) $: |
.mdc-tab__text-label {
font-size: 12px;
white-space: pre;
}
mwc-tab:nth-child(3) ha-icon $: |
ha-svg-icon {
color: green;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: vertical-stack
cards:
- type: markdown
content: Prgramm 1
title: Rolladen Programm 1
attributes:
icon: mdi:numeric-1-circle
label: |-
Programm
Garten
- card:
type: vertical-stack
cards:
- type: markdown
content: Prgramm 2
title: Rolladen Programm 2
attributes:
icon: mdi:numeric-2-circle
label: |-
Programm
Sonnenstand
- card:
type: vertical-stack
cards:
- type: markdown
content: Programm 3
title: Rolladen Programm 3
attributes:
icon: mdi:numeric-3-circle
label: |-
Programm
Schubert
view_layout:
grid-area: right
A duplacated card with a left alignment has also been created.
What i really do not understand is, why both cards will the same width due to the fact, that the dashboard is configured with a ratio of 30:70
How can i modify the cards to have the correct ratio?
Spartacus
How would I change the color of the light switch button background to be the same color as the fan controls background?
Also, would there be a way to make this light button tack onto the end of the fan control buttons so it just looks like one control?
type: grid
square: false
columns: 1
cards:
- type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root > * {
--ha-card-border-width: 0px;
}
.: |
hui-vertical-stack-card {
--vertical-stack-card-margin: 3px;
}
ha-card {
background-color: rgba(50,50,50,0.4);
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
--ha-card-header-color: white;
--ha-card-background: rgba(50,50,50,0.4);
}
card:
type: vertical-stack
title: Primary Bedroom
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card$: |
hui-tile-card {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 150%;
flex: auto !important;
}
hui-button-card {
margin-left: 10px !important;
margin-right: 10px !important;
margin-top: 63px !important;
margin-bottom: 0px !important;
height: 43px;
width: 115px;
flex: auto !important;
}
.: |
ha-card {
}
card:
type: horizontal-stack
cards:
- type: tile
entity: fan.master_bedroom_fan
name: Ceiling Fan & Light
features:
- type: fan-speed
- type: button
entity: light.master_bedroom_light
name: Ceiling Fan Light
show_state: false
show_name: false
- type: entities
entities:
- entity: sensor.aht21_sensor_temperature
name: Temperature
- entity: sensor.aht21_sensor_humidity
- entity: sensor.ens160_sensor_air_quality_index
- entity: sensor.ens160_sensor_eco2
- entity: sensor.ens160_sensor_total_volatile_organic_compounds
Hi, Iāve figured out how to change background color on state, but how do I also make the icon color change along with it? Thanks!
type: custom:mushroom-entity-card
entity: lock.back_door_lock
secondary_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
primary_info: name
fill_container: true
name: Back
icon_color: grey
card_mod:
style: |
ha-card {
{% if is_state('lock.front_door_lock','locked') %}
--ha-card-background: rgb(212, 80, 0); {% endif %}
}```