Mushroom Template Card or card-mod?

Configuration Frontend
,
1

This is such a simple thing that I’m trying to do but after many hours I’m totally failing.
I simply want to have a card which displays just an entity’s numerical state, and can have the card’s background change to various colours based on that state.
Help please!

2

Hi Gareth, what have do you have already?
Show by pasting the YAML code by using the </> button in this edit box.

3

Hi Nick, tried lots of things and deleted them.
The only attempt I’ve still got is this:

type: custom:mushroom-entity-card
entity: sensor.owm_rain_0_probability
primary_info: state
secondary_info: none
icon_type: none
layout: vertical
card_mod:
  style: |
    :host {
      color:
        {% if states(config.entity) | int <= 10 %} 
          green
        {% elif states(config.entity) | int <= 20 %}
          greenyellow
        {% elif states(config.entity) | int <= 40 %}
          yellow
        {% elif states(config.entity) | int <= 60 %}
          orange
        {% elif states(config.entity) | int <= 80 %}
          red
        {% endif %}
        ;
    }
4

This is a working example from another type, you could try to incorporate that.

type: entity
entity: binary_sensor.office_motion_occupancy
card_mod:
  style: |
    ha-card { 
      background-color: {{ '#AAFFAA' if is_state('binary_sensor.office_motion_occupancy', 'off') else '#FFAAAA' }};
    }
5

Thanks, Nick.
I’ve finally got there - (as I suspected) one possible answer is a mixture of the Mushroom Template Card and card-mod:

type: custom:mushroom-template-card
entity: sensor.owm_rain_1_probability
primary: "{{states(config.entity)|string + '%'}}"
secondary: ""
layout: vertical
icon: ""
card_mod:
  style: |
    ha-card {
     border: none;
     background: 
        {% if states(config.entity) | int <= 20 %} 
          {{'lightgrey'}}
        {% elif states(config.entity) | int <= 40 %}
          {{'lightblue'}}
        {% elif states(config.entity) | int <= 60 %}
          {{'yellow'}}
        {% elif states(config.entity) | int <= 80 %}
          {{'orange'}}
        {% elif states(config.entity) | int <= 100 %}
          {{'red'}}
        {% endif %}
     ;
     height: 30px !important;
     width: 60px !important;
       }
     ;
     height: 30px !important;
     width: 60px !important;
       }

I will now be able to sleep tonight :slightly_smiling_face:

1 Like
6

Good you got it solved!

Please take the time to mark the solution as the answer, you do that by selecting the three dots under the post:

image

Then select the check box:

image
By doing so:

  • this thread can be useful to other users as well (this thread comes up as solution when starting a thread which is similar to yours).
  • this prevents that someone else steps in trying to help

Thanks for giving back to the community! :+1: