Hey all, I am new to HA and am having trouble with creating a theme with a side panel. I finally figured out how to create a new theme and move the side bar to the left using card-mod-theme. Now I am trying to change the background of the sidebar to a gray color; or change the background of a vertical stack card using this theme to a gray color. Could anyone help me with this? I am sure Iām missing something simple, but canāt seem to find it on Google anywhere. Here is what I currently have for trying to turn the background of a vertical stack a new color,
I am trying to hide as much as I can from the new stats in more-info in version 2022.11.
Since you can click min/mean/max and show/hide the values,
could you force it to always only show mean (or state if there are no min/mean/max) ?
Like changing the default value from āshow all threeā to āshow only meanā.
And as a separate question, could we hide the <div class="chartLegend"> to get rid of the legend?
card-mod thread ā 1st post ā link at the bottom ā styles for statistics card
Do not think this can be controlled by CSS.
You cannot hide some graph since it is a ācanvasā element.
And you cannot simulate āswitched-offā legendās element too.
Another point is that āmean graphā is NOT a āreal graphā at all - it is absolutely wrong idea to show approximate data in more-info popup.
So, the right way is āshow a real history graph (like it was before 2022.11)ā and (optionally, and only if available) āshow statistical graphā (probably with min/max/mean).
Thanks, I didnāt know about that other thread.
I really donāt understand the change to statistics in more-info but balloob made it quite clear there will be no reverting to the old state graphs and there will be no options to use states. So until someone invents a replacement for all more-info, Iāll try to make the best of it.
I have tried to read up on how it works, but I just donāt get it yet so I donāt know how to use the example in my scenario (within more-info). I hide a lot of other elements, but thatās thanks to you and Mariusthvdb and hours of trial and errorā¦
Once again a new HA release has changed how more-info popups show up. They for some reason changed the position yet again, while it alread was changed in september and it broke. Can someone pinpoint me what the correct code now is to center more-info dialogs?
.: |
ha-dialog {
--vertial-align-dialog: center !important;
}
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.
