Card-mod ignores style properties

Configuration Frontend
1

i´m having some issues with the card-mod ignoring my style settings.

I changed to the new prefered method of defining the card-mod in the configuration file as below,

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/plugins/card-mod.js

and i use Minimalist theme/addon for Dashboard where I´m trying to change the style on the Title but no matter what i input into the card_mod style it is not changing the output.

I can see in the console that the card-mod.js is loaded correctly “CARD-MOD 3.1.1 IS INSTALLED”.

          - type: horizontal-stack
            title: Utomhus
            card_mod:
              style: |
                .card-header{
                  color: red !important;
                  font-size: 8px !important;
                }

cant for the life of me figure out what I´m doing wrong, tried moving the style further up in the tree but not sure of its appending the style on childs by intention or it needs to be defined on current object, neither works.

Edit, should also note that i always make sure to clear the cache and do a hard-reload on every attempt/update.

Any help or tips would be appreciated

Christian

2

Take a look at the card mod documentation. There’s a section dedicated to modding cards that don’t have <ha-card>. All the stack cards fall into this category. The example is a vertical stack.

expand “I know what I’m doing” (even if you don’t) to see the example.

1 Like
3

Thanks petro, finally got it working after hours of trying on my own, your link explained it well.

One follow-up question, is there any way to define a global class and @include that class on Title?
Better to have a global place to define all the titles instead of defining all the properties on every title, especially for maintenance.

4

if it’s all in the same file, you can use yaml anchors. Otherwise, you’d use include on this section.

As yaml anchor


            card_mod: &title_style
              style: |
                .card-header{
                  color: red !important;
                  font-size: 8px !important;
                }


.... later on in some other area AFTER the initial anchor...

            card_mod: 
              <<: *title_style

As include:

            card_mod: !include titlestyle.yaml

titlestyle.yaml

style: |
  .card-header{
    color: red !important;
    font-size: 8px !important;
  }
1 Like
5

That is fantastic, so I´m guessing i can even include more then the style but the entire type definition and just set the title.

Pretty new to yaml so this is very helpful, thanks again.