1st post â Link at the bottom from Ildar â Entities Card.
Arenât those borders rather than box shadows?
I think your code is working. Try adding border: none; as well
1 Like
I have created a 5 column grid card to display a mix of button cards and mushroom chips. I am trying to use custom:mod-card to modify two aspects of the grid. My code successfully changes the font size and margins of the card header (i.e.title) but try as I might I cannot get a Border drawn around the whole grid card. This is relevant part of my code which is at the beginning of the card configuration:
type: custom:mod-card
style:
hui-grid-card$: |
.card-header {
font-size: 15px !important;
margin-top: -12px !important;
margin-bottom: -15px !important;
}
.grid-container {
display: grid;
border: 30px solid red;
}
card:
type: grid
columns: 5
square: false
title: Living Room
âŚetcâŚetc
The .card-header part of the code works but when I enter the grid-container part of the code a border sometimes flashes on then disappears. I therefore request help on how to get the border drawn around the whole grid (i.e. around the grid-container)
Hi Ildar,
using this now for the input_text
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
hui-generic-entity-row {
margin: 0px -12px;
}
:host {
--text-field-padding: 8px;
}
and its almost ok⌠Id love to also move the Label to the same 8px padding, but can not find the correct element.
would you know which element I should target?
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