Is it possible to use arribute of a device to drive card background color?
I am quite happy with my theme setup right now, with active cards having a highlighted color. However, my smart ovens only shows activity through attribute.
I proposed to test it w/o a theme it since I thought that there could be some problem with your styles.
You need a styles for the oven entity only - then you should ālimitā it correspondingly - like it is done here for a fan entity only:
card-mod-row-yaml: |
hui-generic-entity-row $: |
state-badge {
{% if config is defined %}
{% if config.entity is defined %}
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 3s infinite linear;
{% endif %}
{% endif %}
{% endif %}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Iāve been using card-mod for quite awhile, but Iām just getting into creating some themes. Unfortunately, I can get neither my icons to change color or to get the battery level bars to appear using the theme below:
I expect the icons in my entities cards to be white, and to change to red when activeā¦ but the icons are actually a dark grey color irrespective of state. And the battery bars, wellā¦ no sign of those. I welcome any input.
A very humble proposal - to describe the issue you may safely remove everything between these lines since it is not related to card-mod.
The post becomes shorter.
Also , the ābatteryā variable seem be true or false - do not think this is what you need.
Great idea - proposal accepted, see below. I originally included everything in case something else was impacting my icon colors, but admittedly thatās not related to card-mod (I donāt believe).
iPhone_Default:
card-mod-theme: iPhone_Default
background-image: "center / cover no-repeat fixed url('/local/images/tall/background1.jpg')"
lovelace-background: var(--background-image)
primary-color: "#FFFFFF"
light-primary-color: "#888888"
primary-background-color: "#e5e5ea"
secondary-background-color: rgba(255, 255, 255, 0.9)
divider-color: "#FFFFFF"
accent-color: rgba(255, 159, 9, 1)
[ ... ]
# States and Badges
state-icon-color: white
state-icon-active-color: red
state-icon-unavailable-color: var(--disabled-text-color)
paper-item-icon-active-color: "#FFFFFF"
card-mod-row: |
:host {
display: block;
{% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
{% if battery %}
background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
{% endif %}
}
I started using this today, and using the art-nouveau theme, I canāt see the background image. If I use a local image, one that works outside of the theme, still nothing. If I use background outside the theme, it appears for a split second.
Iām struggling with adapting my old solution as well.
Placing is set in
And this variable is displayed as inherited from ha-dialog as before. But changes to this are not taken into account anymore.
The below if from card_mod but the above is used now, coming from HA.
Even if I try to ingest in .mdc-dialog__container directly
ha-dialog:
$: |
.mdc-dialog__container {
align-items: center !important;
color: red !important;
}
it is not in css/dom at all.
Perhaps Ildar has an idea or explanation about the behavior?
Update: Easier than expected.
.: |
ha-dialog {
--vertical-align-dialog: center !important;
}
I seems that they have corrected a typo, which I didnāt see neither in the past nor in the screenshow but used from the old definition. If I corrected it now as well ā¦
But I still not understand why I canāt shadow-root in ha-dialog.
on all my button-card tooltips throughout the dashboards, I suddenly realize the tooltips on the main menu items are not using this. Having a look into the card-mod-theme variables I couldnāt find the right place (if at all possible) to add this to the main mods, to make the tooltips immediate.
Would anyone be able to help me out here?
Ive tried to add it to either of these:
/* Set the color of the currently selected tab indicator. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--text-primary-color);
}
/* Set the color of the currently selected tab indicator.
Set size of the currently selected tab icon*/
paper-tab[aria-selected=true] {
color: gold;
background-color: rgba(var(--primary),0.3);
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
but not successfullyā¦they need an actual click for that. The tooltip is a hover
I previously used card-mod to increase the size of the icons in my header bar, but at some point I lost that change. I thought @Ildar_Gabdullin posted about it, but I cannot find that in here either.
How do you change the size of the header bar icons?
I do not remember about changing an iconās size on a header.
But you may try it yourself using my examples of customizing a header:
card-mod thread ā 1st post ā link at the bottom ā examples for themes
However, it doesnāt hide them in the Settings page.
I noticed a different path, (ha-panel-config vs. ha-panel-lovelace) but I donāt know how to approach it:
How do I modify that to insert into a theme to change the background for all of my popups? This suggests I just add āāā in front of background, but that does not work. Iāve tried a few other variations which also donāt work. Thanks.
