Create a percentage colored border on Tile card

Configuration Frontend
1

Continuing the discussion from Customize tile card icon background using card-mod:

Scherm­afbeelding 2023-01-28 om 18.00.10
Scherm­afbeelding 2023-01-28 om 18.00.10978×436 44.8 KB

top row is plain tile card, bottom is mushroom-template, as created in Mushroom Cards - Build a beautiful dashboard easily 🍄 - #5208 by Mariusthvdb by @weppa

my hope is to create the same percentage border in the tile card.

yaml for current tile card:

type: custom:hui-element
card_type: horizontal-stack
cards:
  - entity: sensor.epson_ink_level_black
    color: black
    <<: &card
      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info

  - entity: sensor.epson_ink_level_cyan
    color: cyan
    <<: *card

  - entity: sensor.epson_ink_level_magenta
    color: magenta
    <<: *card

  - entity: sensor.epson_ink_level_yellow
    color: yellow
    <<: *card

  - entity: sensor.epson_ink_level_waste
    color: disabled
    <<: *card

yaml for the mushroom-card:

type: custom:hui-element
card_type: horizontal-stack
cards:
  - entity: sensor.epson_ink_level_black
    icon_color: black
    <<: &card
      type: custom:mushroom-template-card
      icon: mdi:water
      layout: vertical
      tap_action:
        action: more-info
      hold_action:
        action: none
      double_tap_action:
        action: none
      secondary: >
        {{states(entity)}} %
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
                background: radial-gradient(var(--card-background-color) 60%,
                            transparent calc(60% + 1px)),
                            conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
                            var(--card-background-color) 0% 100%);
              }
            .shape:after {
              content: "";
              height: 100%;
              width: 100%;
              position: absolute;
              border-radius: var(--icon-border-radius);
              background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
            }

  - entity: sensor.epson_ink_level_cyan
    icon_color: cyan
    <<: *card

  - entity: sensor.epson_ink_level_magenta
    icon_color: pink #magenta does not work in the Mushroom card somehow
    <<: *card

  - entity: sensor.epson_ink_level_yellow
    icon_color: yellow
    <<: *card

  - entity: sensor.epson_ink_level_waste
    icon_color: disabled
    <<: *card

I did try the dom path settings in the linked post above, but no changes.

Would appreciate some assistance, because it is a real improvement on the Tile card as it is

2 Likes
2

I think you missed the !important; part
This is working but for the color of the percentage part, it is red, you have to change it to something that suits you.

type: custom:hui-element
card_type: horizontal-stack
cards:
  - entity: sensor.xiaomi_temperature
    type: tile
    icon: mdi:water
    name: ' '
    tap_action:
      action: more-info
    card_mod:
      style:
        .: |
          .tile {
            flex-direction: column !important
          }
        .icon-container .icon$: |
          .shape {
            background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(red {{states(config.entity)}}% 0%, var(--card-background-color) 0% 100%) !important;
          }

EDIT 3: Replaced everything with one of my sensor, you have to find a way to colorize the ring in your color instead of my red.

Result:
image

1 Like
3

with the help of @rhysb in Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #5216 by rhysb

We’ve made it to Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #5233 by Mariusthvdb

  - entity: sensor.epson_ink_level_black
    color: black
    <<: &card
      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info
      card_mod:
        style:
          ha-tile-icon$: |
            .shape {
              background: radial-gradient(var(--card-background-color) 60%,
                          transparent calc(60% + 1px)),
                          conic-gradient(var(--tile-color) {{ states(config.entity)}}% 0%,
                          var(--card-background-color) 0% 100%);
            }
#           ha-tile-info$: |
#             .secondary {
#               visibility: hidden;
#             }
#             .secondary:before {
#               visibility: visible;
#               content: "{{ states(config.entity)}}% 0%";
#             }

which looks great:

Scherm­afbeelding 2023-01-30 om 07.58.07
Scherm­afbeelding 2023-01-30 om 07.58.071014×236 41.9 KB

yet flickers terribly… have to find the issue on that

missed your reply I now see Olivier, sorry for that, and thanks!:

and I can confirm that works too, even without the !important (which I always try to avoid) and the first section on the flex-direction element. Like this:

            .: |
            .icon-container .icon$: |
              .shape {
                background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)),
                conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
                var(--card-background-color) 0% 100%);
              }

also flickering though…

got to try and find/understand the difference between the 2.

1 Like
4

next challenge:

why does the mod-card styling in the full card config not work except for the margin:

Scherm­afbeelding 2023-01-30 om 08.28.27
Scherm­afbeelding 2023-01-30 om 08.28.271006×746 86.4 KB 

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: 0px -16px -16px -16px;
      background: transparent;
      box-shadow: none;
    }
card:
  type: horizontal-stack
  cards:
    - entity: sensor.epson_ink_level_black
      color: black
      <<: &card
        type: tile
        icon: mdi:water
        name: ' '
        vertical: true
        tap_action:
          action: more-info
        card_mod:
          style:

            .: |
            .icon-container .icon$: |
              .shape {
                background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)),
                conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
                var(--card-background-color) 0% 100%);
              }
#             ha-tile-icon$: |
#               .shape {
#                 background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
#                             conic-gradient(var(--tile-color) {{ states(config.entity)}}% 0%,
#                             var(--card-background-color) 0% 100%);
#               }
  #           ha-tile-info$: |
  #             .secondary {
  #               visibility: hidden;
  #             }
  #             .secondary:before {
  #               visibility: visible;
  #               content: "{{ states(config.entity)}}% 0%";
  #             }
    - entity: sensor.epson_ink_level_cyan
      color: cyan
      <<: *card

    - entity: sensor.epson_ink_level_magenta
      color: magenta
      <<: *card

    - entity: sensor.epson_ink_level_yellow
      color: yellow #disabled
      <<: *card

where that card is included as follows:

type: entities
title: Printer dashboard
card_mod:
  class: class-header-margin
show_header_toggle: false
entities:

  - device_tracker.printer_hp
  - device_tracker.printer_epson

  - type: conditional
    etc etc
#this is the include with the tile cards buttons
  - !include /config/dashboard/includes/include_printer_epson_cartridges.yaml
1 Like
5

Hey Marius, try like this:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: 0px -16px -16px -16px;
      --ha-card-background: none;
      --ha-card-box-shadow: none;
    }
card:
  type: horizontal-stack
  cards:
    - entity: sensor.epson_ink_level_black
      color: black
      <<: &card
        type: tile
        icon: mdi:water
        name: ' '
        vertical: true
        tap_action:
          action: more-info
        card_mod:
          style:
            .icon$: |
              .shape {
                background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)),
                conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
                var(--card-background-color) 0% 100%);
              }

    - entity: sensor.epson_ink_level_cyan
      color: cyan
      <<: *card

    - entity: sensor.epson_ink_level_magenta
      color: magenta
      <<: *card

    - entity: sensor.epson_ink_level_yellow
      color: yellow #disabled
      <<: *card
2 Likes
6

thanks!
however, that won’t work either. The --ha-card-box-shadow: none; does sort effect, in the same way as I used

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: -8px -16px;
      --ha-card-background: none;
      --ha-card-box-shadow: none;
    }

card:
  type: horizontal-stack
  cards:
    - entity: sensor.epson_ink_level_black
      color: black
      <<: &card
        type: tile
        icon: mdi:water
        name: ' '
        vertical: true
        tap_action:
          action: more-info
        card_mod:
          style:
# this works also, now replaced by the style in the mod-card
#             .: |
#               ha-card {
#                 box-shadow: none;
#               }

myself, now commented.

However, even though the stack of tiles now doesnt get a background, the fact is is embedded in an entities card itself causes the background to show.

type: entities
title: Printer dashboard
card_mod:
  class: class-header-margin
show_header_toggle: false
entities:

  - device_tracker.printer_hp
  - device_tracker.printer_epson

  - type: conditional
    conditions:
      - entity: device_tracker.printer_epson
        state: 'home'
    row:
      type: custom:hui-element
      card_type: entities
      card_mod:
        style: |
          ha-card {
            box-shadow:none;
            margin: -16px;
          }
      entities:
        - entity: script.update_epson_cartridge_sensors
          action_name: Verfris

        - !include /config/dashboard/includes/include_printer_epson_cartridges.yaml # <-- this is the one..

        - type: custom:bar-card

meaning I can get it from:

Scherm­afbeelding 2023-01-31 om 09.21.41
Scherm­afbeelding 2023-01-31 om 09.21.411076×966 83.5 KB

to

Scherm­afbeelding 2023-01-31 om 09.22.38
Scherm­afbeelding 2023-01-31 om 09.22.381022×946 71.9 KB

but not to

Scherm­afbeelding 2023-01-31 om 09.23.02
Scherm­afbeelding 2023-01-31 om 09.23.021074×356 94.7 KB

I can not find a way to have the entities card entity (which the include in fact is inside that card) show no background on the horizontal-stack itself

a thing which I normally do with

card_mod:
  style: |
    ha-card {
      background: transparent;
    }

even when I mod that section of it as an entities card import

  - type: custom:hui-element
    card_type: entities
    card_mod:
      style: |
        ha-card {
          background: transparent;
          box-shadow:none;
          margin: -16px;
            }
    entities:
      - !include /config/dashboard/includes/include_printer_epson_cartridges.yaml

what is happening is displayed when I set the background to yellow in the mod-card:

Scherm­afbeelding 2023-01-31 om 09.38.03
Scherm­afbeelding 2023-01-31 om 09.38.031030×520 43.5 KB

or, transparent in the mod, and yellow in the entities card entry

Scherm­afbeelding 2023-01-31 om 09.39.21
Scherm­afbeelding 2023-01-31 om 09.39.211016×496 62.6 KB

so, the yellow there des overwrite the background of the container card (the main entities), but when changing the yellow to transparent again, the original entities card background color is shown:

I should probably use vertical-stack as main container card, so t doesn’t add a background…

7

so, after a lot of card_mod styling and testing on the many available elements and options, I made it like this in the end:

main card: vertical-stack

the challenge with the horizontal-stack with Tile card’s can now be unmodded, as can the tile cards them selves (ofc, except for the beautiful colored borders this all started out with…)

Ive added an extra entities card so there are now 4 sections in this vertical stack

vertical-stack

  • entities
  • conditional horizontal stack with tiles
  • conditional entities with the most of the original cards
  • entities final section with 2 fold-entry-rows.

that last bit was an extra challenge because I wanted the fold to connect to the cards above it (and Not show the ugly section above the divider, making those fold sections very unbalanced.

              /* this removes the empty space above the divider and move the fold up */
              div#head {
                margin-top: -24px;
              }

but leave the space when the condition is ‘home’. this could be managed by setting an extra 8px on the final entities, making that into:

  - type: entities
    card_mod:
      style: |
        ha-card {
          /* this moves the whole section up so it connects nicely */
          margin-top: -8px;
          box-shadow: none;
        }
    entities:
      - type: custom:fold-entity-row
        card_mod:
          style: |
            div#head {
              margin-top: -24px;
            }

full card now:

type: vertical-stack
# title: Printer dashboard
# card_mod:
#   class: class-header-margin
#   style: |
#     ha-card {
#       background: transparent;
#     }
show_header_toggle: false
cards:


  - type: entities
    title: Printer dashboard
    card_mod:
      class: class-header-margin

    entities:
      - device_tracker.printer_hp
      - device_tracker.printer_epson


  - type: conditional
    conditions:
      - entity: device_tracker.printer_epson
        state: home
    card:
      !include /config/dashboard/includes/include_printer_epson_cartridges.yaml

  - type: conditional
    conditions:
      - entity: device_tracker.printer_epson
        state: home
    card:
      type: entities
      entities:
        - entity: script.update_epson_cartridge_sensors
          action_name: Verfris

        - type: custom:bar-card
          card_mod:
            style: |
              ha-card {box-shadow:none;}
              bar-card-value {color:darkgrey;}
              bar-card-title {word-break:break-all;}
          stack: horizontal
          entity_row: true
          direction: up
          entities:
             - color: black
               entity: sensor.epson_ink_level_black
               name: Black
             - color: cyan
               entity: sensor.epson_ink_level_cyan
               name: Cyan
             - color: magenta
               entity: sensor.epson_ink_level_magenta
               name: Magenta
             - color: yellow
               entity: sensor.epson_ink_level_yellow
               name: Yellow
             - color: grey
               entity: sensor.epson_ink_level_waste
               name: Waste
          height: 150px
          max: 100
          min: 0
          target: 20
          unit_of_measurement: '%'
          width: 100%
          positions:
            icon: 'off'

        - type: custom:fold-entity-row
          card_mod:
            style: |
              div#head {
                margin-top: -24px;
              }
          head:
            type: section
            label: Ipp
            card_mod:  &label
              style: |
                .label {
                 margin-left: 0px;
                }
          padding: 0
          entities:
            - type: custom:auto-entities
              card:
                type: entities
                card_mod:
                  style: |
                    ha-card {
                      box-shadow:none;
                      margin: -8px -16px;
                    }
              show_empty: false
              filter:
                include:
                  - entity_id: sensor.epson_wf_c5710_*

        - type: custom:fold-entity-row
          head:
            type: section
            label: Low ink levels
            card_mod: *label
          padding: 0
          entities:
            - type: custom:slider-entity-row
              entity: input_number.ink_level
            - type: custom:hui-glance-card
              state_color: true
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    margin: -16px;
                    /*background-image: url('/local/devices/epson/official/epson_background.png');
                    background-size: cover;*/
                  }
              entities:
                - entity: binary_sensor.threshold_ink_level_black
                  name: Black
                - entity: binary_sensor.threshold_ink_level_cyan
                  name: Cyan
                - entity: binary_sensor.threshold_ink_level_magenta
                  name: Magenta
                - entity: binary_sensor.threshold_ink_level_yellow
                  name: Yellow
                - entity: binary_sensor.threshold_ink_level_waste
                  name: Waste

            - type: custom:hui-glance-card
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    margin: -16px;
                  }
              entities:
                - entity: sensor.epson_ink_level_black
                  name: Black
                - entity: sensor.epson_ink_level_cyan
                  name: Cyan
                - entity: sensor.epson_ink_level_magenta
                  name: Magenta
                - entity: sensor.epson_ink_level_yellow
                  name: Yellow
                - entity: sensor.epson_ink_level_waste
                  name: Waste

  - type: entities
    card_mod:
      style: |
        ha-card {
          margin-top: -8px;
          box-shadow: none;
        }
    entities:
      - type: custom:fold-entity-row
        card_mod:
          style: |
            div#head {
              margin-top: -24px;
            }
        head:
          type: section
          label: Schakelaars
          card_mod:  *label
        padding: 0
        entities:
          - entity: switch.kantoor_wijke
            secondary_info: last-changed
          - entity: switch.netwerk_library
            secondary_info: last-changed
          - entity: switch.printer_library
            secondary_info: last-changed

      - type: custom:fold-entity-row
        head:
          type: section
          label: Automaten
          card_mod: *label
        group_config:
          secondary_info: last-triggered
          state_color: true
        padding: 0
        entities:
          - automation.printer_ink_alert

not_home (faked it in the conditions, hence the true state being ‘home’…):

Scherm­afbeelding 2023-01-31 om 10.55.55
Scherm­afbeelding 2023-01-31 om 10.55.551034×580 68.5 KB

home:

Scherm­afbeelding 2023-01-31 om 10.52.45
Scherm­afbeelding 2023-01-31 om 10.52.451040×1494 111 KB

nicely separated tiles with percentage biorders to stand out, and reveal dashboard background…

pff

1 Like