Yes, row high smaller = list shorter ( + not alot “ugly” empty space )
But Ildar just posted one that might be better, i will try that one, later
No, the list itself contains the same entries this way. Which only makes clicking the correct selection harder and the usability bad. I need the list to show less entries, so limited to a certain height so I can scroll. The previous code did exactly that, which is what I’m looking for with the new style format.
So I’m looking for a code that does the exact same thing as this:
card_mod:
style:
ha-paper-dropdown-menu: |
paper-listbox {
max-height: 200px !important;
}
Alter the height of the listbox itself and not each entry.
ok, yes usability comes in many shapes … but get use to the new “term” will be easier to find a solution
maybe as IIdar suggested, but in a logic variant
I.E
–mdc-menu-max-height
Thanks, works great!
I love this fan speed control animation, anyway you can post your whole code snippet here? Did you add it in your themes file or for each card? 
Also do you get the log error in HA upon startup?
Template variable error: 'dict object' has no attribute 'entity' when rendering '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } state-badge { {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} animation: spin 4s infinite linear; {% endif %} }'
Is it possible to change the height and width of an apex-chart?
type: custom:apexcharts-card
series:
- entity: sensor.boiler_3_power
graph_span: 1h
style: |
.graph-wrapper {
background-color: red;
}
This was just to see if I am hitting the right area or not. But I was not able to color anything.
I tried .graph-wrapper, .graph, .wrapper. But none worked. I also tried .ha-card.
What am I missing?
Hi there!
I want to style the Buttons of the Alarmo card. I managed to have access to the alarmo-button style.
style:
.: |
.actions alarmo-button {
margin: 0 8px 8px;
background: red !important;
}
So I need to skip the mwc-button to style the button itself.
I need a little help for this.
Thanks in advance!
@Ildar_Gabdullin thank you very much for your work. Maybe you’ll create your own page (Github) where everything is documented. Or @thomasloven lets integrate your work on his card-mod github.
A problem I’m currently dealing with:
I am trying to modify a conditional-card that contains a custom:multiple-entity-row with card mod.
unfortunately it doesn’t work like this:
- type: conditional
conditions:
- entity: input_boolean.luftreiniger_wohnzimmer_automatisch
state: 'on'
row:
entity: input_number.luftreiniger_wohnzimmer_off_bis_3
type: custom:multiple-entity-row
show_state: false
name: Luftreiniger
icon: mdi:air-filter
extend_paper_buttons_row:
position: right
buttons:
- entity: input_boolean.luftreiniger_wohnzimmer_automatisch
name: auto
icon: false
styles:
button:
margin-right: 8px
color: '#FDD835'
style:
hui-generic-entity-row:
$: |
state-badge {
color: red;
}
Do you have any advice on how to solve this?
Where did you take this code from?
It seems to belong to different cards.
Create a card WITHOUT card-mod first.
@Ildar_Gabdullin
I did it already without cardmod (on the pictures: the first line). Everything works well, except the icon on the left did not change.
That you understand what i did. This is the full code of the first line:
### FIRST SECTION:
- type: conditional
conditions:
- entity: input_boolean.luftreiniger_wohnzimmer_automatisch
state: 'on'
row:
entity: input_number.luftreiniger_wohnzimmer_off_bis_3
type: custom:multiple-entity-row
show_state: false
name: Luftreiniger
icon: mdi:air-filter
extend_paper_buttons_row:
position: right
buttons:
- entity: input_boolean.luftreiniger_wohnzimmer_automatisch
name: auto
icon: false
styles:
button:
margin-right: 8px
color: '#FDD835'
style:
hui-generic-entity-row:
$: |
state-badge {
color: red;
}
### SECOND SECTION:
- type: conditional
conditions:
- entity: input_boolean.luftreiniger_wohnzimmer_automatisch
state: 'off'
row:
entity: input_number.luftreiniger_wohnzimmer_off_bis_3
icon: mdi:air-filter
name: Luftreiniger
type: custom:slider-entity-row
hide_state: true
extend_paper_buttons_row:
position: right
buttons:
- entity: input_boolean.luftreiniger_wohnzimmer_automatisch
name: auto
position: right
icon: false
styles:
button:
margin-right: 8px
color: '#03a9f4'
style:
slider-entity-row$: |
hui-generic-entity-row {
--paper-item-icon-color:
{% if is_state('fan.luftreiniger_mi', 'off') %}
#44739e;
{% elif is_state('fan.luftreiniger_mi', 'on') %}
#FDD835;
{% endif %}
}
And this is what the first line looks like when the condition of the first section is true (in the first section false):
When i use conditional-row that contains a custom:slider-entity-row, it works well (second section). If i use conditional-row that contains a custom:multiple-entity-row (first section), the color not change.
Something must be wrong here:
style:
hui-generic-entity-row:
$: |
state-badge {
color: red;
}
Thanks a lot
I have syntactical issues combining this with conditional presenting (according to 🔹 Card-mod - Add css styles to any lovelace card - #1425 by Ildar_Gabdullin).
In detail:
- I want this:
- entity: sensor.fritzbox_transmissionrate_down
name: DSL Downstream
style: |
:host {
{% if states('binary_sensor.fritz_box_7590_connection') in ['off'] -%}
# Warn-Zustand (DSL NICHT verbunden)
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
#--ha-label-badge-title-width: 60px;
{% else %}
# Normal-Zustand (DSL verbunden)
#color: orange;
--label-badge-text-color: none;
--label-badge-red: #03A9F4;
--label-badge-background-color: none;
#--ha-label-badge-title-width: 60px;
{% endif %}
}
- Plus this:
- entity: sensor.fritzbox_transmissionrate_down
name: DSL Downstream
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
color: #DF4C1E;
#--ha-label-badge-title-width: 60px;
}
.badge-container .label-badge {
border-radius: 20% !important;
}
…being applied to the same badge. I tried a lot for 1/2 an hour, without success. At the moment I can only have one of those two modifications, not both at the same time. The limit for sure is my syntax knowledge… 
I think I need to combine/apply the :host and the ha-state-label-badge: somehow.
Any ideas?
I got sidetracked and I have not worked on this code for some time. I have it on a test dashboard. After your message, I noticed the fan icons were not spinning when I would turn a fan on. I had to rename some of the items in the path to the fan icon. I also had to change the template from speed to percentage. The fan icons now spin properly. Well, except for the ease-out when you turn the fan off. I haven’t figured that out yet. The fan icon just stops.
The code goes in the dashboard, not the theme. This is my whole test dashboard. I hope it helps.
First, get rid of this comments inside STRINGS. They do not work as you expect.
Then try again))
I removed them (and we had this discussion already): it changed nothing. Still not working.
How would you combine both style definitions?
Try:
aaaaaa $:
bbbb {
...
}
.: |
:host {
...
}
1 Like
You are a living legend. Thank you! Again learned something. Dirty business this styling stuff is - and incredibly powerful.
Just for notice this is what I finally used
- entity: sensor.fritzbox_transmissionrate_down
name: DSL Downstream
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.: |
:host {
{% if states('binary_sensor.fritz_box_7590_connection') in ['off'] -%}
# Warn-Zustand (DSL NICHT verbunden)
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
#--ha-label-badge-title-width: 60px;
{% else %}
# Normal-Zustand (DSL verbunden)
#color: orange;
--label-badge-text-color: none;
--label-badge-red: #03A9F4;
--label-badge-background-color: none;
#--ha-label-badge-title-width: 60px;
{% endif %}
}
Thank you that helped a lot with the fan speed spinning, anyway to make it universal? I am trying this… and its obviously not working. Does anyone know how to target an attribute of the current config.entity?
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
{% if state_attr('config.entity', 'percentage') <= 33 %}
animation: spin 4s infinite linear;
{%- elif state_attr('config.entity', 'percentage') <= 67 %}
animation: spin 1.5s infinite linear;
{%- elif state_attr('config.entity', 'percentage') <= 100 %}
animation: spin 0.75s infinite linear;
{%- else -%}
animation-timing-function: ease-out !important;
animation-duration: 0s;
{%- endif %}
{% endif %}
}
state_attr only takes in full entity. How do I make the above work 
Replace with state_attr(config.entity
(cannot say anything regarding other code)
1 Like