guys, how can i check if I’ve installed the module correctly. I went into my ssh terminal, went into the config directory, created a www directory, cd’d into that and ran the git clone command.
I’m now trying to add the bit from style… onwards (intend is to hide the keypad)
type: alarm-panel
entity: alarm_control_panel.master_alarm_panel
name: Master Panel
states:
- arm_home
- arm_away
- arm_night
style: |
#keypad, #alarmCode {
display: none !important;
}
I would like to modify the standard light card for a dimmer with three goals:
I managed to achieve the first two but I’m stuck with the third. Any advice?
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
Inspecting the document, I can see that a filter: on ha-icon-button is responsible for the changing color. However, setting it to none doesn’t seem to have an effect:
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none;
}
I feel like missing something obvious.
The filter is responsible for the brightness; you also need to set color.
I don’t think it is that easy. The following has no effect:
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none;
color: green;
}
Use !important
Thanks, yes, that was it!
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none !important;
}
Thank you very much! I am wondering where I can put the Variable so that I can reuse it in other cards.
In your theme.
Can you break down how you got to this selector? I tried to apply my selector knowledge this morning and did not get the same result (or a working result).
Oh, that was an old post. Could you share what you came down to?
I don’t remember what I originally had. But I’m wondering how you get the initial selector point. How did you know to use layout-card$?
That was the name of the card’s element.
So where’s the $ come from, why is it at the end? Is that something new in the custom card?
This was the old syntax:
style:
element-card:
$:
another-thing:
$: |
This is the new syntax:
style:
element-card$another-thing$: |
Ah ok, thanks
Could you explain what means “the new syntax”, shall we use it from now, will it work everywhere?
And to add to that: Will the old syntax stop working, or is the new syntax more like syntactic sugar?
Could you explain your question more?
If you want.
I don’t know, but in all of my uses so far it’s worked.
I think it will still work.
It does fix a problem with the old syntax that stopped you from shadow-rooting into an element inside of a shadow-root
Please give me an example of this, I did not get the point, thank you!
This originally worked, then stopped working:
style:
element-card:
$:
another-thing:
$: |
When the new syntax came out, it worked.