Slowly but surely I am beginning to understand how to use this card. Thanks for the work you have put into it.
I am beginning to understand css selectors and how to use the debug_cardmod flag to find my away around.
What I would now like to do is be able to style a more-info card. Is this possible?
If it is, what is the starting point for building a selector path?
Thanks
That can be done either by using browser_mod to replace the popup with something you choose yourself (and can style), and my more-info-card, or by something like this
Thanks Thomas, will give browser-mod a try.
Iām trying to change icon color on state.
In ui-lovelace.yaml put the module:
resources:
- url: /community_plugin/compact-custom-header/compact-custom-header.js
type: module
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
In the view (default.yaml) used a glance card and put the style in:
- type: glance
style: |
ha-card {
--iron-icon-fill-color: {% if is_state(config.entity, 'on') %} yellow {% endif %};
}
title: Sfeerlicht
show_header_toggle: false
show_name: true
show_state: true
entities:
- entity: switch.tuya_ropelight
tap_action:
action: toggle
name: Touwlicht
icon: mdi:vanity-light
- entity: switch.tuya_aquarium
tap_action:
action: toggle
name: Aquarium
icon: mdi:fishbowl
- entity: switch.tuya_barlicht
tap_action:
action: toggle
name: Bar
icon: mdi:beer
- entity: switch.tuya_blokhutlicht
tap_action:
action: toggle
name: Blokhut
icon: mdi:home-flood
- entity: light.keuken_sfeerlamp_light
tap_action:
action: toggle
name: Keuken
icon: mdi:silverware-variant
- entity: switch.kerstverlichting
tap_action:
action: toggle
name: Kerst
icon: mdi:pine-tree
But the icons do not turn yellow. (also after HA restart and clear cache)
I inspected the div that holds the icon which has the following css:
What am I doing wrong?
Using config.entity only makes sense when youāre using it on a single entity, not an an entire card with several entities.
Compare to the example in the readme.
I did set it on all entities at first, will try again and post yaml and/or findings.
[edit]
After 8+ hours got it workingā¦ thank you @thomasloven
Used :host and not ha-card, also readme says --paper-item-icon-color but I used --iron-icon-fill-color
I have a vertical stack of glance cards. Only one card will show depending on the state of an input_select.
I would like to use card-mod to style the card that shows. The following snippet does style the card correctly but it stops the glance card from changing alongside the input_select. If I manually refresh the page, it shows the appropriate glance card (that is also correctly styled).
Thoughts?
- type: custom:mod-card
style: |
ha-card {
font-variant: small-caps;
--ha-card-background: rgba(200, 0, 0, 0.5);
}
card:
type: vertical-stack
#DEN
cards:
- type: conditional
conditions:
- entity: input_select.show_card_fp
state: Den
card:
type: glance
show_icon: false
show_name: true
entities:
- entity: sensor.den_motion_temperature_1
name: Temp
- entity: input_boolean.occupancy_den
name: Occupancy
- entity: binary_sensor.patio_door
name: Patio Door
- entity: input_select.mode_den
name: Mode
IĀ“m lost in translation/transition or whateverā¦ 
My code for the moment is looking like this, using ācard-modderā
cards:
- cards:
- card:
entities:
- sensor.ytterdorr_status
- sensor.altandorrvardagsrum_status
- sensor.altandorrhugosrum_status
- sensor.kallardorr_status
show_header_toggle: false
title: Dƶrrsensorer
type: entities
style:
background-color: 'rgba(50,50,50,0.3)'
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-size: 100% 100%
border: 'solid 1px rgba(100,100,100,0.3)'
border-radius: 20px
box-shadow: '3px 3px rgba(0,0,0,0.4)'
color: '#999999'
type: 'custom:card-modder'
type: vertical-stack
id: 950562a85sd766431382144510c71945db
type: vertical-stack
How should I change it so it look the same but using ācard-modā?
See the very bottom of this:
And
type: 'custom:card-modder'
would become
type: custom:mod-card
I just started using this today so take my advice with a spoonful of salt 
No that didnt work at all. Removed all style from card.
Solution:
card:
cards:
- entities:
- sensor.ytterdorr_status
- sensor.altandorrvardagsrum_status
- sensor.altandorrhugosrum_status
- sensor.kallardorr_status
show_header_toggle: false
title: Dƶrrsensorer
type: entities
type: vertical-stack
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.3);
background-image: url("/local/lovelace/cardbackK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
border: solid 1px rgba(100,100,100,0.3);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
}
type: 'custom:mod-card'
I think it would be better for you to add the styles to each card individually.
In yaml mode, you can do this easily using yaml node anchors:
type: glance
title: First card
style: &my_style |
ha-card {
... etc...
}
entities:
... etc...
... etc...
type: glance
title: Second card
style: *my_style
entities:
... etc...
... etc...
type: glance
title: Third card
style: *my_style
entities:
... etc...
Thatās pretty much exactly what I ended up doingā¦even used anchors like you siggested (thanks for the great write-up on your website btw).
However, you did just teach me something else. I didnāt know I could create the anchor in line from the first instance and then reuse. I added a section at the heading of my yaml file insteadā¦but I like your way better.
anchors:
styles:
# Blinking Red
alerting: &alerting
type: custom:mod-card
style: |
@keyframes blink {
50% {
background: red;
}
}
ha-card {
font-variant: small-caps;
--ha-card-background: rgba(200, 0, 0, .5);
animation: blink 5s linear infinite;
border-radius: 2px;
--primary-text-color: blue;
}
card:
# Blue with white border amd samll caps
mystyle1: &mystyle1
type: custom:mod-card
style: |
ha-card {
--ha-card-background: var(--paper-item-icon-active-color);
font-variant: small-caps;
border-radius: 5px;
border: 2px groove grey;
box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color);
}
card:
I am trying to define the color of the icon in a custom:fold-entity-row card.
I am using something like:
- type: entities
style:
.: |
"#states div":
fold-entity-row:
$: |
#head ha-icon {
color: .....;
}
entities:
- type: custom:fold-entity-row
but I am doing something wrong.
Is it possible to use the Card-mod to hide the state value for an entity?
I have several entities in a standard Entities Card, for one of the entities I just want display the icon (changing with state) and the friendly name.
entities:
- entity: binary_sensor.sun_is_up # Hide the state value
- entity: sensor.sun2_sunrise
...
show_header_toggle: false
title: Astronomy
type: entities
Iāve managed to change the color of the header and item icon colors in a fold-entity-row card like this:
- type: entities
debug_cardmod: true
style:
"#states div":
fold-entity-row:
$:
"#head":
hui-group-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon: |
:host {
--paper-item-icon-color: red;
}
"#items":
hui-group-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon: |
:host {
--paper-item-icon-color: red;
}
entities:
- type: 'custom:fold-entity-row'
head: group.downstairs_lights
- type: 'custom:fold-entity-row'
head: group.upstairs_lights
Iād like to change the icon color based on the state of the ha-icon element either through a theme attribute (none of the *-active-icon ones appear to work) or via CSS magic like [data-state!=on], but I havenāt figured it out yet.
Does anyone have any idea how you replace the report_size option from card-modder with equivilent functionality from card-mod?
Is it possible to remove the margins around āhui-horizontal-stack-cardā?