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.
1 Like
@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
1 Like
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.
Hello all. Could someone possibly show me how to change the color of the icon and entity name on a button card.
Below is what I have so far:
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
Is there a way add a separator line below a grid card? This works for other cards:
card_mod:
style: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
but using hui-grid-card:after does not work.
Im working a bit aka playing…
With the plants etc
Sofar i got this working
Only at the value when it reaches…it
But my goal was as follow:
When it reaches the value 20% and below
It wanted it to show in red color
Any guidance?
Thnx…
type: entities
entities:
- entity: sensor.goudpalm_moisture
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == '20' %} red
{% else %} primary-color
{% endif %};
}
Ill think im close…
is not
what would you think it should be?
below, or in?
below would be as simple as adding it (type: divider) in a stack card or entities.
inside the grid would be something more complex
Oh shit…i forgot…
The goal was any value lower then 20%…
I said only below…
Doh…glad im a human tho…heh
Hello,
I just began playing around with card-mod and already struggeling with a simple task:
I just want and entity card with the current time in big numbers. However, after a certain size, the top gets cut off. How can I expand the value almost over the whole card (if possible) ?
Thank you,
Philipp
type: entity
entity: sensor.time
card_mod:
style: |
ha-card {
text-align: center;
}
.value {
font-size: 64px !important;
}
.icon {
display: none;
}
.name {
display: none;
}
Hello all,
Could someone give me a bit of assistance with the following:
Below is the yaml I have at the moment:
- All works well but I would like to have the text of the room in yellow font.
Could someone help me with getting to that solution. I had help in getting the below style information from another forum post so to be honest, I didn’t come up with that either.
Thank you all for any assistance you can give.
1.)
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 Deck
area: back_deck
shadow: true
hide_unavailable: true
state_color: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-porch
entities:
- entity: light.all_back_deck_lights
- entity: switch.back_deck_fountain
- entity: switch.back_deck_speaker_power
