Mushroom Template Chip Card change size

Configuration Frontend
1

Hi everybody,
I’m using mushroom chip cards to run several scripts related to multimedia such as ALL ON, ALL OFF and source selections.
I creates custom:mushroom-chips-card whereby I managed to change the size of the icon as per the code below:

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: script.hgjygjjj
      target: {}
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon_color: lime
    icon: mdi:power
    card_mod:
      style: |
        ha-card {
          justify-content: center;
          --chip-icon-size: 48px;
          --chip-height: 58px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
         # --chip-background: rgba(228, 208, 10, 0.1);
        }

However, type: custom:mushroom-chips-card does not allow me to use a picture insted of the icon. As a result, I created a template chip card that does allow me to change the icon to a picture BUT I can’t change the size of the picture:

type: template
icon: ''
picture: /local/icon-tv-app.png
tap_action:
  action: call-service
  service: script.hgjygjjj
  target: {}
entity: script.hgjygjjj
content: Apple TV

Can someone please assist with the relevant style css that needs to be used in order to change the size of the picture as the current one is too small?

2

You can use an pic with a chip card :slightly_smiling_face:

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: script.hgjygjjj
      target: {}
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: ' '
    card_mod:
      style: |
        ha-card {
          --chip-height: 60px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          background-image: url("/local/animated/fire2.png") !important;
          background-size: cover;
           }
3

Thank you for the reply. Unfortunately, the proposed solution does not work. I just get a round grey circle.

4

You have to locally store the image. local=www

image
image1046×962 79.2 KB

5

I’m storing it locally. When I use the same path from template chip it works.

6

Please post your current chips card code. We can use the template card if you’d like, it’s more customizable.

7 
type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: script.hgjygjjj
      target: {}
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: ' '
    card_mod:
      style: |
        ha-card {
          --chip-height: 60px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          background-image: url("/local/icon-tv-app.png") !important;
          background-size: cover;
           }
8

Does this still give you a grey circle?

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: call-service
      service: script.hgjygjjj
      target: {}
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --chip-height: 60px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          background-image: url("/local/icon-tv-app.png") !important;
          background-size: cover;
           }
1 Like
9

Yes, still grey circle.
When browsing http://homeassistant.local:8123/local/icon-tv-app.png the picture is displayed.

10

clear your browser history and see if that corrects the issue.

11

One last suggestion…make sure your pic is inside the www folder

image
image590×560 9.8 KB

12

I got it working! Perfect.
One last issue: the picture is too large and I see only part of it inside the circle. I tired changing the background-size: cover; to background-size: contain; but it remains as is.

13

What change made it work?

you can try these settings too

background-repeat: no-repeat;
background-origin: content-box;

Check out these additional settings

14

Thank you very much! The following code made it work:

card_mod:
      style: |
        ha-card {
          --chip-height: 60px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          background-image: url("/local/icon-tv-app2.png") !important;
          background-size: contain !important;
          background-repeat: no-repeat !important;
          background-origin: content-box !important;
          background-position: center !important;
          }
1 Like
15

Happy to help! If you can, hit a heart on one of my replies to help me build my profile.

2 Likes