Can somebody help me hiding (display: none) the icon and name of an entities entity row?
I canāt manage to get the selector (tree) right. Thanks!
Hello everyone. Please help me get rid of box shadows. I use the following template:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: soggiorno
icon_color: blue
multiline_secondary: true
primary: ŠŃŃŠ°Š»ŃŠ½Ń
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ewelink_th01_temperature_2
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: none;
}
- type: entity
entity: sensor.ewelink_th01_humidity_2
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: none;
}
alignment: center
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?