Found an interesting example of this just now. Scaling the Logitech Media Server interface with the material UI causes the right side of the header, and the entire footer, to “disappear”. I’m guessing that these elements don’t follow the scale and are still acting like the frame is 100,000px tall/wide
What did you test/tried until now?
As far as I can see, this is a quite simple css assigned to ha-state-icon, e.g.
color: rgb(255, 190, 87);
filter: brightness(74.6%);
and should be directly to set - without test.
using:
type: entities
title: Z-wave devices
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
}
.card-content {
max-height: 500px;
overflow-y: scroll;
}
entities:
- type: custom:decluttering-card
template: zwave_device
variables:
- name: Ikea hub
- id: ikea_hub
- type: custom:decluttering-card
template: zwave_device
variables:
- name: Stookhok
- id: stookhok
etc
etc
I get a beautifully scrolling list of all Zwave devices, in the style I have set throughout my config:
however, and this is a first, when scrolling that list, I can see the fold labels shine through my header:
@Ildar_Gabdullin since we have been discussing the new fold-entity-row today (which is employed here too), would you know how to mitigate this?
I can add a margin of 8px to the bottom the header, but then we see the top divider of the first fold…
btw if I carefully wiggle the mouse pointer, I can also see a horizontal scrollbar…
How can I reposition a whole entities card row to the right (“margin-left: 20 px;” for example)?
I want the entity icon to start where normally the text starts so move everything a bit to the right.
Other trick (I’m not aware of) would be to place an mdi icon within the text part of an entities card row - don’t think that’s possible.
I tried this:
type: picture-elements
image: /local/lovelace/Kitchen_blur.jpg
elements:
- type: state-label
entity: sensor.blank_blank
title: null
prefix: Kitchen
attribute: null
style:
transform: translate(0%,0%)
top: 70%
left: 2%
font-size: 1.4vw
color: white
text-shadow: 1px 1px 1px rgba(0,0,0,0.5)
- type: state-label
entity: climate.climate_kitchen
icon: mdi:radiator
prefix: '🌡 '
suffix: '°C'
attribute: temperature
style:
transform: translate(0%,0%)
left: 2%
top: 81%
font-size: 0.9vw
color: rgb(190,190,190)
- type: state-icon
entity: light.cookinglights
icon: mdi:spotlight
style:
transform: translate(0%,0%)
top: 72%
right: 4%
'--paper-item-icon-color': white
'--paper-item-active-icon-color': yellow
When light goes on the icon changes to the colour reflecting its brightness and temperature, I really don’t like that. All I want is one colour for ‘on’ and ‘off’ state.
type: vertical-stack
title: Left padding
cards:
- type: entities
entities: &ref_entities
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: entities
entities: *ref_entities
card_mod:
style: |
.card-content {
padding-left: 64px;
}
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
hui-generic-entity-row {
padding-left: 24px;
}
- entity: sun.sun
card_mod:
style: |
hui-generic-entity-row {
padding-left: 48px;
}
I do not know how to add an icon - but you can add an image:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content:before {
background: url("/local/images/Stan_small.png");
content: "----";
color: transparent;
background-size: cover;
}
Look at this card:
- type: entities
title: Header
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
.card-header {
background-color: rgba(255,0,0,0.2);
}
.card-content {
background-color: rgba(0,255,0,0.2);
}
It is clear that “header” & “card-content” areas are overlapping.
With “margin-top: 0px” they are not:
- type: entities
title: Header
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
.card-header {
background-color: rgba(255,0,0,0.2);
padding-top: 0px;
padding-bottom: 0px;
}
.card-content {
background-color: rgba(0,255,0,0.2);
margin-top: 0px;
overflow-y: scroll;
overflow-x: hidden;
max-height: 300px;
margin-bottom: 16px;
}
a yes, thats a nice variant too. It has the same effect as my margin in the header adding the 8px to the bottom.
However, because all of my entities are folds, the card shows the top divider. which is what I ws trying to prevent, and have it look like the first screenshot above
guess that cant be done
icons are also sag images, so you can add:
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content:before {
background: url("/local/weather/laptop-mac.svg");
content: "----";
color: transparent;
background-size: cover;
}
they have to be in /local though. I tried to add it from custom_icons in the config root, and that would work, though inspector showed the correct path, it claimed it couldn’t find it…
You may make the 1st divider transparent.
Kind of:
type: entities
title: Header
entities:
- &ref_0
type: custom:fold-entity-row
head:
type: section
label: Label
padding: 0
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- *ref_0
- *ref_0
- *ref_0
- *ref_0
- *ref_0
- *ref_0
- *ref_0
card_mod:
style:
.card-content div:
fold-entity-row $ hui-section-row $: |
.divider {
margin-top: 0px !important;
}
fold-entity-row $: |
ha-icon {
margin-top: 8px !important;
}
.card-content:
fold-entity-row $ hui-section-row $: |
.divider {
background-color: transparent !important;
}
.: |
.card-header {
background-color: var(--divider-color);
padding-top: 0px;
padding-bottom: 0px;
}
.card-content {
overflow: hidden scroll;
max-height: 366px;
margin-top: 0px;
margin-bottom: 16px;
padding-bottom: 0px;
}
I’ll try to check it.
1 Like
I do not see any try with card_mod, the topic you have put your question. Where is it?
Anyway: First you should always read 🔹 Card-mod - Add css styles to any lovelace card - #1396 by Ildar_Gabdullin. As most of the times, there are examples for the cards, here picture-elements.
Above, I pointed to the CSS-values, you should try to adjust. And as expected, it seems, that it is directly working.
- type: state-icon
card_mod:
style:
state-badge:
$: |
ha-state-icon {
color: red !important;
filter: initial !important;
}
Of course, you have to jinja around this to distinguish beteween on and of and replace red with other color or css-variable.
2 Likes
Thx, it works and this is exactly what I wanted. I nearly gave up because while searching, I never came across the post you linked.
I wish something so simple like choosing an icon for the state and its colour was possible via UI in HA, it would save a ton of time for the CSS noobs like me. Anyway, thanks again.
Alright. So I need to apply it to the whole card, applying it to a row is not possible, right?
So I need to rework my whole section. Because this is what I currently use (for maaaaany sensors) and I only want the type: weblink row to move to the right a bit.
- type: conditional
conditions:
- entity: sensor.haos_update
state: 'on'
card:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.haos_update
name: HAOS
toggle: false
state_color: false
show_state: false
secondary_info: ''
entities:
- entity: sensor.haos_update
name: Ist
attribute: current_version
- entity: sensor.haos_update
name: Neu
attribute: newest_version
state_header: Update?
column: false
- type: weblink
name: Gehe zu Config-Dashboard
url: /config/dashboard
icon: mdi:arrow-right
card_mod:
style:
.: |
ha-card {
margin-left: 1px;
margin-right: 1px;
#margin-top: -10px;
margin-bottom: -25px;
#box-shadow: none;
}
Is it possible to combine the hui-generic-entity-row: with the padding-left: xxpx;?
This did NOT work for me. Possibly because I nested the entities card within a conditional card, right?
- type: conditional
conditions:
- entity: sensor.haos_update
state: 'on'
card:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.haos_update
name: HAOS
toggle: false
state_color: false
show_state: false
secondary_info: ''
entities:
- entity: sensor.haos_update
name: Ist
attribute: current_version
- entity: sensor.haos_update
name: Neu
attribute: newest_version
state_header: Update?
column: false
- type: weblink
name: Gehe zu Config-Dashboard
url: /config/dashboard
icon: mdi:arrow-right
card_mod:
style: |
hui-generic-entity-row {
padding-left: 44px;
}
card_mod:
style:
.: |
ha-card {
margin-left: 1px;
margin-right: 1px;
#margin-top: -10px;
margin-bottom: -25px;
#box-shadow: none;
}
UI hacking is soooooo complicated. Learned a lot but still feeling like first hour in first class… 
The 3rd card in my example contains different styles for each row.
Using “#” to comment does not work here.
The header will not be displayed since " show_state: false".
This kind of styles should be defined as:
card_mod:
style: |
ha-card {
This row is not "hui-generic-entity-row".
Always use Code Inspector for styling:
Your element is “a”.
1 Like
Why is this better or needed?
Hey Ildar, getting back to this. It was one of the last cards I had still to perfectionize…
even with your exact config, the text of my template would still run through the images, because it crosses the half of the card, as you can see below.
Even after having cut the word Media in each attribute. (see the template in the config)
So I decided to give it a try an have them vertically stacked, first the markdown, below the image, and found only 2 ways to do so really.
1- a core entities card and set a background on that (and an empty entities list). We need to set the height of the background manually, and that is a bit of a trial and error, but, the end result is really nice
2- a custom:button-card, set to 1/1, no action (can change of course) and nothing fancy
for both cards I needed to find a way to fill the full width. 16px allround. this is what I did:
1- entities card
type: vertical-stack
cards:
- type: custom:auto-entities
show_empty: false
card:
type: entities
title: Plex Playing
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card.type-markdown {
box-shadow: none;
margin: -8px -16px;
}
content: >
{% set player = config.entity %}
{% if states(player) not in ['unknown','unavailable'] %}
{%- for attr in states[player].attributes %}
{%- if not attr in ['media_content_id','icon','entity_picture', 'hide_attributes',
'media_position_updated_at', 'media_duration','media_position',
'player_source', 'media_content_rating',
'is_volume_muted','username','friendly_name', 'volume_level',
'supported_features'] %}
{{attr.split('media_')[1]|replace('_',' ')|title}}: {{states[player].attributes[attr]|title}} {%- endif %}
{% endfor %} User: {{state_attr(player,'username')}}
{% else %} Nothing playing
{% endif %}
sort:
method: name
- type: custom:auto-entities
show_empty: false
card:
type: entities
card_mod:
style: |
ha-card {
margin: -8px 0px 0px 0px;
box-shadow: none;
}
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:hui-element
card_type: entities
card_mod:
style: |
ha-card {
background: url({{state_attr(config.entity,'entity_picture')}});
box-shadow: none;
background-size: cover;
margin: -16px;
height: 500px;
}
entities: []
and the button-card:
replace with
- type: custom:auto-entities
show_empty: false
card:
type: entities
card_mod:
style: |
ha-card {
margin: -8px 0px 0px 0px;
box-shadow: none; /* not really necessary because of button card mode below */
}
.card-content {
margin: -16px;
}
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:button-card
aspect_ratio: 1/1
show_name: false
show_icon: false
tap_action: none
card_mod:
style: |
ha-card {
background: url({{state_attr(config.entity,'entity_picture')}});
box-shadow: none;
background-size: cover;
}
result:
note the button really is square, the entities card seems a longer image.
On the iPhone this fits the full screen perfectly.
I also tried it with core picture card, but ofc it complains it needs an image… didnt really try hard yet, and maybe I can overcome that with config-template-card. That would require yet another custom-card, and I’d like to keep it as simple as can be.
didnt test a stack-in-card…
but for you I just did, and it works the same, can simply replace vertical-stack with custom:stack-in-card, and still need several of the mods, so no real advantage I guess
I think this construction is “more traditional”, more clear.
The “.:” means “select the current element” - but what is a meaning of using this for the 1st selector?
Ok, it is not a mistake to use the “.:” first - but it is less clear.
O.k. Thanks. Thought there is more in regard to performance or something else. Compare to my questions somewhere above in the thread.
Read this, I find it very useful.
Note that 99.99 % of my examples are WITHOUT optimization but could be a bit MORE CLEAR for new people since they show DOM navigation:
without optimization:
element:
$:
element:
$: |
element {
...
}
with optimization:
element $ element $: |
element {
..
}