Hi,
Anybody able to change the font-family of new titles badges in 2024.10.0, in section view?
I was able to fix the title itself font family, but not able to get to badges.
Meaning is in theme of course.
Thanks in advance.
at the end of the day, I made 2 classes:
ha-card.class-section-heading .container {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 24px;
padding: 12px 8px 12px 12px;
}
ha-card.class-section-heading-no-color .container {
/*background: var(--background-color-off);*/
/*--ha-heading-card-title-color: var(--text-color-off) !important;*/
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 24px;
padding: 12px 8px 12px 12px;
}
so I can do a generic:
type: heading
heading: Schakelaars
heading_style: title
card_mod:
class: class-section-heading
but, when I require some colorized notification in that header, I can combine the class with a local card_mod for the colors, depending on a state:
- type: heading
heading: Aanwezigheid
heading_style: title
card_mod:
class: class-section-heading-no-color
style: |
ha-card.type-heading {
{% set thuis = is_state('binary_sensor.familie_thuis','on') %}
background: {{'green' if thuis else 'dimgray'}};
--ha-heading-card-title-color:
{{'var(--active-color)' if thuis else 'black'}} !important;
}
for now this is flexibility enough.
I do still hope to be able to find the element for the individual entity in the badges in the header
Hello and pleaseā¦ is possible styling new badge?
type: entity
show_name: false
show_state: true
show_icon: true
entity: input_boolean.vacuum_automaticke_vysavani_zahajeno
color: ""
card_mod:
style:
/*code*/
HA 2024.10 has added āfrom the topā open animations to all dialog/more-info popup windows (or made them more visible/annoying than before). Is it possible to remove them or adjust animation timing with a card mod theme?
I canāt figure out what I should change.
It could be caused by a slower opening the popups. Check if this happens on a fresh HA setup or in a safe mode.
1 Like
no, itās new, and though initially I liked it on the restart menu, (for me that is not inside the user side of HA), I have grown to find them truly obnoxious in all confirmation popups etc etc.
There must be some setting we can kill the animation forā¦
letās find the PR that added it
suppose its the move to ha-md-dialog
and
I really do not recall a similar PRā¦ Will check it.
(have not noticed any changes in showing popups by my eyes)
It happens also in safe mode. Even restart options popup appears slowly/animated.
I also found only this md-dialog-box related PR but not sure if it is relatedā¦
yeah its here alright: frontend/src/components/ha-md-dialog.ts at 365b7129767cbc5278fe16eeed71689be771ae42 Ā· home-assistant/frontend Ā· GitHub
1 Like
Animation also makes more info charts to appear laggy. First I thought that my database was working very slowly but itās just the animationā¦ I can also see right side scrollbar appearing and then disappearing when the popup is fully shown. It looks bad.
If this is not only about an animation but also about a general look - would be great to have 2 pictures side-by-side for comparing: old vs new.
(cannot do it myself, left & do not have access to PC)
at least I have my squared boxes back
md-dialog-container-shape-start-start: var(--ha-card-border-radius)
md-dialog-container-shape-start-end: var(--ha-card-border-radius)
md-dialog-container-shape-end-start: var(--ha-card-border-radius)
md-dialog-container-shape-end-end: var(--ha-card-border-radius)
no other overall variable, had to set all cornersā¦
the silly animation is still there though
Suggest you to ask in the card-mod thread, this is about themes.
Also, check the 1st post in the card-mod thread - link at the bottom - weather card, it may be useful.
hello, someone can help me with the footer navigation bar?
my code:
type: custom:mod-card
style:
ha-card:
position: fixed
bottom: 0px
left: 0px
width: 100%
height: 60px
display: flex
justify-content: space-around
align-items: center
background: var(--primary-background-color)
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1)
z-index: 999
card:
type: horizontal-stack
cards:
- type: button
icon: mdi:lightbulb
name: Luci
tap_action:
action: navigate
navigation_path: /lovelace/lights
show_name: true
show_icon: true
- type: button
icon: mdi:home
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
show_name: true
show_icon: true
- type: button
icon: mdi:menu
name: Menu
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Menu Laterale
card:
type: custom:sidebar-card
show_name: true
show_icon: true
it works but donāt stay at bottom, I use sections. thanks
Thank you. I will delete my posts here.
hopping from individual mods on each and every fold-entity-row, was hoping once more (time has passed) to write a class for them in the card-mod theme settings. Since Iāve only found or use classes on cards, I am not really sure how to set out and change
card_mod:
style:
ha-icon:
$: |
ha-svg-icon {
color: var(--primary-color);
width: 24px;
}
into a class for the fold-entity-row card.
(I have a manually edited js resource that fixes it in the card itself, but really want to go away from manual edits as much as possible)
Can this be done? (because now I have to add 326 times
card_mod: !include /config/dashboard/card_mods/fold_arrow_icon.yaml
to my type: custom:fold-entity-row cardā¦
I went back to this earlier post but do not believe that ended in success?..
Found an inconsistency colorizing the icon of the Energy menu item in the left sidebar
On any of menu items we can do
a[data-panel='energy'] paper-icon-item ha-icon {
{% set netto = states('sensor.netto_verbruik')|int(0) >= 0 %}
color: {{'saddlebrown' if netto else 'var(--power-color)'}};
}
but using that on the Energy item nothing happens, no even when setting a direct color like:
a[data-panel='energy'] paper-icon-item ha-icon {
color:red;
}
Opening the Inspector on the item, it appears we need to target the ha-svg-icon hereā¦
and yes
a[data-panel='energy'] paper-icon-item ha-svg-icon {
color: {{'saddlebrown' if netto else 'var(--power-color)'}};
}
makes it happen.
Dont think I had read or experienced that before here, so as a FYI: colorizing the Energy menu-item requires targeting a non-default property ha-svg-icon where for all other menu-items we need ha-icon
Not sure if this is a bug or intended. Keep an eye open for changesā¦
can we set a ābadgeā on the menu icon? expanded or not expandedā¦:
Ive tried the usual
.menu ha-icon-button {
color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}} !important;
}
:host(:not([expanded])) .menu ha-icon-button:after {
content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
{{'\A ' ~ m_alerts if m_alerts > 0 }}";
{{style_badge_not_expanded}}
color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}} !important;
}
which doesnt work obviously.
the style template should take care of the positioning and is also used on the non-expanded menu items:
Id love to have the expanded alert I use:
.menu .title:after {
content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
{%- set phrase = 'Alert: ' if m_alerts == 1 else 'Alerts:' -%}
{{'\A ' ~ phrase ~ m_alerts if m_alerts > 0 }}";
white-space: pre;
font-size: 12px;
font-weight: bold;
display: block;
line-height: 4px;
color: var(--alert-color);
animation: marquee 4s alternate infinite;
}
@keyframes marquee {
from {transform: translateX(0%);}
to {transform: translateX(35%);}
}
to show the counter in the non-expanded menu
Iām absolutely new to card-mod, tried copy-pasing stuff, but nothing is worth posting here, because Iām simply not able to get it working.
Situation:
- entity: input_text.empty
type: custom:multiple-entity-row
name: " "
icon: mdi:thermometer
format: precision0
entities:
- entity: sensor.aqara_lena_temp
name: "Lena"
format: precision1
unit: false
- entity: sensor.aqara_kato_temp
name: "Kato"
format: precision1
unit: false
Iām displaying 2 temperature sensors with multiple entity-row (actually much more, but I simplified the example)
I have 2 entities containing the minimum temperature for each room
input_number.zv_thermostaat_lena
input_number.zv_thermostaat_kato
I want to color the sensors above red when:
sensor.aqara_lena_temp < input_number.zv_thermostaat_lena
sensor.aqara_kato_temp < input_number.zv_thermostaat_kato
But obviously 1 sensor can be above and the other can be below the required temperature, so I want the correct one to show red.
This is what I have now, bow nothing happens:
(cut)
entities:
- entity: sensor.aqara_lena_temp
name: "Lena"
format: precision1
unit: false
style: |
:host {
color: {% if states('sensor.aqara_lena_temp') | float < states('input_number.zv_thermostaat_lena') | float %} red {% else %} white {% endif %};
}
(cut)
What am I doing wrong ?