đŸ”č Card-mod - Add css styles to any lovelace card

It should work, except when it doesn’t. For example with cards that handle styles on their own, like custom-button-card, or as you say picture-elements.

I may have to remove it at some point, though, because it could collide with core functionality.
It’s much more unlikely that Home Assistant core will ever want to use the keyword card_mod than style


completely missed that, now editing all style: 


do we need to change:

        - type: custom:mod-card
          style: |
            ha-card {
              margin: 0px -16px -16px -16px;
            }

too on mod-card?

I had a style which narrowed the spaces between a list of entities in a card and it doesn’t work any more.
Can anyone help? I have hidden the icon itself with the help of multiple-entity-row but need to reduce the height allocated from 40px.

entities:
  - entity: sensor.wts_ensuite_current_temp
    icon: nothing
    style: |
      :host {
        height: 17px;
        margin: -10px 0px;
      }
    type: custom:multiple-entity-row

Can I use an if statement to chose the ‘top’ and ‘left’ style? This does not work


          - type: 'custom:button-card'
            entity: input_select.page
            style:
              top: >
                [[[
                  if (entity.state == 'Lighting') return '215px';
                  if (entity.state == 'Home') return '175px';
                  else return '500px';
                ]]]
              left: >
               [[[
                if (entity.state == 'Lighting') return '270px';
                if (entity.state == 'Home') return '175px';
                else return '500px';
               ]]]

Has anyone got it working to use card-mod with grid card to change the title attributes? For instance changing font size and padding? I believe card-mod usually does not work with cards like grid, stacks etc. Perhaps with 3.0 it’s become possible.

I see it’s under a constructed style sheet when I inspect element:

element.style {
}

And there is the code under it:

.card-header {
    color: var(--ha-card-header-color, --primary-text-color);
    font-family: var(--ha-card-header-font-family, inherit);
    font-size: var(--ha-card-header-font-size, 24px);
    font-weight: normal;
    margin-block: 0px;
    letter-spacing: -0.012em;
    line-height: 32px;
    display: block;
    padding: 24px 16px 16px;
}

Changing it in inspector works, but I can’t seem to find a way to use it in card-mod.

Maybe this is possible using the theme as well, in that case I need to ask in that topic. However I wonder if it’s possible per card as well, so you can have different font sizes and paddings per grid card.

Edit: I got the font size working per theme by using ha-card-header-font-size in theme.yaml. Padding still no go.

This is not about "card-mod".
May be better to ask in this thread.

Could you give a simple test example of the card?

I use it inside an auto-entities card, so it might make it extra complicated. This is the code I use:

              - type: custom:auto-entities
                card:
                  type: grid
                  columns: 4
                  square: true
                  title: Kantoor
                card_param: cards
                filter:
                  include:
                    - entity_id: light.kantoor_*
                      options:
                        type: 'custom:decluttering-card'
                        template: light     
                        variables:
                          - entity: this.entity_id
                          - template: light
                sort:
                  method: entity_id
                  ignore_case: true 

So inside that code, I want to mod the part: title: Kantoor. The code that I got using inspect element is posted in my original post, but I can’t get it to work and don’t really know where to put is (if it’s at all possible using on grid-card).

Not sure, is it want you want?

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      color: red;
      background-color: green;
    }
card:
  type: custom:auto-entities
  card:
    type: grid
    columns: 4
    square: true
    title: Kantoor
  card_param: cards
  filter:
    include:
      - entity_id: sensor.ha_count_*
        options:
          type: entity
          entity: this.entity_id
  sort:
    method: entity_id
    ignore_case: true

type: custom:mod-card
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          color: red !important;
          background-color: green;
        }
card:
  type: custom:auto-entities
  card:
    type: grid
    columns: 4
    square: true
    title: Kantoor
  card_param: cards
  filter:
    include:
      - entity_id: sensor.ha_count_*
        options:
          type: entity
          entity: this.entity_id
  sort:
    method: entity_id
    ignore_case: true

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      --ha-card-header-color: cyan;
      --ha-card-header-font-size: 30px;
      background-image: url(/local/images/pink.jpg);
      background-size: 100% 100%;
    }
card:
  type: custom:auto-entities
  card:
    type: grid
    columns: 4
    square: true
    title: Kantoor
  card_param: cards
  filter:
    include:
      - entity_id: sensor.ha_count_*
        options:
          type: entity
          entity: this.entity_id
  sort:
    method: entity_id
    ignore_case: true

Not entirely. While I can adjust the font size with this, I can’t change the padding and font weight. Basically I want to make the font bold and remove the paddings.

When I change the padding to 0 using inspect element it works:

.card-header {
    color: var(--ha-card-header-color, --primary-text-color);
    font-family: var(--ha-card-header-font-family, inherit);
    font-size: var(--ha-card-header-font-size, 24px);
    font-weight: normal;
    margin-block: 0px;
    letter-spacing: -0.012em;
    line-height: 32px;
    display: block;
    padding: 24px 16px 16px;
}

But can’t change it using card-mod.

I tried adding:

                      --ha-card-header-font-weight: bold;
                      --ha-card-header-padding: 0;

But those don’t work. So I want the text to be smaller (which works) and bold (does not work) and no padding around the title (also doesn’t work).

type: custom:mod-card
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          color: red !important;
          background-color: green;
          --ha-card-header-font-size: 30px;
          font-weight: bold !important;
          padding: 0px 0px 0px !important;
          letter-spacing: 0.112em !important;
        }
card:
  type: custom:auto-entities
  card:
    type: grid
    columns: 4
    square: true
    title: Kantoor
  card_param: cards
  filter:
    include:
      - entity_id: sensor.ha_count_*
        options:
          type: entity
          entity: this.entity_id
  sort:
    method: entity_id
    ignore_case: true
2 Likes

Thank you, this works! Though unfortunately card-mod loads the styling after page has been opened, so you see a brief jump in style when opening the page. This behavior started in one of the card-mod updates (even before 3.0). I noticed this with markdown card a long time ago.

Thank you for the code!

Unfortunately, cannot help about themes, know very little about it.

On my setup (RPi 3) markdowns are slowly appearing somtimes (because of jinjia2, I think).

I notice this was way better handled on previous HA versions. It happened with HA 117. I also maintain a HA installation for my younger brother, and haven’t updated his version yet (still on HA 116). Markdown works a lot faster there. They also changed the default card size (which you can only change with !important variable, which causes the jump effect after opening a tab) with HA 117. After that they updated a few times, which made it even worse for me.

Unfortunately markdown card is subject to change a lot of times. I had breaking changes 4x in the last 9 months or so. I’m now trying to just remove markdown completely because they just change too much and it just gets worse each time for me.

I’ll stick to titles in grid/vertical/horizontal stacks and perhaps use button-card for template texts.

I almost do not use markdown card in my setup.
Only as a kind of caption for test cards like this:


It is very sad that some stock functionality is buggy.

1 Like

Hi, Thomas, may be I did not express my thought clearly - now with HA 2021.6.5 errors are occurred when using "style" with the ":host":

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
    style: |
      :host {
        color: red;
      }

The code works but the HA editor does not allow to save changes.
Could be a bug in HA, may be?

Found one more issue with "card-mod" - be careful.
Probably, it is a bug (or a feature) of HA frontend editor.

  1. Create an Entities card with card-mod:
type: entities
entities:
  - type: custom:multiple-entity-row
    card_mod:
      style: |
        :host {
          color: red;
        }
    entity: sun.sun
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: custom:multiple-entity-row
    card_mod:
      style: |
        :host {
          color: red;
        }
    entity: sun.sun
    entities:
      - entity: sun.sun
      - entity: sun.sun

Looks fine in the HA frontend editor:

  1. Save the card.

  2. Open the card in the HA frontend editor.

  3. Remove some row using UI editor - see that red color style is not working:

  4. The saved card is w/o "card-mod" - the HA frontend editor removed the "card-mod" code:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    entities:
      - entity: sun.sun
      - entity: sun.sun

This happens not with "multiple-entity-row" only - it happens with simple entity rows too.
So, do not edit the card using UI editor.

this might be a long shot, but since the custom-card with the ‘issue’ I have with it seems abandoned, please let me ask here:

can we style the position of the title of these shutter cards, which now all seem randomly aligned above the shutter image. Card option is set to 'top. but other than that, the card doesnt offer styling options:


If at all possible, Id like to either outline all cards Left, or, if not possible center them all. Right now, I dont understand what is’s doing


thanks for having a look

1 Like

Hi. I’m working on a theme in a “Neuromorphic style”
I’m able to customize elements but only in a cards, now i wanna move config to theme file and i’m searching for a help, because every try ends as a failure. Below images as it look in cards configs, and link to github with a working code.

https://github.com/maskaz/HA-Neuromorphic

Thanks and regards

2 Likes

Awesome! Is it possible change the icon for the badges at the top of dashboards using this? I cannot find anything.