Newbie blocked with card-mod integration

Configuration Frontend
1

Hi everyone, after more than one year on Jeedom, I’ve decided to move to HA. The dashboard being one of the reason why I moved.
So far I managed to build such dashboard

image
image1920×886 79.5 KB

On the center up position, one can see Mushroom Chips Card icons and I’ve been trying over the last 2 days to use card-mod to increase the size of those icon without success. In fact, even the basic exemple from the guide is not working

card_mod:
  style: |
    ha-card {
      color: red;
    }

I’ve installed card-mod using the git command from the hacs directory

git clone https://github.com/thomasloven/lovelace-card-mod

one can see that the files seems to be there

image
image1124×208 25 KB

and update my configuration.yalm like this

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

If I’m not mistaken hacsfile points to /homeassistant/www/community

I’ve also updated my resources

image
image2248×1268 202 KB

I’ve of course tried to reboot/reload but nothing help.

As I’m very new with HA be gentle and already thanks in advance for your help

Fred

2

This is not a necessary entry in you configuration.yaml

3

but the github mention this step

image
image2454×982 252 KB

should I remove it?

4

I would, you can always put add it back. I have been using HACs for years and have never added that to the main config file.

This is the guide you should follow

5

thanks for the info but I was already using HACS and after removing
extra_module_url: - /hacsfiles/lovelace-card-mod/card-mod.js
and reloading HA, still no luck

6

I was just point out that your config didn’t need that.

Does this work?

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.night_stand
    icon: mdi:lamp

    icon_color: purple
card_mod:
     style:
      mushroom-template-chip$: |
           ha-state-icon {
           --chip-icon-size: 30px;
           }

image
image1311×562 35.6 KB

7

we are moving forward. Your code works perfectly on your exemple but mine, doesn’t work

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: navigate
      navigation_path: /lovelace/music
    icon: mdi:music-note
  - type: weather
    entity: weather.forecast_home
  - type: back
alignment: center
grid_options:
  rows: auto
  columns: 9
card_mod:
  style:
    mushroom-template-chip$: |
      ha-state-icon {
      --chip-icon-size: 60px;
      }
8

Easiest way!

card_mod:
  style: |
        ha-card {
        --chip-icon-size: 60px;
        }

image
image1376×744 54.1 KB

1 Like
9

wow, that’s exactly what I wanted. Thanks a lot

Fred

10

You marked your post as the solution??

1 Like
11

Oups, my bad

12

and now my dashboard looks much better thanks to @LiQuid_cOOled

image
image1920×806 81.4 KB

and sorry again for marking the wrong post as solution

2 Likes