color: {% if is_state('switch.lounge_neo_standby','on') %} green {% else %} red {% endif %} !important;
I think that should work
try this:
type: entities
entities:
- type: custom:slider-entity-row
entity: light.test-light-dimmer
card_mod:
style:
ha-slider$: |
div.container > input {
pointer-events: none;
}
would you believe after all these years, Ive never known about thatā¦
was this ever mentioned in this thread at all?
might be worth an addition to your main post on the conditional row
for reference and completeness:
type: entities
title: Mod regular entity and same entity in a conditional row
entities:
- entity: sensor.gdacs_alerts
card_mod:
style: |
:host {
{% set alert = states(config.entity)|int(0) %}
--card-mod-icon:
mdi:{{'shield-check' if alert == 0 else 'alert'}};
--card-mod-icon-color:
var(--{{'ok' if alert == 0 else 'alert'}}-color);
}
- type: conditional
conditions:
- entity: binary_sensor.gdacs_alerts
state: 'on'
row:
entity: sensor.gdacs_alerts
card_mod:
style:
hui-sensor-entity-row $: |
hui-generic-entity-row {
{% set alert = states(config.row.entity)|int(0) %}
--card-mod-icon:
mdi:{{'shield-check' if alert == 0 else 'alert'}};
--card-mod-icon-color:
var(--{{'ok' if alert == 0 else 'alert'}}-color);
}
Looking for some assistance. I have used card mod on other dashboard but canāt get it working as desired with glance card. I am trying to reduce the white space to condense the height of the card. Here is the yaml and card showing no impact. Where am I going wrong?
not sure this will be the cause (didnt check the main post on Glance card), but its !important
@sebbaT Many thanks for your suggestion, unfortunately it doesnāt work ?
Iām not an expert at all about styles nor HASS, sorry. The following is a screen capture of the google Chrome inspector:
If I manually add āpointer-events: none;ā as a declaration inside the input[type=ārangeā]{} it worksā¦
I tried the following code, but it doesnāt work either:
card_mod:
style:
ha-slider $: |
div.container > input[type="range"] {
pointer-events: none;
}
Many thanks!
You need to have the custom:slider-entity-row within an entities card, or use custom:mod-card:
Within an Entities Card:
type: entities
entities:
- type: custom:slider-entity-row
entity: light.test-light-dimmer
card_mod:
style:
ha-slider$: |
div.container > input {
pointer-events: none;
}
Within Mod Card:
type: custom:mod-card
card:
type: custom:slider-entity-row
entity: light.test-light-dimmer
card_mod:
style:
slider-entity-row$:
ha-slider$: |
div.container > input {
pointer-events: none;
}
I need a hint - how to animate the icon within a tile card? I found a lot of examples for mushroom cards but not for the āvanillaā home assistant tile card.
Thanks. Iāve tried removing the āimportantā but it hasnāt changed anything.
my post was not directed to removing the important, but instead, adding the ! and use !important.
Having said that, did you check the main post on styling the margins on the Glance cards in Ildars overview?
eg:
style: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'on') %} var(--alert-color)
{% else %} var(--ok-color)
{% endif %};
}
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
1.5s pulse infinite linear;
{% else %} none
{% endif %};
}
@keyframes pulse {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.7);
}
}
(ofc also set the card_mod: above that)
Never ever )))
But a possibility of using a āconfigā object is mentioned in Docs - and āconfig.entityā is just a LITTLE example.
Moreover, you can add OWN vars.
@sebbaT Thank you so much. I succeeded to make it work! It took me a while because I have no experience with styles and I saw that āstyle:ā and āstyle: |ā are different. In addition I use custom button card with templatesā¦ This is my final code, just in case anybody would like to use itā¦ The code disables a cover slider-entity-row if the current_position is outside the limits, because it hasnāt been calibrated:
card_mod:
style:
.: |
:host {
{% set active_color, inactive_color = 'rgb(0,100,255)', 'Silver' %}
{% if config.entity.split('.')[0] == 'cover' and
(state_attr(config.entity, "current_position") < 0 or state_attr(config.entity, "current_position") > 100) %}
{% set active_color = 'var(--disabled-text-color)' %}
{% set inactive_color = 'var(--disabled-text-color)' %}
{% endif %}
--md-slider-active-track-color: {{ active_color }};
--md-slider-active-track-height: 2px;
--md-slider-focus-handle-color: {{ active_color }};
--md-slider-handle-color: {{ active_color }};
--md-slider-hover-handle-color: {{ active_color }};
--md-slider-hover-state-layer-color: {{ active_color }};
--md-slider-label-container-color: {{ active_color }};
--md-slider-pressed-handle-color: {{ active_color }};
--md-slider-pressed-state-layer-color: {{ active_color }};
--md-slider-inactive-track-color: {{ inactive_color }};
--md-slider-inactive-track-height: 2px;
}
slider-entity-row $:
ha-slider $: |
div.container > input {
{% if config.entity.split('.')[0] == 'cover' and
(state_attr(config.entity, "current_position") < 0 or state_attr(config.entity, "current_position") > 100) %}
pointer-events: none;
{% endif %}
}
1 Like
RTL fix for fold-entity-row.
Issue reported here and here.
Before:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: some text
open: true
entities:
- entity: sun.sun
- entity: sun.sun
After:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: some text
card_mod:
style: |
.divider {
margin-left: -48px !important;
margin-right: -16px !important;
}
open: true
entities:
- entity: sun.sun
- entity: sun.sun
Using ā.divider:dir(rtl)ā will make this code working both in RTL & LTL.
1 Like
Could someone here help me figure out why the below (trying to use a background photo) doesnāt seem to be working?
Below is my lovelace code and below that is a screenshot. It just seems to be changing the background to black- I imagine because ha canāt find the image.
I have placed the image inside of ha by uploading on the media page under my media and images.
I donāt really understand how to find the true image path when I have uploaded an image in this manner. But I assumed it was this:
background: url('/local/images/goodnight-moon.jpg')
restarting/ reloading ha didnāt seem to do the trick either
type: vertical-stack
cards:
- square: false
type: grid
cards:
- show_name: true
show_icon: true
type: button
card_mod:
style: |
ha-card {
background: url('/local/images/goodnight-moon.jpg');
background-size: 100% 100%;
}
tap_action:
action: toggle
entity: script.good_night
icon: mdi:sleep
show_state: false
Canāt reproduce:
Do you have this āxxx.pngā file in your ā/config/www/imagesā folder?
Or may be this is related to duckdns, no ideaā¦
I have had issues with photo related things in the past (when a file path was involved). It could be duckdns related. The only time I have gotten photo related things with path to work was by using smb and connecting to pi file system from windows and placing files that way. ā I was on home network when doing this also.
I will see if I have the same issue when on home network tonight.
Thank you for the ideas of things to look at.
I did not have a folder within www called āimagesā based on looking at the explorer inside of studio code server. But I created it.
I am now using the url below:
'/local/images/goodnight-moon.jpg'
Is this the same as config/www/images/goodnight-moon.jpg? or do I need to change my css to reference that location?
Thank you for your help with this.
/config/www = /local
I follow you now.
Thanks Marius. That has worked around the entities themselves. Iāve tried a few options (.title .heading .ha-card etc) to reduce the spacing and margins around the heading but they havenāt worked. There is a lot of white space around the heading.