šŸ”¹ Card-mod - Add css styles to any lovelace card

yes, Iā€™ve just discovered we can put most anything there, a simple null works too :wink: Best leave it out completely then, I donā€™t really like useless code.

about the entity in the view:

I tried it on a simple button:

  - name: Sonorisation
    entity: input_boolean.notify_system
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
    card_mod:
      style:
        <<: *exist

using the same test trick (delete the last character of the entity, still shows the card)

maybe this should be done from within the button-card, but for educational purposes of card-mod Ireally like to have a go at it here too.

because, and here comes the full monty, if we can figure it out, it needs to be combined with a rather huge card_mod :wink:

maybe even that should be done in the button card with the extra_styles option I now realize.

  - name: Sonorisation
    entity: input_boolean.notify_system
    show_name: true
    icon: mdi:speaker
    styles:
      custom_fields:
        wave:
          - background-color: rgba(0,0,0,0)
          - position: absolute
          - right: 5%
          - top: 5%
          - font-size: 13px
          - line-height: 20px
          - display: |
              [[[
                if (states['input_boolean.notify_system'].state == 'on') return '';
                else return 'none';
              ]]]
          - '--icon-color': |
              [[[
                if (states['input_boolean.notify_system'].state == 'on') return 'var(--icon-color-on)';
                else return 'var(--primary-color)';
              ]]]
      card:
        - border: 2px solid var(--primary-color)
        - border-radius: 10px
      icon:
        - color: var(--primary-color)
      name:
        - font-variant: small-caps
        - color: var(--primary-color)
    custom_fields:
      wave: |
        [[[
         return `
           <div class="loader-container">
             <div class="loader-3">
              <div class="item-1"></div>
              <div class="item-2"></div>
              <div class="item-3"></div>
              <div class="item-4"></div>
              <div class="item-5"></div>
             </div>
           </div>`
        ]]]
    type: custom:button-card
    card_mod:
      style: |
        .loader-3{
          width: 40px;
          height: 40px;
        }

        .loader-3 div {
          height: 100%;
          width: 3px;
          display: inline-block;
        }
        .loader-3 div .item-1{
          height: 50%;
        }
        .loader-3 .item-1 {
          animation: loader-3-first-div 1.2s infinite linear;
          background-color: red;
        }

        .loader-3 .item-2 {
          animation: loader-3-second-div 1.2s infinite linear;
          animation-delay: -1.1s;
          background-color: darkorange;
        }

        .loader-3 .item-3 {
          animation: loader-3-third-div 1.2s infinite linear;
          animation-delay: -1.0s;
          background-color: gold;
        }

        .loader-3 .item-4 {
          animation: loader-3-fourth-div 1.2s infinite linear;
          animation-delay: -0.9s;
          background-color: green;
        }

        .loader-3 .item-5 {
          animation: loader-3-last-div 1.2s infinite linear;
          animation-delay: -0.8s;
          background-color: DarkOrchid;
        }

        @keyframes loader-3-first-div {
          25%,75% {
            transform: scaleY(0.2);
          }
          0%,50%,100%{
            transform: scaleY(0.6);
          }
        }
        @keyframes loader-3-second-div {
          25%,75% {
            transform: scaleY(0.4);
          }
          0%,50%,100%{
            transform: scaleY(1);
          }
        }
        @keyframes loader-3-third-div {
          25%,75% {
            transform: scaleY(0.4);
          }
          0%,50%,100%{
            transform: scaleY(1);
          }
        }
        @keyframes loader-3-fourth-div {
          25%,75% {
            transform: scaleY(0.4);
          }
          0%,50%,100%{
            transform: scaleY(1);
          }
        }
        @keyframes loader-3-last-div {
          25%,75% {
            transform: scaleY(0.2);
          }
          0%,50%,100%{
            transform: scaleY(0.6);
          }
        }
1 Like

There is smth strange with "is_state(config.entity,'unknown')" for "custom:button-card":
Five buttons:
1 - with "is_state(config.entity,'unknown')" - the card is still displayed for wrong entity;
2 - with "is_state('THIS_WRONG_ENTITY', 'unknown')" - the card is still displayed for wrong entity;
3 - with "states(config.entity) in ['unknown']" - the card is NOT displayed for wrong entity;
4 - always "display: none" - the card is NOT displayed;
5 - the card w/o style.


The code:

type: vertical-stack
cards:
  - type: entity
    entity: sun.sun
  - name: Sonorisation (with style 1)
    entity: input_boolean.test_boolean__non_existing__
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
    card_mod:
      style: |
        :host {
          {% if is_state(config.entity,'unknown') %} display: none !important; {% endif %}
        }
  - name: Sonorisation (with style 2)
    entity: input_boolean.test_boolean__non_existing__
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean__non_existing__','unknown') %} display: none !important; {% endif %}
        }
  - name: Sonorisation (with style 3)
    entity: input_boolean.test_boolean__non_existing__
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
    card_mod:
      style: |
        :host {
          {% if states(config.entity) in ['unknown'] %} display: none !important; {% endif %}
        }
  - name: Sonorisation (with style 4)
    entity: input_boolean.test_boolean
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
    card_mod:
      style: |
        :host {
          display: none !important;
        }
  - name: Sonorisation (w/o style 5)
    entity: input_boolean.test_boolean
    show_name: true
    icon: mdi:speaker
    type: custom:button-card

its the !important that is making it work:

    card_mod:
      style: |
           :host {
             {% if states(config.entity) == 'unknown' %} display: none !important{% endif %}
           }

works too.
Always understood that its considered bad practice using the !important, so Iā€™ve never done that, anywhere in the config yet .

as said, we should probably use the button card options itself:

    type: custom:button-card
    styles:
      card:
        - display: >
            [[[ if (!entity.state) return none; ]]]

note to self: add this to button_card_templates.yaml :wink:

This is not the issue.
The issue is that is_state(config.entity,'unknown') not working as well as is_state('my_wrong_entity_id,'unknown').
In my opinion - this is a BUG.

Have a look at this example:
image

type: entities
entities:
  - entity: sun.sun
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolen','unknown') %} color: red; {% endif %}
        }
  - entity: sun.sun
    card_mod:
      style: |
        :host {
          {% if states('input_boolean.test_boolen') in ['unknown'] %} color: red; {% endif %}
        }
  - entity: sun.sun
    card_mod:
      style: |
        :host {
          {% if states('input_boolean.test_boolen') == 'unknown' %} color: red; {% endif %}
        }

The 1st style does not work for some wrong entity, the 2nd & 3rd do.
So this is a common behaviour, not only for the "custom:button-card".

And letā€™s look at the ā€œTemplatesā€ window:
image

Asked a question here and got a reply from Petro.


Here is my test with your style - 3 buttons:
1 - wrong entity
2 - wrong entity + your style
3 - valid entity

type: vertical-stack
cards:
  - name: Sonorisation (wrong entity)
    entity: input_boolean.test_boolean___XXX
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
  - name: Sonorisation (wrong entity + style)
    entity: input_boolean.test_boolean___XXX
    show_name: true
    icon: mdi:speaker
    type: custom:button-card
    styles:
      card:
        - display: >
            [[[ if (!entity.state) return none; ]]]
  - name: Sonorisation
    entity: input_boolean.test_boolean
    show_name: true
    icon: mdi:speaker
    type: custom:button-card

Seems that this style does not workā€¦
"entity.state" returns a state. If the entity is undefined then it causes an error.
As for me, I do not know how to check whether an entity is valid or not in the "custom:button-card".

Sorry for an off-topic, this should be discussed in the ā€œcustom:button-cardā€ thread.

I try to apply some custom style to the title area of a (entities) card. Unfortunately this isnĀ“t working, all style changes are ā€œonlyā€ applied to the card below the title area.

How to modify a cardĀ“s title? Basically I just want to center a cards title instead of having it aligned left.

Do I need to fake a title somehow to modify it or is there another, more easy way?

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.

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

I did so already. But couldnā€™t find anything related to title :frowning:

It is described there, try using this:

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

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?

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.

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:

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;
                      }

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 ā€¦

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).

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

I want to center a cardĀ“s title. Nothing more, nothing less :man_shrugging:

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.

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

Okay :slight_smile: 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?

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

image