I am not able to set the background color using the card-modder. According to the documentation giving this:
I am getting this:
type: 'custom:card-modder'
style:
'--paper-card-background-color': 'rgba(0, 100, 0, 0.2)'
'--paper-item-icon-color': white
border-radius: 5px
color: 'rgb(0, 0, 100)'
card:
type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: input_boolean.ha_mode_home
name: Home
icon: 'mdi:home-account'
show_state: true
styles:
card:
- width: 100px
- height: 100px
- border-radius: 15px
I have tried different code strings fount in the forum, without luck. Where do I go wrong when trying to have my button one color, and the background (paper?) another color?
petro
May 25, 2019, 3:23pm
2
try
--ha-card-background: 'rgba(0, 100, 0, 0.2)'
petro
May 25, 2019, 3:28pm
3
Also, I noticed you are using the custom button card… you don’t need card modder for that. Here’s an example where I change a bunch of crap in the custom button card, including the background.
type: custom:button-card
layout: icon_label
color: auto
show_state: true
show_name: true
show_label: true
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
styles:
grid:
- grid-template-rows: 42px auto 42px
- grid-template-columns: 42px auto
card:
- border-radius: 15px
- height: 105px
- width: 105px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 7px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
lock:
- align-items: flex-end
tap_action:
action: toggle
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
name:
- color: white
state:
- color: white
label:
- color: white
- value: "off"
styles:
label:
- color: rgba(0, 0, 0, 0.0)
hold_action:
action: more-info
Looks like this on and off
6 Likes
tom_l
May 25, 2019, 3:51pm
4
Nice. Using the shadow colour like that creates a striking effect.
How can I add show_last_changed under neath the on/off status?
Thanks,
I am afraid it does not work, both:
type: 'custom:card-modder'
style:
- --paper-card-background-color: rgba(40, 40, 40)
or
--ha-card-background: 'rgba(0, 100, 0, 0.2)'
and the code for the type: custom:button-card
value: ‘on’
value: ‘off’
only affects the button itself, not the cards background color (HA V.0.93.2).
Tomahawk:
type: ‘custom:card-modder’ style: - --paper-card-background-color: rgba(40, 40, 40) or --ha-card-background: ‘rgba(0, 100, 0, 0.2)’
you set background color when you create the card.
- type: custom:card-modder
style:
--paper-card-background-color: rgba(0, 50, 100, 0.4)
--paper-item-icon-color: white
card:
- your card here with settings you set above
That I do (see my first post). Looks like when I use the custom:card-modder, the color only sticks to the entities itself.
type: 'custom:card-modder'
style:
'--ha-card-background': 'rgba(0, 100, 0, 0.2)' #Tried all sort of variations
card:
type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: input_boolean.ha_mode_home
name: Home
icon: 'mdi:home-account'
show_state: true
styles:
card:
- width: 100px
- height: 100px
- border-radius: 15px
- type: entities
title: Entities card sample
show_header_toggle: false
entities:
- input_boolean.ha_mode_holiday
- input_boolean.ha_mode_away
I used the code from the documenattion where it displays correclty (Styled card, in my first post).
Can someone try the code from the documentation. Does it work for you?
I’ve just started using card-modder and used the code directly from the git page and it worked.
Are you using a separate card for each entity or 1 card for multiple entities. Your original post looks like you’re using a separate card for each entity, which would mean card-modder is working as expected.
Hm, the custom cards works all right, trying this:
type: 'custom:card-modder'
style:
'--ha-card-background': 'rgba(0, 100, 0, 0.2)'
card:
type: entities
entities:
- sensor.moon
So, for some reason, my other cards used in combination with card-modder, messing things up
petro
May 26, 2019, 10:42am
11
You cannot use card modder with the custom:button-card. Adjust the custom:button-card without card modder using the styles section.
Like in this example:
type: custom:button-card
layout: icon_label
color: auto
styles:
card:
- --paper-card-background-color: rgba(0, 50, 100, 0.4)
- --paper-item-icon-color: white
Aha! The card-modder and custom button are not compatible. Nice to know. Thanks!
Using your code on only a custom button (within a horizonal-stack)looks like it’s not doing anything with the color on the area around the button, now it’s all white. Should it (paper-card-background-color) ?
petro
May 26, 2019, 3:03pm
13
Ah yes, my mistake. The icon coloring should go under the icon styles
....
styles:
card:
...
icon:
color: white
Hey petro, I know you are a guru
How can I reformat your lighted background for state on/off for bubble card?
I’ve tried with no success
.
