Not exactly if I understood you correctly.
In UI in “yaml editor” you CANNOT use “!secret”, “!include”.
They can only be used in yaml-made-dashboards, not in UI-made ones.
As for yaml-anchors - you MAY use them in UI “yaml-editor”.
But since after saving the yaml code is converted to json, all your anchors will be converted to a code before converting to json, so these anchors will not be restored as anchors after reopening the UI “yaml-editor”.
type: custom:more-info-card
entity: light.luz_sofa
style: |
state-card-content { display: none }
How to remove the title Sofá please.
When I used card-mod with vertical-stack, it turned everything into a single column, how to fix it?
type: custom:mod-card
style: |
ha-card {
}
card:
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
type: custom:mod-card
style: |
ha-card {
}
card:
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
Fill a bug report on github if it is not made yet.
Try using a custom:layout-card to place these cards in diff columns.
Does anyone know how to reduce the vertical spacing in the to do lists (former shopping list)?
Thank you, a lot, in advance!
All the best
Benedikt
Why does the outer card_mod applied to the entities card also affect the child elements (here: simple-clock-card GitHub - fufar/simple-clock-card: Simple clock card for Home assistant lovelace)?
border-with: 0px; is not respected here 
type: entities
title: 🕒 Uhrzeit
state_color: true
show_header_toggle: true
entities:
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 1.5rem
paddingLeft_size: 10px
paddingRight_size: 10px
paddingTop_size: 10px
paddingBottom_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 1px;
border-width: 0px;
#padding: 3px;
margin-left: -5px;
#text-align: right;
#margin-top: -10px;
}
card_mod:
style:
.: |
ha-card {
border-width: 1px;
}
Obviously I want to remove the border from the inner card.
Even with “important”?
Yes. !important on the inner card_mod is automatically also applied to the outer card_mod.
Other styles also affected. Always applied to both inner and outter card. Crazy.
(note: final goal by the way is to position the clock card right next to the header text on the right side)
Yes, I have HA v2023.4.0 and card_mod v3.2.4.
I also applied
ha-card {
background-color: red;
}
and I see the background changes, also set
height: 150px !important;
and still height is not changed (stays 320px):
150px the effect is applied, but during some internal refresh cycle it is set back to 320px.What about other styles?
Could you test some amount of styles from a consolidation post (1st post → link at the bottom)?
May be your issues could be explained by old SW versions; or it also could be a particular browser issue.
I it possible to target only the energy dashboard through the theme file?
I would like to add --masonry-view-card-margin: 8px 4px; to the host of <ha-panel-energy>.
I’ve been trying stuff like this but havent really been able to get it working.
card-mod-theme: Rounded
card-mod-ha-panel-energy: |
:host {
--masonry-view-card-margin: 8px 4px;
}
I have checked the link with other style examples, trying to find a good candidate to play with. The graph has a legend, so I thought it should be pretty easy to change the font size on it. I tried two possibilities (with and without using $:) and none of them worked 
Have I done a stupid mistake in syntax? Otherwise I am puzzled…
P.S. Tested in Chrome and Firefox with same (negative) result.
P.P.S. ivory background worked just fine.
- type: history-graph
entities:
- entity: sensor.current_uv_index
hours_to_show: 48
refresh_interval: 60
card_mod:
style: |
ha-card {
background-color: ivory;
}
.chartLegend {
font-size: 2em !important;
}
state-history-charts $:
state-history-chart-line $:
ha-chart-base $: |
.chartLegend {
font-size: 2em !important;
}
state-history-charts $:
state-history-chart-line $:
ha-chart-base $: |
.chartContainer {
height: 10px !important;
}
Because this is wrong.
1st post → link at the bottom → other stuff → how to combine ha-card & shadowRoot
I see, the syntax is not so simple as I would think. I have found the post (what exactly are $ | .: doing and how do I know when to use them or not?) and re-read DOM Navigation. OK, I have to step back and understand it better. So I have removed all styles and tried to start from a blank page.
When I specify:
card_mod:
style: |
state-history-charts {
background-color: red !important;
}
it works just fine, but when I try to step into first #shadow-root it does not work:
card_mod:
style: |
state-history-charts $: |
.entry-container {
background-color: red !important;
}
at least the 1st “|” should not be there.
Ah, now I see the issue! This attempt actually applies the style
card_mod:
style:
state-history-charts $ state-history-chart-line $ ha-chart-base $: |
.chartContainer {
background-color: ivory;
height: 100px !important;
}
but it does not work correctly, as the height should be equally applied to canvas (at least in my case) as otherwise canvas overflows the card:
card_mod:
style:
state-history-charts $ state-history-chart-line $ ha-chart-base $: |
.chartContainer {
background-color: ivory;
height: 150px !important;
}
canvas {
height: 150px !important;
}
the result is not eye-pleasing as the canvas is simply unproportionally stretched:
I think that was a very good exercise for me, but I need to look for a component that correctly/natively supports height setting…
Changing only .chartContainer does not work well: the canvas starts to overflow. Very likely that depends on HA version (I don’t have a latest-greatest but neither too old). But if that behavior is so tightly linked to HA version, I can imagine how easily it may break with future HA updates.
Tested both on Chrome and Firefox – both do not work well. Safari is sort of odd player.
Mainly it depends on a client browser.
I am pretty new to HA and to CSS. I am using collapsable-cards with a mushroom template card and I’m having a hard time getting it to look right. I could use some guidance in how to use the browser tools to identify the element that I want to style. Then I need to know which CSS attribute (not even sure that’s the right term) to use to get the styling that I want. In the screen shot below, I would like to have the mushroom-template card (Equipment Room) take up the entire width of the collapsible card so that it butts right up against the expand/collapse arrow. Then I would like to put a small gap between each of the child elements. I know that I will want to do some kind of justification as well. Not necessarily just looking for answers but more how can I figure this out myself. Thanks.
