Right click brings up no right click menu when on the dashboard screenshotted in the last post
EDIT:
Yeah, I am definitely not getting a right click menu when right clicking on things within the minimalistic card but if I right click on buttons etc. on the alarm panel just above, I get the inpect button at the bottom of the list.
Below is the right click menu when right clicking on the alarm panel but no right click menu if I right click on any of the minimalistic cards.
Now I found it. There is a button you have to select at the top of the right menu before you can “inspect”
This is the element of the bulb icon for “back patio”
<ha-svg-icon></ha-svg-icon>
:host {
display: var(--ha-icon-display,inline-flex);
align-items: center;
justify-content: center;
position: relative;
vertical-align: middle;
fill: var(--icon-primary-color,currentcolor);
width: var(--mdc-icon-size,24px);
height: var(--mdc-icon-size,24px);
}
style attribute {
color: var(--state-light-off-color, var(--state-light-inactive-color, var(--state-inactive-color)));
}
a bit higher, ha-state-icon
Ahh, I understand. I was levels deep into tree
ha state icon:
color: var(--state-light-off-color, var(--state-light-inactive-color, var(--state-inactive-color)));
Good, now check my posts above: one with a screenshot of Code inspector, another one with a hidden code. Compare with your research.
Ok, I understand your screenshot now.
Now I am looking at the hidden code:
I don’t fully understand it.
Why does each button have?
ha-state-icon
ha-icon
ha-svg-icon
Also, what is “!important”?
I do have the below working. It changes each icon to black. If I were to only want to change one icon to black, would I then move card_mod to the entities area of the card? Or this is not doable?
What it is doing now is exactly what I was asking for help on. The additional questions are just because I don’t fully understand yet.
type: custom:minimalistic-area-card
card_mod:
style:
.buttons ha-icon-button:not(.state-on):
state-badge $: |
ha-state-icon {
color: black !important;
}
title: Back Patio
area: back_patio
shadow: true
hide_unavailable: true
state_color: true
darken: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-patio
entities:
- entity: light.all_back_patio_lights
- entity: switch.back_patio_fountain
- entity: switch.back_patio_speaker_power
What language is this? Where do I learn how to understand/ write this. Like below, how did you know to do .buttons… and the “not”
state-badge $: |
ha-state-icon {
color: red or whatever !important;
Thank you for teaching me @Ildar_Gabdullin . Very thankful for your help.
3 sources of info:
– card-mod github repo - basic docs
– cs: what is it, how it works, … - google
– examples: card-mod thread → 1st post → link at the bottom (select any example, reproduce it on your setup - see how it works)
As I said - use Code Inspector to determine a path to your element.
“aaaaa:not(.xxxxxx)” = select element “aaaaa” if it does not have class “xxxxx” (here - if not switched ON).
The way “define style on an element/row level” only works in some cards - like in Entities, Glance, Picture elements.
In most cases (also to define card-wide styles) you have to define a style on a card level.
Like overriding similar more prioritized style: it was “green” - but you override it by “red”.
Thank you for these responses! I will be looking more at this throughout the day tomorrow!
