marcokreeft87/room-card

Adding a styles to card background also apply to icon

Xhelliom opened this issue · 5 comments

Xhelliom commented

Hello,

For example, using this code :

type: custom:room-card
entity: light.chambre_principale
title: Chambre Principale
icon: mdi:bed-queen
show_icon: true
state_color: false
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  template: >
    if (entity.state == 'on') return 'background-image: linear-gradient(350deg,
    rgba(3,1,52,1) 0%, rgba(121,9,75,1) 41%, rgba(255,76,0,1) 100%);';
entities:
  - entity: climate.grande_chambre
    name: Chauffage
    show_icon: true
    icon:
      conditions:
        - icon: mdi:fire
          condition: equals
          value: heat
          styles:
            color: red
info_entities:
  - entity: sensor.temp_grande_chambre

the result look like that :

image

marcokreeft87 commented

What is your question exactly?

Xhelliom commented

Oh yes sorry.
I thought maybe it is not intended to have the background of the icon changing also when you add a style that change the background of the card.

I was expecting the gradient to just apply to the background of the card not also on the icon background resulting a weird square.

Maybe I do not do if the right way. Sorry it the issue is on my side.

marcokreeft87 commented

Well technically it isn't a bug. The template gets applied to the whole card, so with the right css it will work like you want.

But than again, this shouldn't be applied to the icon background.

marcokreeft87 commented

@Xhelliom User card_styles instead with the newest version. That will fix your issue

Xhelliom commented

Hi @marcokreeft87, thank you a lot !! work great, i didn't manage to find the good css to make it work before, but with this new option, it works great.
Thanks again.

  • ❤️1