🔹 Card-mod - Add css styles to any lovelace card

Mariusthvdb · June 30, 2021, 8:00am

yes it checks for a state, and works in my setup. You can even do this (button_card_template):

exist:
  styles:
    card:
      - display: >
          [[[ if (!entity) return none; ]]]

and in a card:

  - name: Sonorisation
    template: exist
    entity: input_boolean.notify_syzzzz
    show_name: true
    icon: mdi:speaker
    type: custom:button-card

and (they both) even work if you take out the full entity:

  - name: Sonorisation
    template: exist
#    entity: input_boolean.notify_system
    show_name: true
    icon: mdi:speaker
    type: custom:button-card

or:

  - type: custom:button-card
    template: exist
    entity:
    name: Sonorisation
    show_name: true
    icon: mdi:speaker

back on topic: Thomas replied to the issue I created for this, but though the format of that template seems ok, (and I use that elsewhere in the config templates successfully) I can not get it to work in the card_mod.

Ildar_Gabdullin · June 30, 2021, 8:15am

Look at the 1st post, there is a link to to another post with many styles for the Entities card.

e-raser · June 30, 2021, 9:06am

I did so already. But couldn’t find anything related to title

Ildar_Gabdullin · June 30, 2021, 10:24am

It is described there, try using this:

style: |
  ha-card .card-header {
      ...
  }

Stefan2 · July 1, 2021, 6:53pm

I’m searching for a solution with card-mod to get cards with better look.
The first step is a markdown card,
font-size is to small, text-align should be center.
I tried different things, but nothing works in browser.

Can somebody help me to understand the working of this mod?

parautenbach · July 1, 2021, 8:46pm

On my phone, but have a look at this post of mine to see how I styled a markdown table. Should get you going. Then, it always helps to post at least one of the things you tried — then we can see a real attempt and it gives people some YAML to work with you.

Stefan2 · July 1, 2021, 10:58pm

I tried this and styles with ha-markdown, ha-markdown-element and p, but there were no changes.
In the Inspector i can enter this and it works.

cards:
  - type: custom:layout-card
    layout_type: custom:vertical-layout
    cards:
      - type: custom:layout-card
        layout_type: custom:horizontal-layout
        layout:
          width: 400
        cards:
          - type: markdown
            content: 'Harmony Wohnzimmer'
            style: |
              ha-card {
                font-size: 24px;
                text-align: center;
              }
      
      - type: custom:layout-card
        layout_type: custom:grid-layout
        title: Harmony Wohnzimmer
        layout:
          grid-template-columns: 33% 34% 33%
          grid-template-rows: 60px
          grid-gap: 0px 0px
        cards:

Stefan2 · July 2, 2021, 7:29am

card-mod wasn’t in ressources,
this is working:

    cards:
      - type: custom:layout-card
        layout_type: custom:horizontal-layout
        layout:
          width: 420
        cards:
          - type: markdown
            content: 'Harmony&nbsp;&nbsp;&nbsp;Wohnzimmer'
            card_mod:
              style:
                ha-markdown:
                  $:
                    ha-markdown-element: |
                      p {
                        font-size: 24px;
                        text-align: center;
                        margin-bottom: auto;
                      }

cvester · July 3, 2021, 9:34am

Can anyone help me changing the line-height for all card titles inside a custom:grid-layout ? I’ve tried alooot of things but I’m totally lost …

e-raser · July 4, 2021, 2:22pm

I tried to change a cards title. Tried for over one hour and something.

It seems to simply be impossible. I tried every approach, last two promising were

type: custom:mod-card
card:
  type: grid
  columns: 1
  square: false
  title: Welcome Home
  cards:
    - type: vertical-stack
      cards:
        - type: button
          tap_action:
            action: navigate
            navigation_path: home
          name: Home
          icon: mdi:home-circle
          hold_action:
            action: none
          icon_height: 100px
          show_state: false
        - type: custom:simple-clock-card
          use_military: true
          hide_seconds: false
          font_size: 2rem
          padding_size: 10px
          card_mod:
            style: |
              ha-card {
                letter-spacing: 3px;
                border: 0px;
                padding: 3px;
                background: default;
              }
  card_mod:
    style: |
      ha-card .card-header {
        margin-left: auto;
        color: red;
        margin-right: auto;
      }

and

type: custom:mod-card
card:
  type: grid
  columns: 1
  square: false
  title: Welcome Home
  cards:
    - type: vertical-stack
      cards:
        - type: button
          tap_action:
            action: navigate
            navigation_path: home
          name: Home
          icon: mdi:home-circle
          hold_action:
            action: none
          icon_height: 100px
          show_state: false
        - type: custom:simple-clock-card
          use_military: true
          hide_seconds: false
          font_size: 2rem
          padding_size: 10px
          card_mod:
            style: |
              ha-card {
                letter-spacing: 3px;
                border: 0px;
                padding: 3px;
                background: default;
              }
  card_mod:
    style: |
      .name {
        margin-left: auto;
        color: red;
        margin-right: auto;
      }

Changed exactly nothing. Summary: changing card titles is impossible. Everyone trying to do this on a per card basis: don´t waste your time (like I did).

Ildar_Gabdullin · July 4, 2021, 3:30pm

What do you want exactly?
Could you provide a picture describing your intentions?

e-raser · July 4, 2021, 7:21pm

I want to center a card´s title. Nothing more, nothing less

See 🔹 Card-mod - Add css styles to any lovelace card - #1951 by e-raser

To be more visual:

Currently:

Desired (mock-up):

Mission impossible according to what I´ve gone through so far.

+++ UPDATE +++
Solution provided by @MaestroMetty at 🔹 Card-mod - Super-charge your themes! - #864 by MaestroMetty.

Ildar_Gabdullin · July 4, 2021, 9:06pm

This is not a solution. This is just another approach.

e-raser · July 4, 2021, 9:42pm

Okay Well it´s working (basically) for me. Even the need for using the custom:mod-card is not nice but I can completely live with that.

Would you propose another approach for the same result?

Ildar_Gabdullin · July 4, 2021, 9:47pm

Here it is, use any alignment:

type: vertical-stack
cards:
  - type: entities
    title: Some title (+card-mod)
    card_mod:
      style: |
        ha-card .card-header {
          border: 3px dotted magenta;
          padding: 0px;
          display: unset;
        }
        ha-card .card-header .name {
          color: red;
          text-align: right;
          font-weight: 1000;
          letter-spacing: 3px;
        }
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
  - type: entities
    title: Some title
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun

e-raser · July 4, 2021, 9:57pm

Well I´m using a grid and the title is part of the grid, not a card inside the grid. So this approach (which was my first try before asking here) isn´t working for me unfortunately. But that´s okay. Once a last question (how to combine styles for several parts in one card_mod section) is clarified I´m totally happy.

Thanks for your effort!

Ildar_Gabdullin · July 4, 2021, 10:08pm

When I asked you about your intentions, you only told about the Entities card’s title.
Now you are talking about grid card’s title.
Did you try searching here in the thread? Grid cards were discussed here - exactly about styling headers.

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;
          text-align: right;
        }
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

e-raser · July 5, 2021, 7:32pm

Well I was only talking bout a cards title, quite unspecific to be honest
I learned that for applying something to a grid card we need the custom:mod-card. So basically the solution exists, BUT I can´t apply the “center grid card title” CSS to an existing style affecting the whole ha-card. I just don´t know what the syntax is.

In details:

Ildar_Gabdullin · July 5, 2021, 8:35pm

The same example as above:

type: entities
title: Some title (+card-mod)
card_mod:
  style: |
    ha-card {
      border: 3px solid cyan;
    }
    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }
    ha-card .card-header .name {
      color: red;
      text-align: right;
      font-weight: 1000;
      letter-spacing: 3px;
    }
entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun

e-raser · July 5, 2021, 9:59pm

Here´s my real life example:

type: custom:mod-card
card:
  type: grid
  columns: 3
  square: true
  title: Services
  cards:
    - type: button
      tap_action:
        action: navigate
        navigation_path: wetter
      name: Wetter
      icon: mdi:white-balance-sunny
      hold_action:
        action: none
      show_name: true
      show_state: false
      show_icon: true
    - type: button
      tap_action:
        action: navigate
        navigation_path: orte
      name: Orte
      hold_action:
        action: none
      show_name: true
      show_state: false
      show_icon: true
      icon: mdi:map-marker
    - type: button
      tap_action:
        action: navigate
        navigation_path: gesundheit
      name: Gesundheit
      icon: mdi:hospital-box
      hold_action:
        action: none
      show_name: true
      show_state: false
      show_icon: true
card_mod:
  style: |
    ha-card {
      border: 1px solid grey;
      padding: 5px;
      background: none;
    }
    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }
    hui-grid-card:
      $: |
        .card-header {
          width: max-content;
          margin: 0 auto;
        }

Neither your appended

    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }

nor the

    hui-grid-card:
      $: |
        .card-header {
          width: max-content;
          margin: 0 auto;
        }

are working. Only the first section

    ha-card {
      border: 1px solid grey;
      padding: 5px;
      background: none;
    }

is applied:

So where is the bug?!? Drives me crazy meanwhile