It may not look like much, but Iām kinda proud I was able to get this state text to word wrap! Starting to get the hang of this card mod stuff a little bitā¦
style:
hui-conditional-element: |
hui-state-label-element {
width: 100%;
}
hui-conditional-element hui-state-label-element$: |
div {
padding: 5% !important;
white-space: normal !important;
line-height: 120%;
text-align: center;
width: 90%;
}
Got more important question -
What kind of sensor do you use for Maggie?
Is it a presence detection sensor?
Itās a sensor that reads data from her Whistle tracker which you can actually see on her collar!
(If youāre interested in purchasing one, let me know! Looks like thereās a discount for you and a gift card for me if I refer youl!)
Hello.
Can anyone help with my problem?
type: entities
entities:
- entity: input_number.pctemp
secondary_info: none
name: NASTAWA
card_mod:
style: |
:host {
{% if is_state('sensor.danfosstempcheck', '0') %}
color: orange;
{% elif is_state('sensor.danfosstempcheck', '1') %}
color: white
{% else %}
color: red;
{% endif %}
}
- entity: input_select.pctryb
name: TRYB
card_mod:
style: |
ha-paper-dropdown-menu:
$:
paper-menu-button:
.dropdown-trigger:
paper-input:
$:
paper-input-container: |
iron-input {
color: red;
}
title: DANFOSS
First entity is working great but I cannot make input_select to do same change of color. In fact I cannot change it at all. I think tht i am missing something obvious but after reading posts here and some others I am not sure where to look for mistaktes. I was tying to reuse #1674 but with no luck.
What version of HA are you on?
Since 2022.03, the frontend uses Material Web Components for input fields (including input selects) so the whole CSS path has changed - your code may have once worked, but is likely out of date now.
Can you explain in more detail what you want to achieve?
I am running HA core-2022.4.4.
It has never worked since I am working on this since 2 days.
Full card should be something like this concerning āold wayā:
type: entities
entities:
- entity: input_number.pctemp
secondary_info: none
name: NASTAWA
card_mod:
style: |
:host {
{% if is_state('sensor.danfosstempcheck', '0') %}
color: orange;
{% elif is_state('sensor.danfosstempcheck', '1') %}
color: white
{% else %}
color: red;
{% endif %}
}
- entity: input_select.pctryb
name: TRYB
card_mod:
style: |
ha-paper-dropdown-menu:
$:
paper-menu-button:
.dropdown-trigger:
paper-input:
$:
paper-input-container: |
iron-input {
{% if is_state('sensor.danfossmodecheck', '0') %}
color: orange;
{% elif is_state('sensor.danfossmodecheck', '1') %}
color: white
{% else %}
color: red;
{% endif %}
}
title: DANFOSS
Aim is to use template entity āsensor.danfossmodecheckā (which checks if āinput_select.pctrybā desired mode is equal to another entity that represents current setting on heat pump) to change color of āinput_select.pctrybā so that i will know if sending āmode commandā got to heat pump or not.
Just as on this image posted above (red part):
Thing is I was trying to figure out how do get to this new input fields but using "Chrom DevTools " just showed me that I know to little about CSS and trying to figure out anything by values names in theme file did not work either.
As Chris wrote, that post is OUTDATED - some styles do not work due to āpaper elements ā material web componentsā change.
Currently have no time to fix it.
A bit later I hope.
Even using the browserās code inspector, and knowing the CSS selector path, I couldnāt get anything to work.
In fact, I got some very strange results indeed where the input select would just display the card_mod raw code.
Itās odd, because I have managed to get input date times to work properly with card_mod, but Iām afraid the new MWC input selects appear way beyond my (very limited) CSS knowledge.
After these 4 hours I will just step back from diving into lake of āmore questions then answearsā.
I guess I cannot just proces DOM navigation right.
If it comes handy for someone: For some reason (blurry to me) placing just
card_mod:
style: |
:host {
color: yellow;
}
under input_select entity causes that all elements:
/hui-input-select-entity-row//hui-generic-entity-row/ha-select/
are inheriting color perfectly, but rest of them:
/div/div/span[3]/span
are not, so this is surely me being unable to inject value properly.
Any ideas on this? I still do not have a solution for this - and I start to believe itās impossibleā¦ 
When I swap the commenting on these two style blocks, I can get the icon colors to change as intended. But, when I introduce the templating, I get an āUnknown errorā with a RELOAD UI button. Any recommendations?
badges:
- entity: sun.sun
# style: |
# :host {
# color: white;
# --label-badge-red: silver;
# --label-badge-background-color: black;
# }
style: |
:host {
color: white;
--label-badge-red: silver;
{% if is_state('sun.sun','above_horizon') %}
label-badge-background-color: yellow;
{% else %}
label-badge-background-color: black;
{% endif %}
}That wonāt work because I have 6 possibilities of conditional cards for total amountā¦ I only shared 2 butā¦ What would be a good thing is a conditional card āif then elseā, at the moment we have only the āif thenā version !
Can anyone help me understand why my markdown card is making line breaks in places that shouldnāt have a line break?! Below is a screenshot of the card, and for some odd reason itās putting a break after āfrostā, āNorthā, and āSouthā?
Yet when I put the same statement in the template editor it outputs fine:
Below is the code Iām using:
- type: markdown
content: |-
{{ states("sensor.weather_alert_title") }} <br>
{{ states("sensor.weather_alert_desc") }}
style: |
ha-card {
box-shadow: none;
top: -30px !important;
height: 270px !important;
width: 393px !important;
}
Please help!! lol
Maybe check how youāre writing the CSS variable in the templated example? (Missing the 2 hyphens at the start)
--label-badge-background-color
Not sure if this explains the error youāre seeing though.
@reste_narquois Thank you. Good catch. In total, I needed to add those āāā and a ā-ā to connect the multi-line jinja2 template entries. Lastly, since it requires lovelace_gen, I had to restart HA.
I feel like this is pretty basic, but Iām still a css fledgling and havenāt been able to get it to workā¦
Iāve got a bunch of children under a hui-conditional-element in a picture-elements card, each formatted āhui-state-label-element $ divā that Iād like to apply the same style to, but everything Iāve tried (various combinations of ., >, #) only applies to the first child . What am I missing?
hui-conditional-element hui-state-label-element $: |
div {
white-space: normal !important;
line-height: 100%;
padding: 5% !important;
width: 90%;
text-align: center;
}
Thank you for any help!
See if it helps:
1st post ā link at the bottom ā post with links ā link for conditional
Took me a minute to find it and grock it, but that worked! thanks!
Im trying my best to find some kind of documentation on how to change the background color of the calendar card, and I have tried my best to figure it out myself. I am trying to change the background of the grid itsself, the card I did manage to change. How can I achieve this?
Update: I figured it out, again thanks to the knowledge shared in this forum;
style:
.: |
ha-card {
background-color: rgba(0,0,0,0.1);
width: 1425px;
margin:auto;
position: absolute;
left: 0;
right: 0;
border: none;
box-shadow: none;
border-radius: 20px;
}
ha-full-calendar {
min-height: 700px !important;
}
div.header {
padding-top: 0px;
}
ha-full-calendar: (<- this bit)
$: |
#calendar {
background-color: rgba(0,0,0,0.1) !important;
}