Card-mod installation

[stevobandino (SteveO Bandino)]

I am a brand-new user of HA setting up a dashboard. My biggest problem at this point is installing card-mod. After I download the plugin, it advises the file is located in '/config/www/community/lovelace-card-mod’, and I must edit my Yamil file with this location. I did this and many variations, but card-mod won’t let me change text color. I don’t know if it’s an error with my Yamil file or the CSS code I input into the code editor of my Mushroom Title Card. I would greatly appreciate anyone pointing out my error!

Yamil Code:

frontend:
themes: !include_dir_merge_named themes
extra_module_url: /config/www/community/lovelace-card-mod/card-mod.js

automation: !include automations.yaml

===================

Mushroom Title Card Code
type: custom:mushroom-title-card
title: Rooms
subtitle: test of card-mod
card_mod:
style: |
ha-card { --primary-text-color: red; }
}

[armedad]

did you use hacs to install?

you should not be modifying anything in www/community/… should do the edits in the dashboard ui.

[stevobandino (SteveO Bandino)]

Yes I installed with HACS

[armedad]

ok. revert any changes you made in www/community/…

if you’re not sure what changes you made, then uninstall it and reinstall it.
your code looks close, but you’ve either got it in the wrong place or the indentation wrong or something simple like that.

then go to your dashboard, hit edit… hit add card.

and for now let’s just do an entity card since it’s simple… pick the entity card
hit “show code editor” and past this in but modify the entity to be one of your entities:

type: entity
entity: sensor.harmony_hub
card_mod:
  style: |
    ha-card { 
      --primary-text-color: red;
    }

note the indentation is important. make sure you get that right.

if you paste code into here, please use the “preformatted text” button here so that it preserves all the indentation and such. indents are meanful in yaml…

[stevobandino (SteveO Bandino)]

I just removed the code in my Yamil file and uninstalled card-mod. I restarted then reinstalled card-mod with HACS. I downloaded the file. It told me the following: When downloaded this will be located in ‘/config/www/community/lovelace-card-mod’

To make sure, I restarted HA again. I have made no adjustments to additions to my Yamil file. I still have no red text showing. Any thoughts on my error?

type: custom:mushroom-title-card
title: Rooms
subtitle: test of card-mod
card_mod:
  style: |
    ha-card { --primary-text-color: red; }
    }

Yamil Code that now exists:

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

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes
  

[stevobandino (SteveO Bandino)]

I installed an entity card and input the card-mod style and got the following message:

Visual editor is not supported for this configuration:

• Key ‘style’ is not expected or not supported by the visual editor.
  You can still edit your config in YAML.

I assume i have an error in YAML, but not sure.

[stevobandino (SteveO Bandino)]

I am not sure why, but it has now started to work. Thanks much. I will use your code in the future.

[armedad]

great. you have the location and syntax right now.

for the mushroom-title-card, use --title-color instead of --primary-text-color, if primary-text-color isn’t working for you.

from the source code, this is what title listens to:

    --title-padding: var(--mush-title-padding, 24px 12px 8px);
    --title-spacing: var(--mush-title-spacing, 8px);
    --title-font-size: var(--mush-title-font-size, 24px);
    --title-font-weight: var(--mush-title-font-weight, normal);
    --title-line-height: var(--mush-title-line-height, 32px);
    --title-color: var(--mush-title-color, var(--primary-text-color));
    --title-letter-spacing: var(--mush-title-letter-spacing, -0.288px);
    --subtitle-font-size: var(--mush-subtitle-font-size, 16px);
    --subtitle-font-weight: var(--mush-subtitle-font-weight, normal);
    --subtitle-line-height: var(--mush-subtitle-line-height, 24px);
    --subtitle-color: var(--mush-subtitle-color, var(--secondary-text-color));
    --subtitle-letter-spacing: var(--mush-subtitle-letter-spacing, 0px);

[armedad]

btw. that message you got about www/community was there to let you know where the code is installed in case you need to access it or whatever. not to tell you to put your yaml there.

[armedad]

@stevobandino

Visual editor is not supported for this configuration:

• Key ‘style’ is not expected or not supported by the visual editor.
  You can still edit your config in YAML.

this is not an error. it’s just letting you know that since you’re using non-standard code (card-mod is non-standard), then it’s dropping you into yaml and it won’t let you use the nice pretty ui. not an error.

[stevobandino (SteveO Bandino)]

I spoke too soon. Then Entity card now changes the text color just fine. However when I edit the card an error message appears:

Visual editor is not supported for this configuration:

• Key ‘card_mod’ is not expected or not supported by the visual editor.
  You can still edit your config in YAML.

Even though it works, “card_mod” doesn’t seem to be recognized. Your reference to “title-color”, doesn’t seem to apply to this entity not recognizing “card-mod”

Any idea what I am missing with my syntax?

type: entity
entity: sensor.watchman_last_updated
name: test
card_mod:
  style: |
    ha-card {
      color: red;
    }

[armedad]

see my messages above your latest post.
–primary-text-color is the right thing to do for the entity card.
–title-color is what you should use for the mushroom-title-card

that error is not an error. just means you can’t use the gui.

[armedad]

got it working?

[stevobandino (SteveO Bandino)]

Sadly, no. I was using the standard Entity Card. This created the error I mentioned above, but it did change the color.

I then tried the Mushroom Entity card, hoping the same code would work and not show an error. In the Mushroom entity I don’t get an error message, but I also don’t get a color change on the text.

In place of the word color below, I have replaced it with primary-text-color and also title-color. None of them make any difference.

Totally confused. Here is the code I used in the Mushroom entity card, which does nothing, but throws no errors.

type: custom:mushroom-entity-card
entity: sensor.watchman_last_updated
name: Test
card_mod:
  style: |
    ha-card {
      color: red;
    }

[armedad]

the info warning’s not an error. it’s expected when you use card_mod code. so don’t worry about that. you will always see it when you use card_mod. it has nothing to do with whether it will change the color or not.

when you said you replaced color with title-color, did you do title-color or did you do --title-color ?

try this card:

type: custom:mushroom-title-card
title: Hello, {{ user }} !
alignment: center
card_mod:
  style: |
    ha-card 
    { 
      --title-font-size: 40px;
      --title-color: red;
    }

[stevobandino (SteveO Bandino)]

I finally get it! I see I can just ignore the error and proceed. I also tried your code and it works perfectly. I understand my punctuation error. Thanks for your patience. You’ve helped a lot.

In one of your posts above you showed the source code that “title” listens to. Where can I find that information??

[armedad]

read your own first post.

[stevobandino (SteveO Bandino)]

Okay, thanks for everything!!!

[jkeltonga]

In case anyone else is having trouble getting card-mod to work, I had to add the path to the hacs installation to the dashboard resources section (three dots in the upper-right corner): /hacsfiles/lovelace-card-mod/card-mod.js
After doing this it worked for me.