Thanks for clearing that up, I confess I had read that but not really understood it (and since it wasn’t an exhasutive list - impossible I assume!) That will help me tackle a load more stuff now!
simple challenge, no easy fix?
have a picture-entity card with a default camera stream from Buienradar integration. I want to have it squared, so I can fit it in a stack/grid or other config, next to a 1/1 custom:button-card.
There is no property I can find to auto resize this picture-entity so it always covers the square it should. I can give it a larger canvas, but then it doesnt resize properly, and ofc, therein lies the challenge. Have it show properly on desktop And mobile:
- type: horizontal-stack
cards:
- !include /config/dashboard/includes/button/include_button_animated_weather.yaml
- type: picture-entity
card_mod:
style:
hui-image:
$: |
#image {
object-fit: cover;
}
if I mod the card itself, the image wont change along, so I probably need to set the #image property.
my goal is to tie these together and flatten the picture with:
- type: custom:mod-card
card_mod:
style: |
ha-card {
--stack-card-margin: 0px;
--ha-card-box-shadow: none;
}
card:
and have it show like:
fwiw, stack-in-in-card has the identical result:
- type: custom:stack-in-card
mode: horizontal
cards:
- !include /config/dashboard/includes/button/include_button_animated_weather.yaml
- type: picture-entity
the official way to make an image resize automatically, as instructed at W3 seems to already been implemented…:
- type: picture-entity
card_mod:
style:
hui-image:
$: |
#image {
max-width: 100%;
height: auto;
}
makes no difference what so ever
Please have a look how I can make this fit better?
thx
Update
made a wild guess and searched for ‘ratio’… lo and behold;
- type: custom:stack-in-card
mode: horizontal
cards:
- !include /config/dashboard/includes/button/include_button_animated_weather.yaml
- type: picture-entity
card_mod:
style:
hui-image:
$: |
#image {
aspect-ratio: 1/1;
}
entity: camera.buienradar
show_state: false
show_name: false
camera_view: auto
which resizes perfectly on any size. ofc the image is a bit out of perspective. Still havent found a way to zoom in only. other than
transform: scale(1.2);
which loses the time stamp in the top. does keep the perspective 100%
should have though of that earlier, since button-card uses that with a reason 
see: aspect-ratio | CSS-Tricks - CSS-Tricks for some extra explanation
bingo!
How to connect a font to a specific entity, downloaded from the Internet?
Can someone perhaps help me style an element inside a card (custom tabbed-card). I have found the correct code and it works using inspect element. However I am having difficulties using it is card_mod, since I have no clue how to traverse the DOM correctly. I have been at it trying to traverse the DOM for 2 weeks now with no succes. I hope someone can find the time to help me with this.
It’s located in this line: mwc-tab-bar. And the changes I want to add to are in
:host {
display: block;
}
Any help is greatly appreciated!
Trying to customize the color of the icon of a button that is included in an entities card. I’ve found references aboves to the below pattern that uses ha-state-icon:
- type: button
entity: input_boolean.inhibit_siren_sound
icon: mdi:volume-off
name: Siren Sound is DISABLED
action_name: enable
card_mod:
style:
ha-state-icon:
$: |
ha-svg-icon {
color: green;
}
tap_action:
action: toggle
It just does not work. This is with HA 2023.2, default dark theme.
card_mod is working well in my install as I am using it to conditionally color icons of other entities. It doesn’t seem to work with buttons for some reason.
I tried many variations of this with no luck. I also tried setting state_color to False, to no avail.
Any hint/idea?
code
type: entities
entities:
- type: button
name: entity specified
entity: input_boolean.test_boolean
tap_action:
action: none
card_mod:
style:
ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: magenta;
}
- type: button
name: entity NOT specified
tap_action:
action: none
card_mod:
style:
ha-state-icon $: |
ha-svg-icon {
color: cyan;
}
This happened because users just copy/paste solutions without attempting to find out a reason by Code Inspector.
hello all how do i display a text based on a state i tried this code but it doesn’t work! can you help me thanks 
- type: custom:multiple-entity-row
entity: sensor.conteggiotapparelle
style: |
.state.entity {
{% if states('sensor.controllotapparellenotificheestate')== 'on' %}
content: "da";
{% endif %}
{% if states('sensor.controllotapparellenotificheestate')== 'off' %}
content: "da";
{% endif %}
}
state_color: true
icon: mdi:information
toggle: false
name: STATO
state_header: TAPPARELLE
What do you want to achieve?
I am not an expert in CSS, but imho the “content” property is used for pseudoclasses like “after” & “before”.
Styling multiple-entity-row: go to 1st post → link at the bottom → styles for multiple-entity-row
I simply want to display a custom state against the original state of the sensor
A small picture describing your needs is better than 100 words.
Post s draft made in MS Paint or whatever.
thanks @Ildar_Gabdullin !!
Great pointer. I tried this in a plain entities card and it worked fantastic.
Now my case is actually a bit more complicated, I have a conditional card embedded in the entities card, like so,
- type: conditional
conditions:
- entity: input_boolean.inhibit_siren_sound
state: 'on'
row:
type: button
entity: input_boolean.inhibit_siren_sound
icon: mdi:volume-off
name: Siren Sound is DISABLED
action_name: enable
#state_color: False
card_mod:
style:
hui-conditional-row:
$:
hui-button_row:
$:
ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: green;
}
tap_action:
action: toggle
Where you can see I tried to change the color of the icon, but this did not work - I took some hints from your post and looking at the browser console, which shows:
Unfortunately I have an almost zero understanding of html styling and all my tests failed. I can see that card_mod gets triggered and inserts some code right before hui-conditional-row ends but I can see that’s the wrong place for the insertion. I tried to get the insertion to be done within “ha-icon” but couldn’t. I tried some variations like,
card_mod:
style:
hui-conditional-row $ hui-button_row $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: green;
}
none of which worked. Any idea/pointer on how to tackle this case?
typo?
Correct it and test again, see if it helps you.
Definitely a typo! Thanks.
Still no there though,
card_mod:
style:
hui-conditional-row:
$:
hui-button-row $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: green;
Card_mod still not inserting color:green like it does in the plain entity example; it does insert the stance in the html code but it’s empty, there is no color: green in it for some reason
Try removing this
In the end, reading the documentation of this custom module, I found this;
NOTE: card-mod only works on cards that contain a ha-card element.
This includes almost every card which can be seen, but not e.g. conditional,
entity_filter, vertical-stack, horizontal-stack, grid.
Note, though that those cards often include other cards, which card-mod
can work on.
See the manual for each card to see how to specify parameters for the
included card(s).
Which I guess explained my problem. I thought about working around the issue by using vertical-stack-in-card and then a conditional card with an entities card inside, but in the end I opted to use a custom button-card with a bunch of templates in it to customize icon color, label, and actions, to achieve roughly the same result with less code (it doesn’t look as nice though as native buttons, for this use case)
use custom:template-entity-row for that. Simply set the state to any template you desire
no need for card_mod at all in that case
1 Like
What text do you want to display?
If it is just some sensor’s state - why not using this sensor as the main for row?
If it is some combination of some sensors’ states + some text → then try following the advice of Marius about template-entity-row.
1 Like
Scrollable markdown
Shows scrollbar when needed:
code
- type: markdown
content: |
first
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
last
card_mod:
style: |
ha-markdown {
max-height: 200px;
overflow-y: auto;
}
Thanks to “modern design” huge round corners we see a glitch for the scrollbar in corners.
Another example fixes this:
code
- type: markdown
content: |
first
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
last
card_mod:
style:
ha-markdown $: |
ha-markdown-element p {
max-height: 210px;
overflow-y: auto;
background-color: rgba(0,255,0,0.2);
}
.: |
ha-markdown {
padding-right: 4px !important;
}
4 Likes