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.
on the other hand no it does not work on my image. I think there is still an error on the side of hui-image
What do you mean?
The image remains black.
- attribute: BMI
entity: bodymiscale.aurelien
image: /local/bodyscale/b_m_i.webp
name: IMC
style:
hui-image:
$: |
#image {
filter: invert(8%) sepia(100%) saturate(7192%) hue-rotate(246deg) brightness(96%) contraste(144%);
}
type: attribute
cards:
- cards:
- elements:
- entity: bodymiscale.aurelien
attribute: weight
style:
color: 'rgb(3, 222, 244)'
left: 42%
opacity: 1
top: 15%
transform: 'scale(2,2)'
type: state-label
- entity: input_boolean.bodyscale_aurelien_info_toggle
image: /local/bodyscale/info-off.png
state_filter:
'off': brightness(100%) saturate(1)
'on': brightness(90%) saturate(1)
state_image:
'on': /local/bodyscale/information.png
style:
bottom: 5%
left: 20%
transform: 'translate(240%, 25%) scale(0.7, 0.7)'
tap_action:
action: toggle
title: Information
type: image
image: /local/bodyscale/device_scale.webp
type: picture-elements
- card:
entities:
- entities:
- attribute: Body fat
entity: bodymiscale.aurelien
image: /local/bodyscale/fat.webp
name: Graisse corporelle
type: attribute
- attribute: Water
entity: bodymiscale.aurelien
image: /local/bodyscale/water.webp
name: Eau
type: attribute
- attribute: Visceral fat
entity: bodymiscale.aurelien
image: /local/bodyscale/viscera.webp
name: Graisse viscƩrale
type: attribute
- attribute: BMI
entity: bodymiscale.aurelien
image: /local/bodyscale/b_m_i.webp
name: IMC
style:
hui-image:
$: |
#image {
filter: invert(8%) sepia(100%) saturate(7192%) hue-rotate(246deg) brightness(96%) contraste(144%);
}
type: attribute
- attribute: Muscle mass
entity: bodymiscale.aurelien
image: /local/bodyscale/muscle.webp
name: Muscle
type: attribute
- attribute: Protein
entity: bodymiscale.aurelien
image: /local/bodyscale/protein.webp
name: ProtƩine
type: attribute
- attribute: Basal metabolism
entity: bodymiscale.aurelien
image: /local/bodyscale/metabolize.webp
name: MĆ©tabolisme de base
type: attribute
- attribute: Bone mass
entity: bodymiscale.aurelien
image: /local/bodyscale/bone.webp
name: Masse osseuse
type: attribute
- attribute: Metabolic age
entity: bodymiscale.aurelien
image: /local/bodyscale/body_age_icon.webp
name: Age corporel
type: attribute
- attribute: Ideal
entity: bodymiscale.aurelien
image: /local/bodyscale/weight_icon.webp
name: Poids idƩal
type: attribute
head: bodymiscale.aurelien
type: 'custom:fold-entity-row'
show_header_toggle: false
title: Information
type: entities
conditions:
- entity: input_boolean.bodyscale_aurelien_info_toggle
state: 'on'
type: conditional
type: vertical-stack
type: vertical-stack
CSS isnāt compatible with accent marks.
<state-badge class="pointer" tabindex="0" style="background-image: url("MYADRESS/local/bodyscale/b_m_i.webp");"></state-badge>
Isnāt my problem here? state-badge?
It could be because contrast is spelled without an e, but you could also take a look at the debugging tips in the Dom navigation section of the readme https://github.com/thomasloven/lovelace-card-mod#dom-navigation to see if the styles are applied to the right element.
element.style {
background-image: url(MYADRESSE/local/bodyscale/b_m_i.webp);
filter: invert(8%) sepia(100%) saturate(7192%) hue-rotate(
246deg
) brightness(96%) contrast(144%);
}
In manual mode I manage to change the color
long had 2 buttons in an entities card, but was pointed today to the option for buttons in the footer. Which works fine, if only for the size of the buttons in the footer. Would card-mod be able to resize those a bit?
This is what they look like compared:
with the yaml:
- type: entities
title: Tunes
entities:
- input_select.tune
- input_select.tune_player
- input_number.tune_volume
- type: divider
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.loop_tune
show_name: false
aspect_ratio: 3/1
style: |
ha-card {
box-shadow: none;
}
- type: custom:button-card
entity: script.play_tune
show_name: false
aspect_ratio: 3/1
style: |
ha-card {
box-shadow: none;
}
icon: >
[[[ if (entity.state == 'on') return 'mdi:stop';
return 'mdi:play'; ]]]
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
haptic: light
hold_action:
action: more-info
haptic: light
footer:
type: buttons
entities:
- entity: input_boolean.loop_tune
- entity: script.play_tune
Not sure if I understand you properlyā¦
Please correct me:
- You need 2 buttons located horizontally on the cardās bottom.
- You used
'custom:button-card'first. - Then you decided to use stock buttons in a cardās footer.
- But these buttons in a cardās footer look smaller.
- Task: resize buttons in a cardās footer.
Right?
Tried to simulate your case.
Started with a more easy task - changing a color.
Then found a problem or a bug.
Have a look at that code:
type: vertical-stack
cards:
- type: entities
style:
.header-footer.footer:
hui-buttons-header-footer:
$:
hui-buttons-base:
$:
'div:nth-child(2)':
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sun.sun
- entity: sun.sun
- type: entities
entities:
- sun.sun
- type: divider
footer:
type: buttons
entities:
- entity: sun.sun
- entity: sun.sun
Do not know why - but card-mod causes a misplacement for buttonsā¦
Update: The initial task:
- type: entities
style: |
.header-footer.footer {
--mdc-icon-size: 60px;
height: 60px;
}
2 Likes
nice! can even do with only:
style: |
.header-footer.footer {
--mdc-icon-size: 40px;
}
needs some padding from the bottom though:
btw, never realized we had tooltips on those
style: |
.header-footer.footer {
padding-top: 10px !important;
padding-bottom: 10px !important;
--mdc-icon-size: 40px;
}
Update: yes, you can remove "!important"
sorry, that was too obviousā¦ my bad.
style: |
.header-footer.footer {
--mdc-icon-size: 30px;
padding-bottom: 10px;
}
is perfect! Why would we need that !important ? even after reading When Using !important is The Right Choice | CSS-Tricks - CSS-Tricks I am not sure 
Since it works in all of my browsers without that.
Usually I add this ā!importantā and then - if styling OK - try to remove it.
Now was in a hurry and did not test the case w/o āimportantā.
thanks, will keep an eye on it, to see if I might need it after all.