I have this remote in my dashboard but would like to change the color of the icons.
Can I use card-mod to do that?
Along the same lines thereās nothing in the code to indicate blue so there must be a default color for the dashboard somewhere
Many thanks for the comment, but I donāt know how to use button card styles. The documentation is far too complex to understand and I couldnāt find anyone trying to do the same in the forums.
Would you help me with the code for my specifications (wrote them in the first comment)?
Thank you in advance!
Ive just tried this and it doesnt seem to work for me.
Could you please post the fill card code so I can see what Im doing wrong???
Full disclosure - it is nested inside a custom:vertical-stack-in-card
Heres my code:
- type: custom:mod-card
cards:
type: entities
entities:
- entity: input_select.test_dropdown_for_profiles
style: |
state-badge{
display: none;
}
plus what is the entity to change the card background color. Entities cards are really picky about the properties
Thanks
Please have a look on the first post of this thread. Link at the bottom from Ildar with lots of examples. And in your case with lots of basics. Unfortunately there are so many errors in your code, that you really should read and try to understand how it is working.
And donāt ping people here in the forum.
1 Like
Ask e.g. here: Fun with custom:button-card - #711 by onepointbrewing
You should really use the options of custom:button-card and not apply card-mod here.
1 Like
Things have changed a bit since 2020 and indeed it doesnāt work anymore that way.
I also use vertical and horizontal stack in card as you can see below.
Here is a small portion of my card for the 1st input_select, the 2nd input_select is conditional depending on what was selected one the 1st one so the code for the all card would be too long.
cards:
- type: 'custom:vertical-stack-in-card'
cards:
- type: horizontal-stack
cards:
- type: entities
show_name: false
show_header_toggle: false
entities:
- entity: input_select.heater_mode
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
style: |
ha-card {
padding: 0px 5px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
box-shadow: none !important;
border: none !important;
}
#states.card-content {
padding: 0px 0px 0px 0px !important;
}
Thank you for providing a CONSTRUCTIVE reply.
Very much apprecated when people help rather than criticize.
Would you happen to know the property for the font-family???
Currently it doesnt seem to pick up for an entities card (even though I have it loaded as a typescript resource)
- type: entities
show_name: true
show_header_toggle: false
entities:
- entity: input_select.fv1_profile_selector
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
style: |
ha-card {
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px -12px !important;
box-shadow: none !important;
border: none !important;
font-family: Barlow Condensed !important;
}
.card-content {
padding: 0px 0px 0px 0px !important;
background: rgba(0,0,0,0) !important;
font-family: Barlow Condensed !important;
āProfileā and āTime remainingā are markdown cards using Barlow Condensed but the entities card āNot Activeā seems to be using Sans Serif??
Might also not be possible from this issue Lovelace card title custom font Ā· Issue #3115 Ā· home-assistant/frontend (github.com)
You should use developper tools to inspect the DOM on elements you want to apply changes.
Entries in the āselectā element are encapsulated in a ha-select component so you need to do it that way:
- type: entities
show_name: true
show_header_toggle: false
entities:
- entity: input_select.fv1_profile_selector
style:
ha-select $: |
* {
font-family:Barlow Condensed !important;
}
hui-generic-entity-row $: |
state-badge {
display: none;
}
style: |
ha-card {
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px -12px !important;
box-shadow: none !important;
border: none !important;
}
.card-content {
padding: 0px 0px 0px 0px !important;
background: rgba(0,0,0,0) !important;
You are an absolute genlteman. Tq so much for this.
I know where to look at DOM for elements but TBH I dont know how to interpret them
Hi all,
Iām trying to style standard entities card to kinda mushroom style
Could you please suggest to me a way to do a wildcard style for all types of the entity row (hui-simple-entity-row, hui-sensor-entity-row, hui-toggle-entity-row, hui-input-text-entity-row etc.) to reduce this card mod style part
type: entities
entities:
- entity: switch.bathroom_socket
name: Socket
- entity: sensor.bathroom_socket_current
name: Current
- entity: sensor.bathroom_socket_power
name: Power
- entity: sensor.bathroom_socket_voltage
name: Voltage
- entity: sensor.bathroom_ths_temperature
name: Temperature
- entity: sensor.bathroom_ths_humidity
name: Humidity
- entity: input_text.washing_machine_status
show_header_toggle: false
state_color: true
card_mod:
style:
.: |
.card-content {
padding: var(--spacing) !important;
}
.card-content div:not(:last-child)::after {
content: "";
display: block;
height: 1px;
background: var(--divider-color);
margin: var(--spacing) 0 var(--spacing) calc(var(--mush-icon-size) + var(--spacing));
}
hui-simple-entity-row:
$:
.: |
hui-generic-entity-row {
display: grid;
grid-template:
"i n"
"i s" / min-content 1fr;
}
hui-generic-entity-row$:
.: |
state-badge {
grid-area: i / i / i / i;
width: var(--mush-icon-size) !important;
height: var(--mush-icon-size) !important;
border-radius: var(--inner-border-radius) !important;
flex: 0 0 var(--mush-icon-size) !important;
}
.info {
grid-area: n / n / n / n;
margin: 0 var(--spacing) !important;
font-weight: var(--mush-card-primary-font-weight);
font-size: var(--mush-card-primary-font-size);
line-height: var(--mush-card-primary-line-height);
color: var(--primary-text-color);
}
.value {
grid-area: s / s / s / s;
margin: 0 var(--spacing) !important;
font-weight: var(--mush-card-secondary-font-weight);
font-size: var(--mush-card-secondary-font-size);
line-height: var(--mush-card-secondary-line-height);
color: var(--secondary-text-color);
display: flex;
justify-content: start;
align-items: start;
text-transform: capitalize;
}
state-badge$:
.: |
ha-state-icon {
display: flex;
justify-content: center;
align-items: center;
height: var(--mush-icon-size);
width: var(--mush-icon-size);
}
ha-state-icon:before {
content: "";
position: absolute;
width: var(--mush-icon-size);
height: var(--mush-icon-size);
border-radius: var(--inner-border-radius);
background: currentColor;
opacity:0.2;
}
ha-state-icon:
$:
.: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
ha-icon:
$: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
hui-sensor-entity-row:
$:
.: |
hui-generic-entity-row {
display: grid;
grid-template:
"i n"
"i s" / min-content 1fr;
}
hui-generic-entity-row$:
.: |
state-badge {
grid-area: i / i / i / i;
width: var(--mush-icon-size) !important;
height: var(--mush-icon-size) !important;
border-radius: var(--inner-border-radius) !important;
flex: 0 0 var(--mush-icon-size) !important;
}
.info {
grid-area: n / n / n / n;
margin: 0 var(--spacing) !important;
font-weight: var(--mush-card-primary-font-weight);
font-size: var(--mush-card-primary-font-size);
line-height: var(--mush-card-primary-line-height);
color: var(--primary-text-color);
}
.value {
grid-area: s / s / s / s;
margin: 0 var(--spacing) !important;
font-weight: var(--mush-card-secondary-font-weight);
font-size: var(--mush-card-secondary-font-size);
line-height: var(--mush-card-secondary-line-height);
color: var(--secondary-text-color);
display: flex;
justify-content: start;
align-items: start;
text-transform: capitalize;
}
state-badge$:
.: |
ha-state-icon {
display: flex;
justify-content: center;
align-items: center;
height: var(--mush-icon-size);
width: var(--mush-icon-size);
}
ha-state-icon:before {
content: "";
position: absolute;
width: var(--mush-icon-size);
height: var(--mush-icon-size);
border-radius: var(--inner-border-radius);
background: currentColor;
opacity:0.2;
}
ha-state-icon:
$:
.: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
ha-icon:
$: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
hui-toggle-entity-row:
$:
hui-generic-entity-row$:
.: |
state-badge {
width: var(--mush-icon-size) !important;
height: var(--mush-icon-size) !important;
border-radius: var(--inner-border-radius) !important;
flex: 0 0 var(--mush-icon-size) !important;
}
.info {
margin: 0 var(--spacing) !important;
font-weight: var(--mush-card-primary-font-weight);
font-size: var(--mush-card-primary-font-size);
line-height: var(--mush-card-primary-line-height);
color: var(--primary-text-color);
}
state-badge$:
.: |
ha-state-icon {
display: flex;
justify-content: center;
align-items: center;
height: var(--mush-icon-size);
width: var(--mush-icon-size);
}
ha-state-icon:before {
content: "";
position: absolute;
width: var(--mush-icon-size);
height: var(--mush-icon-size);
border-radius: var(--inner-border-radius);
background: currentColor;
opacity:0.2;
}
ha-state-icon:
$:
.: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
ha-icon:
$: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
hui-input-text-entity-row:
$:
.: |
ha-textfield {
margin-left: var(--spacing) !important;
}
ha-textfield$: |
label {
height: 38px !important;
padding: 0 var(--spacing) !important;
}
#label {
left: var(--spacing) !important;
}
.mdc-text-field__input {
position: absolute !important;
top: 12px;
}
hui-generic-entity-row$:
.: |
state-badge {
width: var(--mush-icon-size) !important;
height: var(--mush-icon-size) !important;
border-radius: var(--inner-border-radius) !important;
flex: 0 0 var(--mush-icon-size) !important;
}
ha-textfield {
margin: var(--spacing) !important;
}
state-badge$:
.: |
ha-state-icon {
display: flex;
justify-content: center;
align-items: center;
height: var(--mush-icon-size);
width: var(--mush-icon-size);
}
ha-state-icon:before {
content: "";
position: absolute;
width: var(--mush-icon-size);
height: var(--mush-icon-size);
border-radius: var(--inner-border-radius);
background: currentColor;
opacity:0.2;
}
ha-state-icon:
$:
.: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
ha-icon:
$: |
ha-svg-icon {
font-size: var(--mush-icon-size) !important;
width: var(--mush-icon-symbol-size) !important;
height: var(--mush-icon-symbol-size) !important;
}
Thanks in advance for any advice
Iāve decided to use mushroom cards and group them using custom:stack-in-card with minimal styling to achieve the same look and even better, but anyway Iām interested in the previous question (for future cards styling 
)
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-entity-card
entity: switch.bathroom_socket
name: Socket
icon_color: teal
- type: custom:mushroom-entity-card
entity: sensor.bathroom_socket_current
name: Current
- type: custom:mushroom-entity-card
entity: sensor.bathroom_socket_power
name: Power
- type: custom:mushroom-entity-card
entity: sensor.bathroom_socket_voltage
name: Voltage
- type: custom:mushroom-entity-card
entity: sensor.bathroom_ths_temperature
name: Temperature
- type: custom:mushroom-entity-card
entity: sensor.bathroom_ths_humidity
name: Humidity
- type: custom:mushroom-entity-card
entity: input_text.washing_machine_status
card_mod:
style:
hui-vertical-stack-card$:
.: |
#root *:not(:last-child)::after {
content: "";
display: block;
height: 1px;
background: var(--divider-color);
margin-left: calc(var(--mush-icon-size) + var(--mush-spacing) * 2);
margin-right: var(--mush-spacing);
}
2 Likes
Need your help guys, this is driving me nuts. I have 3 top cards representing a āheader menuā in my dashboard. SInsce latest release the left menu of HA falls under these cards, making the left menu unusable. Do you see what is wrong? This is my code:
type: custom:vertical-stack-in-card
horizontal: true
view_layout:
grid-area: header
cards:
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: menu
card_mod:
style: |
ha-card {
border: 0px !important;
box-shadow: none !important;
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
- type: template
content: Casa
card_mod:
style: |
ha-card {
border: 0px !important;
box-shadow: none !important;
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
- type: entity
entity: input_button.dummy
icon: mdi:magnify
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: custom:search-card
max_results: 50
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: browser_mod.navigate
data:
path: '?disable_km&edit=1'
- service: browser_mod.refresh
browser_id: THIS
content_info: none
card_mod:
style: |
ha-card {
border: 0px !important;
box-shadow: none !important;
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
margin-right: -10px;
margin-left: -10px;
margin-top: -10px;
height: 70px !important;
border: 0px !important;
}
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: 0;
}
Hi guyās,
i need your help, iām a newbie in HA. My Problem, i send a msg.Payload from Nodered with the sensor node to Homassistant . When the Payload is āokā then the entitƤt value must be green is the payload everything else then the entitƤt value must be red.
I hope you know what i mean
thank you so much
Saranger
type: entities
entities:
- entity: sensor.rwm_k5
card_mod:
style:
hui-generic-entity-row$: >-
.info.pointer.text-content { color: black; } .text-content:not(.info)
{ color: green; }
Hi all.
I need your help.
I have this situation.
I need to change attribute to
state-badge, info, flex, state
but I canāt combine them.
This work
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
color: orange;
}
.info {
display: none;
}
But I donāt know how to add the other two.
This not work, because flex and state are out of shadow
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
color: orange;
}
.info {
display: none;
}
.flex {
justify-content: center!Important;
padding-top: 10px;
}
.state {
margin-left: 20px;
}
This work only for last 2
card_mod:
style:
hui-generic-entity-row:
.flex {
justify-content: center!Important;
padding-top: 10px;
}
.state {
margin-left: 20px;
}
How to combine the two settings?
Regards,
Marco
Trying to center the Title of the Card, but canĀ“t get it centered:
type: entities
title: 'āKochen'
show_header_toggle: false
state_color: true
theme: Dirk
card_mod:
style: |
.card-header {
text-align: center;
}
entities:
- entity: switch.kueche_licht_automatik
name: Automatik Licht
icon: mdi:power
- type: custom:slider-entity-row
.
.
.
havenĀ“t found a solution here by searching and reading. I guess .card-header is not the title?
@marcorm69 try to use this one
card_mod:
style:
hui-generic-entity-row:
.: |
.flex {
justify-content: center !important;
padding-top: 10px;
}
.state {
margin-left: 20px;
}
$: |
state-badge {
color: orange;
}
.info {
display: none;
}
Thank you!
Iām still having a little trouble navigating the DOM!
Regards,
Marco
sure it is, see š¹ Card-mod - Add css styles to any lovelace card - #1188 by Ildar_Gabdullin for other tricks with the headerā¦