Now THATās how it should look out of the box. Brilliantly done.
hello, trying to reduce the size of the header image of the plant-card. was able to get it to work on my browser, but any change to the image does not go through on lenovo smart display which just displays the dashboard via a webpage. inspecting the element of the lenovo display using chrome shows that the size isnt changing. any suggestion on how to fix this?
- type: custom:flower-card
entity: plant.snake_plant
show_bars:
- illuminance
- moisture
- conductivity
- temperature
battery_sensor: sensor.plant_sensor_63a3_battery
style: |
ha-card {
.header {
height: 72px
};
.header > img {
width: 25px; !important
height: 25px; !important
margin-top: 10px
};
margin-top: 0px !important
};
Hi there,
Iām having this card with conditional switches in it and I just cannot get the icons colored:
type: entities
title: Schlafzimmer
entities:
- type: conditional
conditions:
- entity: switch.drucker
state: 'off'
row:
entity: switch.drucker
type: button
icon: mdi:printer-off
name: Drucker aus
action_name: Einschalten
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
- type: conditional
conditions:
- entity: switch.drucker
state: 'on'
row:
entity: switch.drucker
type: button
icon: mdi:printer
name: Drucker an
action_name: Ausschalten
style:
hui-simple-entity-row$: |
hui-generic-entity-row {
--paper-item-icon-color: orange;
}
- type: conditional
conditions:
- entity: input_boolean.fernsehereg
state: 'off'
row:
entity: sun.sun
icon: mdi:desk-lamp
name: Test entity
style:
hui-simple-entity-row$: |
hui-generic-entity-row {
--paper-item-icon-color: red;
}
The icon in the last entry, conditional too, is colored red, just as wanted, but none of the above two work! Is it because they are switches?
Please help,
zavjah
No idea, getting some weird resultsā¦
I am trying to change stack-in-cardās header āpadding-bottomā to 0px globally to all my stack-in-cardās via my theme.yaml.
The only way I can change the CSS style is via a single stack-in-card via Developer Tools (in the screenshot example below). Iāve already spent hours on this trying to figure this out on my own without any luck. I am hoping someone will be able to help; as Iāve tried everything I possibly could.
I tried applying card-mod custom CSS via stack-in-card code below without any luck.
Things Iāve triedā¦
cards:
- entities:
- entity: sensor.titan_download_speed
icon: mdi:speedometer
name: Download Speed
- entity: sensor.titan_upload_speed
icon: mdi:speedometer
name: Upload Speed
type: entities
- aspect_ratio: 56%
camera_view: live
entity: camera.desktop
show_state: false
type: picture-entity
title: Server
type: custom:stack-in-card
card_mod:
style: |
.card-header, :host ::slotted(.card-header) {
padding-bottom: 0px !important;
}
I also tried:
card_mod:
style: |
ha-card.card-header, h1.card-header {
padding-bottom: 0 !important;
}
andā¦
card_mod: |
style: |
ha-card.type-custom-stack-in-card, h1.card-header {
padding-bottom: 0px !important;
}
Not a single thing I tried works, unfortunately.
Donāt you see that the ācard-headerā is inside shadowRoot?
code
type: custom:stack-in-card
title: xxxxxxxxxxxxxxxxxxx
cards:
- type: entities
entities:
- entity: sun.sun
- show_state: false
show_name: true
type: picture-entity
entity: sun.sun
image: /local/images/test/ishimura.png
card_mod:
style:
$: |
.card-header {
background: cyan;
}
@Ildar_Gabdullin thank you so much. This is my first experience with shadowRoot. The code works within that specific card.
I tried to globally make this change in my theme.yaml (see code below); however, it doesnāt seem to affect any of my similar stack-in-cards. I completely deleted the web browser cache and reloaded the webpage without any luck.
I just appended the card-mod code you gave me to the bottom of my theme.yaml file (code below)ā¦ however, it didnāt make any difference:
card-mod-theme: techleech
header-height: 56px
card-mod-root: |
.edit-mode, app-header, app-toolbar {
background: var(--app-header-background-color) !important;
color: var(--primary-text-color) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
card-mod-row-yaml: |
.: |
hui-generic-entity-row {
height: 38px;
}
card_mod:
$: |
.card-header {
padding-bottom: 0 !important;
}
- Card-mod-themes are discussed in another thread.
- Check this: THIS thread ā 1st post ā link at the bottom ā themes ā styling classes.
1 Like
Thank you. This worked:
card-mod-card-yaml: |
$: |
.card-header {
padding-bottom: 0 !important;
}
This style is applied to all cards with ā.card-headerā inside shadowRoot, not to āstack-in-cardā only.
I tried my best. Iām not sure how to specify only stack-in-card.
just wanted to say thank you for all these examples and posts here which eventually (after several hours of reading and searching, brought me to the correct fix for what I wanted for the markdown card 
(see pastebin for the code I used: https://pastebin.com/v8aAqVYa)
I gave you a link how to style classes.
Statistics graph: replacing a label
Consider a Statistics graph with ONE selected line (let it be MAX):
If you do not like this āmaxā word - the label can be w/o it, any text may be specified here:
code
type: statistics-graph
entities:
- sensor.xiaomi_cg_1_temperature
stat_types:
- max
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend li .label {
font-size: 0px;
display: flex;
}
.chartLegend li .label:before {
color: var(--secondary-text-color);
content: "any text";
font-size: var(--mdc-typography-body1-font-size,1rem);
}
2 Likes
Hello,
I have the following āpicture entityā:
type: picture-elements
elements:
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.aber
style:
top: 80%
left: 50%
width: 200px
image: /cards/roborock.png
Now I would like to remove everything and just keep the text from the dropdown and the arrow.
It should only look like text that you can fold out.
Unfortunately, Iām completely at the end of my rope.
Already told you where to start: 1st post ā link at the bottom ā styles for input-select (how to style the row).
Suggest you to start testing with a simple input_select inside Entities card, not for complex cases like āinput-select inside hui-element inside Picture elementsā.
I read through the things. however, I have absolutely no knowledge of css. That then in connection with the google translator makes it very difficult for me (my English from school is very dusty).
Iāll keep testing.
Made it this far now. A colleague helped me.
Now we only fail because of the shadow.
We actually thought we would have removed that too.
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.aber
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
ha-card {
border: 0px;
background: none;
box-shadow: none;
}
.card-header {
background-color: var(--primary-background-color);
}
.: |
ha-select {
height: 40px;
width: 120px;
}
style:
top: 80%
left: 50%
width: 200px
Try āborder: noneā (have not check other things)
Unfortunately, that makes no difference.