Lovelace card - change text "Home" / "Away" to red / green box

Hi,

I started with HA & Lovelace UI only a week ago and I’m really excited about it.

What I’m trying to do right now is a view with one or more entity cards that list my network tracked devices.

Right now I setted up the list of devices with a picture. I’m also able to change the text home/away to online/offline but it is not quite what I want to achive. My goal is something like this mokeup:

mockup

What I understand is that I need some kind of custom solution. May be using Template sensor with styles, or something like this.
I googled for a list a day but I didn’t come up with a solution.

I’ve installed card-modder (thomasloven) but I don’t know if it can do it and how.

At the worst I would like at least to be able to set “online” / “offline” string in different color.

Has anyone ever tried something like this?

Thank you in advance for any help.

the easiest is probably to use a template binary_sensor
You’ll end up with something that looks like this:
image

I did something similar with a template switch, which im guessing would be identical to coding a template sensor.

switch:
  - platform: template
    switches:
      garage_up_template_switch:
        friendly_name: Garage Up
        entity_id: 
          - script.garage_up_operation
          - input_select.garage_up_state
        value_template: "{{ is_state('script.garage_up_operation' , 'on') }}"
        turn_on:
          service: script.turn_on
          entity_id: script.garage_up_operation
        turn_off:
          service: script.turn_off
          entity_id: script.garage_up_operation
        entity_picture_template: >-
          {% if is_state("input_select.garage_up_state", "Closed") %}
            /local/images/icons/garage_door_closed.png
          {% elif is_state("input_select.garage_up_state", "Opening") %}
            /local/images/icons/garage_door_opening.png
          {% elif is_state("input_select.garage_up_state", "Stopped Next Closing") %}
            /local/images/icons/garage_door_stopped_next_closing.png
          {% elif is_state("input_select.garage_up_state", "Stopped Next Opening") %}
            /local/images/icons/garage_door_stopped_next_opening.png
          {% elif is_state("input_select.garage_up_state", "Closing") %}
            /local/images/icons/garage_door_closing.png
          {% elif is_state("input_select.garage_up_state", "Open") %}
            /local/images/icons/garage_door_open.png
          {% endif %}

image
image
image

I guess you could get the entity_picture_template and set it up according to your conditions and images on your template_sensor.

After some test, based on hints of krash and lolouk44, I finally decided to go with a template sensor using the entity_picture_template, so that I can change the image if it is online or offline.
That way I get almost the same effect.

Thank you lolouk44 and krash for your help…

  - platform: template
    sensors:
    device_tracker_pcfuji:
      value_template: "{% if is_state('device_tracker.pc_fuji', 'home') %}ONLINE{% else %}---{% endif %}"
      friendly_name: "PC-FUJI"
      entity_picture_template: >-
              {% if is_state("device_tracker.pc_fuji", "home") %}
                /local/logo/fujitsu.png
              {% else %}    
                /local/logo/fujitsu_disable.png
              {% endif %}