The latest in HACS, 3.0.9
You should raise an issue.
as in, on github?
Yes, make an issue there.
Change the resource type from js
to module
.
One more reason to use card-mod - struggling with a clipped tooltip for "history-graph"
card:
The problem appears when the
"history-graph"
card is placed inside "custom:stack-in-card"
.
A possible reason of this clipping - CSS style "overflow: hidden"
used for "custom:stack-in-card"
.
How to solve:
type: 'custom:stack-in-card'
style: |
ha-card {
overflow: visible !important;
}
cards:
- type: history-graph
title: tooltip + stack-in-card
entities:
- sun.sun
hours_to_show: 6
refresh_interval: 0
More examples are described here.
I’m trying to make the word “Fan” not appear but I would like to still be able to adjust the distance between the fan icon and the buttons. Nothing I try seems to affect it. There is an “Off” button that is not shown.
I would also like to adjust the fan icon up a little to make it even with the buttons. I adjusted the size of the icon but I can’t move it.
Is anyone else having an issue with card-mod changes not being displayed in fully kiosk browser? Everything else appears and works but none of these changes show up. I cleared fully kiosk’s cache but that didn’t solve the issue.
The fan icon is not going to stay red. I was just testing. Eventually, I would like to have the icon rotate at different speeds depending on which button was pressed.
- type: entities
show_header_toggle: false
card_mod:
style:
'#states div':
fan-control-entity-row$:
hui-generic-entity-row$:
state-badge$:
ha-icon$: |
ha-svg-icon {
width: 48px;
height: 48px;
margin-bottom: 5px;
}
.: |
ha-icon { color: #fa051e; }
.: |
button.speed {
min-width: 48px;
height: 36px;
font-size: 14px !important;
}
.info {
display: none;
}
entities:
- entity: fan.master_bedroom_fan
name: Fan
type: 'custom:fan-control-entity-row'
I have also tried changing the name and with/without !important:
}
info.pointer.text-content {
margin-left: 30px !important;
}
and
'#info.pointer.text-content div' {
margin-left: 30px !important;
}
Any help is greatly appreciated.
hello, I would like to apply the css style to ha-icon and set the style to “display: inline;” to a ha-icon because the icon is bigger then the element state-badge when i landscape the iphone. i have try so many way but still fail. please somebody help me out.
floor_plan_button10:
element:
entity: '[[entity_1]]'
style:
'#root > hui-conditional-element > decluttering-card':
$: |
"#declutter-child":
$: |
"s#tate-badge":
$: |
ha-icon {
display: inline;
}
'#state-badge':
$: |
ha-icon {
display: inline;
}
height: 4vw
width: 4vw
max-width: 4vw
max-height: 4vw
display: inline-flex
align-self: start
text-align: start
margin-right: 0px
'--mdc-icon-size': 90%
transform-origin: left
'--paper-item-icon-color': darkgrey
align-items: center
background-color: 'rgba(255, 255, 255, 0.4)'
border-radius: 40%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
justify-content: center
left: 44%
top: 35%
position: absolute
tap_action:
action: toggle
hold_action:
action: fire-dom-event
haptic: success
browser_mod:
command: call-service
service: script.general_button_card_detail_popup
service_data:
deviceID: this
entity_1: input_boolean.ceiling_light
text-align: center
type: state-icon
card_mod:
style: |
"#root > hui-conditional-element > decluttering-card":
$: |
"#declutter-child":
$: |
state-badge > ha-icon {display: inline;}
"#state-badge":
$: |
ha-icon {
display: inline;
}
![num2](https://community-assets.home-assistant.io/original/3X/3/5/3561367b89915424299d54319fbf58fdf3962e26.png)
Why are you replying to that person?
Try playing around with position: relative
.
Thank you KTibow. I was able to get the fan icon to move upwards using position: relative.
Do you happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything.
info.pointer.text-content
Has anyone else had an issue with mod-card changes not appearing in the fully kiosk browser? In the Fully Kiosk browser it looks like I didn’t do anything.
Edit; I found the solution to mod-card changes not showing. I use a Fire HD 10 to display Home Assistant lovelace. Once I updated the Fire OS from 7.3.1.2 to 7.3.1.8 I was able see the changes.
Hello, is it possible to color this image according to the stats?
- attribute: BMI
entity: bodymiscale.aurelien
image: /local/bodyscale/b_m_i.webp
name: IMC
style:
hui-image:
$: |
#image {
{% set imc = state_attr('bodymiscale.aurelien', 'BMI') | float %}
{% if 0 < imc < 18.4 %}color: blue;
{% elif 18.5 <= imc <= 25 %}color: green;
{% elif 25.1 <= imc <= 28 %}color: yelow;
{% elif 28.1 <= imc <= 32 %}color: orange;
{% else %}color: red;
{% endif %}
}
type: attribute
What do you see if you enter it into the template tab of HA devtools?
That’s an image. It doesn’t have a color attribute. Check out the css property filter
, but remember that if you rotate around the color wheel starting from black, you’ll always end up at black.
color: green
The formula is ok but the css mod I’m lost😉
Change color: blue
to something with filter
. First of all, add an invert(1)
. Then, try playing around with brightness
and saturate
. Finally, to set the color, use hue-rotate
. Try googling “css filter” if you’re lost.
And you made a typo in yellow.
Does anyone happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything. I would like to hide the word Fan.
Different names I have tried.
info.pointer.text-content
'#info.pointer.text-content div'
.info
It’s probably in a shadow root.
Unfortunately nothing happens
test with brightness, invert and saturate. Is the formatting good ?
- attribute: BMI
entity: bodymiscale.aurelien
image: /local/bodyscale/b_m_i.webp
name: IMC
style:
hui-image:
$: |
#image {
filter: hue-rotate(10deg);
}
Otherwise I found an easy site for the conversion https://codepen.io/sosuke/pen/Pjoqqp
exemple:
green #008000
filter: invert(20%) sepia(84%) saturate(4295%) hue-rotate(96deg) brightness(100%) contrast(107%);
Nice. You might want to use a better shade of colors that isn’t so saturated, but if this works, then that’s great.