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;
}
Any ideas on that?
at least the 1st ā|ā should not be there.
- Read about āyaml multilineā about using the ā|ā with strings.
- Read docs again:
1 Like
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:
After applying height to canvas
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 a height of ācanvasā - not correct (as you can see yourself).
- Safari?
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.
Hi there!
Is there the option to have a shadow for icons, e.g. in buttons?
Tanky you for your kind help!
There is no outer or inner.
If you set a CSS style for a html-element (here ha-card) it is applied to all elements on and under the dom-level of that type (if this is not inside a shadow-root).
This is the case here
If you donāt want it, you have to narrow it down to the element, you only want to set the CSS.
Nere e.g. via class ātype-entitiesā. So obviously, this would help:
card_mod:
style:
.: |
ha-card.type-entities {
border-width: 10px;
}
No, isnāt. It is how CSS is working.
Ah now I got it. I was wondering why the simple-clock-card css is not applied / did not āoverruleā the entities card one. Border gone now. But I think I did not fully understand it because: CSS applied to the simple-clock-card has still an effect on the entities-card. That makes no sense to me.
Example, as Iām still trying to relocate the simple-clock card as shown here:
So even float and top (still experimenting with the best way to precisely relocate elements) are only applied to the simple-clock-card, it has an effect on the full card. I guess because ha-card actually IS the whole card? Butā¦ the indenting clearly is on the simple-clock-card. Weird.
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: 3px;
border-width: 0px;
#padding: 3px;
#margin-left: -5px;
#text-align: right;
#margin-top: -10px;
#margin-bottom: -10px;
#position: relative;
float: right;
#right: -30px;
top: -30px;
}
card_mod:
style:
.: |
ha-card.type-entities {
border-width: 1px;
}
Result:
Same reason as described above. There is no ālevelā. There is one CSS per element, class, id and the separation is only there if you have shadow-roots as separation. But between these two ha-card element there is no separation.
So it doesnāt matter where you ingest the style for ha-card, it is relevant for all accessible parts for the dom. You see here that it is ingested on the right ālevelsā, but is applied then combined for every ha-element in the same dom part/shadow root.
And as above, if you donāt want it, define it more separated here as well, either via starting class or whatever else.
Thanks for explanation. Unfortunately that CSS and DOM navigation stuff always was and likely will be a mystery to me. I just wanted to place that one card on another place. Because of
it seems like the answer is: there is no solution. Unbelievable, as in theory itās ājustā putting this from here to there. Oh man, annoying CSS.
???
I already gave the solution. And mentioned it again. And you are using it for the border.
Address it not (only) via the element-name, which is not unique, but address it via class, path, id, name, ā¦ => here class.
1 Like
Hey, I am trying to make an icon linear-gradiant in color on certain states in both markdown and mushroom cards, but somehow I can make the background in my mushroom card icons linear-gradient, but not the icon itself 
can somebody help me out with this?
- type: custom:mushroom-template-card
entity: fan.tv_fan
primary: TV Fan
layout: vertical
icon: |-
{% if is_state('fan.tv_fan', 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state('fan.tv_fan', 'on') %}
green
{% endif %}
card_mod:
style: |
ha-card
{
background: rgba(0,0,0,0);
}
ha-state-icon {
background: linear-gradient(#e66465, #9198e5);
{{ 'animation: spin 1s linear infinite;' if is_state('fan.tv_fan', 'on') }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
does anyone know why iām not able to make this card scrollable, it just shows as one long vertical stack
type: custom:local-conditional-card
default: hide
id: ymovie
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:close
icon_color: rgb(139, 51, 51)
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- sidebar
- chores
- type: custom:gap-card
height: 26
- type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-content {
max-height: 500px;
overflow-y: scroll;
}
card:
type: vertical-stack
cards:
- type: vertical-stack
title: BadevƦresle
cards:
- !include
- ../../lovelace/templates/chores.yaml
- name: RengĆøre vask
sensor_name: chores_clean_zink_bathroom
warning_before: 2
cycle_days: 7
icon: mdi:countertop-outline
- !include
- ../../lovelace/templates/chores.yaml
- name: Toilet
sensor_name: clean_toilets
warning_before: 2
cycle_days: 7
icon: mdi:toilet
- !include
- ../../lovelace/templates/chores.yaml
- name: Spejle
sensor_name: clean_mirrors
warning_before: 2
cycle_days: 7
icon: mdi:mirror-rectangle
- !include
- ../../lovelace/templates/chores.yaml
- name: Vaskemaskine
sensor_name: clean_washer
warning_before: 2
cycle_days: 18
icon: mdi:mirror-rectangle
- !include
- ../../lovelace/templates/chores.yaml
- name: Rist
sensor_name: clean_drain
warning_before: 2
cycle_days: 30
icon: mdi:hand-wash
```You mean this one?
Works. Finally I managed to relocate that cardā¦
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.type-entities {
border-width: 1px;
margin-bottom: -55px;
}
ha-card.type-custom-simple-clock-card {
letter-spacing: 3px;
border-width: 0px;
#margin-bottom: -50px;
float: right;
#right: -30px;
top: -51px;
}
And indeed I learned something. I really thought (for years!) the style needs to be applied on every element with the proper indenting. I have so much code with plenty of
card_mod:
style:
...
Now I know I can add just one and address the elements simply by their class names - way easier, in most cases.
Can we show elements / hide stuff based on
- HA user
- screen size
- ā¦
?
I got an element which is only useful for one single device/user, on all the others it wastes a lot of (rare) screen space.
(found custom card, not sure yet if it provides what Iām looking for: GitHub - iantrich/restriction-card: š Apply restrictions to Lovelace cards)
(Update: not it canāt as it needs an entity. I donāt have an entity āuser nameā or āscreen sizeā.)
Edit: thanks to the words of š¹ Card-mod - Add css styles to any lovelace card - #5474 by antsuc I reminded that HA Core 2023.11 has exactly what Iām looking for. Guess I mixed it up with some CSS stuff I came across recently.
Iām not really sure this is the place you should be asking this question, however:
You can use a Conditional Card to wrap whatever youāre trying to hide/show.
There are a few conditions you can select from, two of them being Screen Size and User.
There is even an AND condition so you can say if USER A and on a tablet device.