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

Mariusthvdb · July 18, 2024, 11:07am

separate… found it, I had a stray pipe after the top style:

            style: |
              div#wrapper:
                .: |

fixed that and added the icon color under the host, this works:

Working color mods

        card_mod:
          style:
            div#wrapper:
              .: |
                .state {
                  color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }
                .info {
                  color: black;
                  border: 2px solid var(--ha-color);
                  background:
                    {% set perc = states(config.entity)|float(0) %}
                    {% set rest = 100 - perc %}
                    {% if perc <= 10 %} {% set bar = '255,0,0' %}
                    {% elif perc <= 20 %} {% set bar = '128,0,0' %}
                    {% elif perc <= 30 %} {% set bar = '255,140,0' %}
                    {% elif perc <= 40 %} {% set bar = '255,165,0' %}
                    {% elif perc <= 50 %} {% set bar = '255,255,0' %}
                    {% elif perc <= 60 %} {% set bar = '154,205,5' %}
                    {% elif perc <= 70 %} {% set bar = '144,238,144' %}
                    {% elif perc <= 80 %} {% set bar = '50,205,50' %}
                    {% elif perc <= 90 %} {% set bar = '0,128,0' %}
                    {% else %} {% set bar = '0,100,0' %}
                    {% endif %}
                    /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
                    linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
                                              rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
                  }
                .info .secondary {
                  color: white;
                }
            .: |
              :host {
                --card-mod-icon-color:
                  {% set perc = states(config.entity)|float(0) %}
                  {% if perc <= 10 %} red
                  {% elif perc <= 20 %} darkred
                  {% elif perc <= 30 %} darkorange
                  {% elif perc <= 40 %} orange
                  {% elif perc <= 50 %} yellow
                  {% elif perc <= 60 %} yellowgreen
                  {% elif perc <= 70 %} lightgreen
                  {% elif perc <= 80 %} limegreen
                  {% elif perc <= 90 %} green
                  {% else %} darkgreen
                  {% endif %};
                }

MrThiemann · July 18, 2024, 12:11pm

really nice!
did you create your battery type using customize.yaml??

sensor.studenten_hygro_temp_battery:
  friendly_name: Studenten hygro temp Battery
  device_class: battery
  battery_type: CR2477

Mariusthvdb · July 18, 2024, 12:27pm

no, I did think about that, but I installed Battery Notes custom integration

update

setting the secondary line to use the last_replaced was a bit of a challenge, but using this:

filter:
  include:
    - entity_id: sensor.*_battery
      options:
        type: custom:template-entity-row
        state: >
          {{states(config.entity,with_unit=True)}}
        secondary: >
            Batterij: {{states(config.entity ~'_type')}},
            sinds: {{states(config.entity ~'_last_replaced')|as_timestamp(default=none)|timestamp_custom('%d-%m-%y %X',True,'Nog niet geactiveerd')}}

makes the magic happen. the 2 filters both need a default, and setting the first to none, makes the second jump to its default string I want in the card:

and when actually set:

ofc we can use any format we like, this is still an experiment

the unknown on the battery type entities is because somehow the object_id’s are different on my Ikea sensor entities. I still need to re-edit those, which is a mystery, and not an issue.

arganto · July 20, 2024, 5:05pm

Someone here, who have the problem as well with map card, which removes all card_mod on every edit-open in the UI and perhaps a fix for this?

Ildar_Gabdullin · July 20, 2024, 9:18pm

Do not recall the issue with the Map, with some other cards see it practically always.
Not surprised with the fact that it happens with the Map.

e-raser · July 20, 2024, 10:26pm

How can I change this icon size and icon color?

I have the necessary styling but I can’t apply them alltogether properly (or they are not respected):

icon size:

      :host {
        --mdc-icon-size: 60px;
      }

icon color:

                      ha-state-icon:
                        $: |
                          ha-svg-icon {
                            color: green;
                          }

Full (but minimum/reduced) card:

type: custom:mod-card
card:
  type: grid
  columns: 1
  square: false
  title: ''
  cards:
    - type: markdown
      title: ''
      content:
      [ REMOVED IRRELEVANT CONTENT ]
    - type: vertical-stack
      cards:
        - type: grid
          columns: 2
          square: false
          title: ''
          cards:
            - type: button
              [ REMOVED IRRELEVANT CONTENT ]
        - type: custom:auto-entities
          card:
            type: entities
            title: ''
            state_color: true
            show_header_toggle: false
            card_mod:
              style: |
                ha-card {
                  text-align: center;
                  letter-spacing: 1px;
                  font-weight: bold;
                  border-width: 2px;
                  padding: 0px;
                  background: default;
                }
          filter:
            include:
              - entity_id: sun.sun
                options:
                  name: S p r a c h s t e u e r u n g
                  icon: mdi:account-voice
                  tap_action:
                    action: assist
                    start_listening: true
                  card_mod:
                    style:
                      ha-state-icon:
                        $: |
                          ha-svg-icon {
                            color: green;
                          }
                      hui-generic-entity-row:
                        $: |
                          .text-content:not(.info) {
                            display: none;
                          }
                          .info.pointer {
                            #color: red;
                            font-size: 18px;
                          }
            exclude: null
          show_empty: false
          unique: true
          sort: []
        - type: custom:simple-clock-card
          [ REMOVED IRRELEVANT CONTENT ]
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          #width: max-content;
          #margin: 0 auto;
        }
        ha-card {
          #margin-bottom: -15px;
          margin-top: -2px;
        }

EDIT: solved at

arganto · July 21, 2024, 7:59am

But this is then from the parser (changes) of one of the HA updates and we have to live with it or fixable from Thomas or someone else in Card Mod?

Mariusthvdb · July 21, 2024, 8:55am

did you test it in a yaml dashboard?
if you did and the Map cards remain as is, than this would indeed be a UI bug, and should be filed in the repo as such.

I didnt check yet but maybe someone else already reported it? (let’s have a look)

Personally, I had sizing issues with iframe card, and not the map card. I couldnt get the iframe to fill the full width under a fold anymore.
I managed to fix it setting the mod on the fold itself, and no longer on the iframe.

Maybe the issue you experience is related? or do you experience other trouble.

arganto · July 21, 2024, 9:14am

Unfortunately, no. There are no problems. Only the complete code lines of card-mod are deleted on every edit-open for the card. Not nested or anything else.

Edit: And whyever I cannot re-produce it anymore today. It was always the case in the last weeks/months.

AlbyQuaia · July 21, 2024, 2:07pm

Hey everyone, I’m creating a dashboard thorugh YAML mode and I’m using card_mod a lot. I wonder if there is a way to create smooth angles for the cards, as the ones you configure via UI.

Kanecaine · July 22, 2024, 4:33pm

Is it possible to adjust the height of the individual timelines in a history-graph card in timeline view?
I often use the option to open the more-info dialog. Doing this on a touchscreen is a bit difficult because the graphs are so narrow and close together.

laineg · July 23, 2024, 11:33am

I am struggling hard to format the buttons in footer of an entities card. I want to format the buttons at bottom - I tried to work out the DOM selector for hours now…

Chrome:

and:

Here is where I am currently stuck:

        card_mod:
          style: |
            ha-card {
              background-color: var(--primary-background-color);
              padding: 0px;
              border-width: 0px !important;
              color: var(--prim-text-color);
            }
            .card-header {
              font-size: 24px;
              padding: 0px 4px 0px 18px;
              border-bottom: 1px solid var(--divider-color);                                                                                                                                                             
              margin-bottom: 10px;
              font-size: 1.2em;
              font-weight: 450;
              background: var(--primary-background-color);
              border: 0px;
            }
            .card-content {
              font-size: 14px;
              text-transform: uppercase;
              padding: 0px 6px 4px 8px;
              #border-radius: var(--ha-card-border-radius, 12px);
              border: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
              background:  var(--card-bg-color);
            }
            .header-footer {
              background-color: var(--card-bg-color);
              border-bottom: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));    
              border-right: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));       
              border-left: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
              
            }

            #Trying to find the right DOM ;)

            # Works
            .header-footer hui-buttons-header-footer{  
              #border: 1px solid green;
              #display: block;
            }

            # Does not work

            .header-footer hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
              $: |
                ha-assist-chip {
                  border: 1px solid green !important;
                }

I read the previous suggestions in this thread on formatting the buttons - they all dont work for me… Anyone with an Idea?

Mariusthvdb · July 23, 2024, 12:25pm

I made these mods in my card-mod-theme, maybe that can help:

    card-mod-card-yaml: |
      hui-buttons-header-footer $ hui-buttons-base:
        $ : |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
          }

      hui-buttons-header-footer $ hui-buttons-base $: |
          ha-assist-chip {
            border: 1px solid var(--primary-color);
            border-radius: var(--ha-card-border-radius);
            /*--ha-assist-chip-filled-container-color: yellow;*/
            --secondary-text-color: var(--primary-color);
            --primary-text-color: var(--primary-color);
            --_label-text-weight: bold;
          }
          ha-assist-chip state-badge {
            justify-content: space-between;
            margin-left: 4px;
          }

to do things like this

the icons change their active color, but that is not set in these mods

laineg · July 23, 2024, 1:56pm

Thanks for chiming in.

I tried - but no luck. My code misses the hui-butotns-base.

Can you share how you generated the buttons? via footer type:buttonss?

Mariusthvdb · July 23, 2024, 1:57pm

yes:

footer:
  type: buttons
  entities:
    - entity: script.turn_on_cameras
      name: Cameras aan
      icon: mdi:record

    - entity: switch.cameras
      name: Cameras

    - entity: script.turn_off_cameras
      name: Cameras uit
      icon: mdi:stop

did you add the code to the theme and Reload themes?

laineg · July 23, 2024, 2:00pm

Mariusthvdb:

      hui-buttons-header-footer $ hui-buttons-base:
        $ : |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
          }

      hui-buttons-header-footer $ hui-buttons-base $: |
          ha-assist-chip {
            border: 1px solid var(--primary-color);
            border-radius: var(--ha-card-border-radius);
            /*--ha-assist-chip-filled-container-color: yellow;*/
            --secondary-text-color: var(--primary-color);
            --primary-text-color: var(--primary-color);
            --_label-text-weight: bold;
          }
          ha-assist-chip state-badge {
            justify-content: space-between;
            margin-left: 4px;
          }

I just tried it on a fresh dashboard - and your code works. So the mistake is with me. Thanks once again!

I implement the code directly in the raw configuration editor in my build-and-test dashboard, before i then copy it over into my yaml mode configged live dashboard that is live on the ipads on the walls.

Is there a better workflow/way to implement.

Mariusthvdb · July 23, 2024, 2:03pm

nope, what ever works best for you

I do have 2 test dashboards, one in yaml, and one using the UI. If they work, I directly copy them over in my main dashboards.

this particular mod is in my themes, I only have those globally set, so always testing inside the production system. Nothing breaks, and if it does, it’s an easy revert. commandZ a few times and we’re good.

laineg · July 23, 2024, 2:19pm

I got it to work thanks to you - massive kudos to you! Appreciate your help!

Mariusthvdb · July 23, 2024, 2:34pm

wow that was long ago…

because of helping Laineg above, I was reminded I also had those icons changing, and checked the mods in the thread. I can not for the life of me create a correct mod on the button entities them selves or in the footer section as is described there.

all I can do is set this global mod for the entities card containing the footer buttons:

  - type: entities
    card_mod:
      class: class-header-margin
      style:
        hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
          ha-assist-chip:
            .: |
              ha-assist-chip:nth-child(2) {
                --card-mod-icon: mdi:{{'stop' if is_state('script.play_tune','on')
                                       else 'play'}}

when the footer config is:

    footer:
      type: buttons
      entities:
        - entity: input_boolean.loop_tune
          name: Loop tune
        - entity: script.play_tune
          name: Speel tune

I did try this too but they fluke so I commented them so I wont forget…

    footer:
      type: buttons
#       card_mod:
#         style:
#           hui-buttons-base $: |
#             ha-assist-chip:nth-child(2) {
#               {% if is_state('script.play_sound_bite','on') %}
#               --card-mod-icon: mdi:stop;
#               {% else %}
#               --card-mod-icon: mdi:play;
#               {% endif %}
      entities:
        - entity: input_boolean.loop_sound_bite
          name: Loop soundbite
        - entity: script.play_sound_bite
          name: Speel soundbite
#           card_mod:
#             style: |
#               :host {
#                 --card-mod-icon:
#                   {% if states('script.play_sound_bite') == 'on' %} mdi:stop
#                   {% else %} mdi:play
#                   {% endif %};

if you see an obvious error that might fix it, please dont hold back

btw, this IS a nice option to use the iif syntax:

            .: |
              ha-assist-chip:nth-child(2) {
                --card-mod-icon:
                  mdi:{{iif(states('script.play_tune') == 'on','stop','play')}}
              }

laineg · July 23, 2024, 4:56pm

I have another issue: the group of buttons in the footer of my entities card breaks nicely on screen resolutions > 450px. At exactly 450px the lines of buttons jump into one line and overflew left and right of the footer.

Anyone with an idea why this is happening and how I can prevent it? Tried to find breakpoint defintions in the theme but couldnt find it…