https://github.com/thomasloven/lovelace-auto-entities#filters
Additional per-entity options, such as style, are specified under options:.
I appreciate your process! Getting it to work with something simpler first is just the way to go, and something I see much less than I would have likedâŠ
@petro, wouldnât that make them always stack on top of each other? On my landscape devices I would will like them side by side.
Yes, it will stack them. You wonât be able to do a some landscape and some stacked. Itâs one or the other. If your screens are high dpi, then theyâll always be landscape unless you force it to be vertical.
well, Iâd like to have a card, (or button for that matter) which shows an icon and a name ( for the slider) on one line, above the slider, showing its state at the end.
using the code posted few posts above, and you style:
- type: custom:vertical-stack-in-card
cards:
- type: markdown
style: |
ha-card {
color: grey;
font-weight: bold;
font-family: Helvetica;
font-size: 13px;
}
content: |
<ha-icon icon='mdi:home-assistant'></ha-icon> Delayed startup
- type: custom:slider-entity-row
style: |
host: {
display: block;
margin-right: 10px;
}
entity: input_number.ha_delayed_startup
full_row: true
results in
The style for the slider-entity-row seems not to work, tried a few more, and the font for the slider seems so off, and unlike anything else in HAâŠ
Make sure you have the latest versions of everything involved.
There was a bug at some point around 0.101 which could make things in entities cards not squish and stretch correctly.
You may also want to check out dummy-entity-row.
I am still trying to figure out how to max a card keep a set aspect ratio, but have the cards be large as possible without requiring scrolling dependent on the screen orientation.
If landscape, then width = 50vw, and height = 28.125vh
OR
if portrait, then width = 100vw, and height = 56.25vh
Iâve figured out how to stack them easily, but cannot figure out how to get them side by side or at least how to center the stack so I do not have to use panel: true. If I remove the panel:true option the cards are left aligned to the edge of the cards normal width.
Code wise I currently have:
title: Cameras
panel: true
cards:
- type: vertical-stack
# type: custom:layout-card
# column_number: 1
# max_columns: 2
# min_height: 1
cards:
- type: picture-entity
title: Front Door
entity: camera.frontdoor_camera
show_info: true
aspect_ratio: 16:9
tap_action:
action: more-info
style: |
ha-card {
--height-cctv: calc(50vh - 40px);
--width-cctv: calc(var(--height-cctv) / 9 * 16);
height: var(--height-cctv);
width: var(--width-cctv);
}
- type: picture-entity
title: Driveway
entity: camera.driveway_camera
show_info: true
aspect_ratio: 16:9
tap_action:
action: more-info
style: |
ha-card {
--height-cctv: calc(50vh - 40px);
--width-cctv: calc(var(--height-cctv) / 9 * 16);
height: var(--height-cctv);
width: var(--width-cctv);
}
I would like to accomplish for landscape:
Is there anyway to accomplish with cardmod? Or is being orientation aware simply not possible.
Trying to use the CSS-style with the custom:auto-entities card. The custom:auto-entities card as standalone card works as a basic card, but from the documentation I understand itâs not a full featured Lovelace card on its own.
Using the custom: auto-entities with the standard entity card, and then the CSS-style should work(?), but I canât wrap my head around how it should work. Any ideas how to change icon color?
First of all, why are you putting an entities card inside auto-entities inside an entities card?
There are valid reasons to do this, but if you donât have to, you shouldnât.
From the lovelace-card-mod documetation:
âWhy wonât this work for some cards?â
âŠauto-entities and state-switch among others.
Common for all those are that they have no ha-card element. A workaround for this is to put the card you want inside an entities card and mod that. For built-in cards, this can be done by setting the type of an entities row to custom:hui--card:
So then using the standard entities-card, inside this using the auto-entities-card, then using CSS-mod on the entities-card or the auto-entities-card, does not work for me.
I must admit I donât get it and donât understand the documentation. Is it at all possible what I am trying using the card-mod somehow with the auto-entities card?
- title: Test Card
cards:
- type: custom:auto-entities
card:
type: entities
title: Sensor Battery Status
show_header_toggle: false
filter:
include:
- entity_id: sensor.*_battery_level
options:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) | int > 20 and states(config.entity) | int < 90 %}
orange
{% elif states(config.entity) | int < 20 %}
red
{% else %}
green
{% endif %}
;
}
exclude:
- state: '100'
sort:
method: state
reverse: true
A new feature of card_mod has just been released:
mod-card lets you also add styles to card which donât have a ha-card element, such as stacks, conditional, auto-entities and layout-card et al.
type: custom:mod-card
style: |
ha-card {
border: 1px solid green;
}
card:
type: vertical-stack
cards:
- type: light
entity: light.bed_light
- type: light
entity: light.kitchen_lights
Got it woking : )
The default --paper-item-icon-color has become black and not standard HA blue on browser Google Chrome and Safari (cache emptied).
include:
- entity_id: sensor.fib_*_battery_level
options:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|int < 35 %}
orange
{% elif states(config.entity)|int < 20 %}
red
{% endif %}
;
(auto-entities 1.2 and card-mod 10)
UPDATE:
This gives the default icon color:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|int < 35 %}
orange
{% elif states(config.entity)|int < 20
red
{% else %}
var( ---state-icon-color )
{% endif %};
}
Hello
I have an input Boolean with an MDI Icon and I would like that Icon to go yellow when on (like any other switch/light in lovelace glance card).
It seems itâs not supported and not possibleâŠ
If I could put this input boolean in a light group, it would solve my issue but I donât think I canât do that either 
Do you have any suggestion ?
Thank you !
I tried for weeks to make that work as well but the element it uses seems it canât be styledâŠ
use this in customize_glob:
input_boolean.*:
templates:
icon_color: >
if (state === 'on') return 'rgb(251, 210, 41)';
return 'rgb(54, 95, 140)';
this of course needs custom-ui to be installedâŠ
I know itâs possible in custom_ui but thatâs not what this thread is about and Iâm not going down that path.
Seriously though, thereâs a piece of example code in the README that does almost exactly thisâŠ
Yes and it still doesnât work even after extensive consultations with you in this very thread and on discord. IT DOESNâT WORK!!!
Then I must be misunderstanding the problem.
Could you please link me to where in the thread we discussed this?
type: glance
entities:
- entity: input_boolean.my_switch
style: |
:host {
--paper-item-icon-color: var({% if is_state(config.entity, "on") %} --state-icon-active-color{% else %} --state-icon-color {% endif %});
}
tap_action:
action: toggle
Edit:
It seems I didnât clearly announce this feature in this thread.
Since August 27th youâve been able to style entity card rows and glance card buttons separately.
would really be magic if we could do so globally, and not have to style each and every single time in each single card in Lovelace.
I appreciate the fact that one day custom-ui might be no longer supported in HA, but would hope a modern replacement for that would be possible.
Would you be able to see, and maybe even create such an option/plugin/mod?