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;
}
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.
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.