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

What does not work?
Styling for bar-card works.
But if you already have some styling for bar-card - you need to COMBINE your & new styles (1st post → link at the bottom → other articles → navigation hints).
This is not related to button-card. For the button you only need to find out how to adjust it’s height to the stack.

I’m trying to figure this out as well. Could you show your whole card_mod config for the active tab color?

Thanks in advance!

@ztorm Key is CSS for “active” … mwc-tab[active]
Here ya go:

     - type: custom:mod-card
        card_mod:
          style:
            tabbed-card $: |
              mwc-tab {
                background: var(--ha-card-background, var(--card-background-color, white) );
                border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
                border-width: 2px;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                border-style: solid;
                overflow: hidden;
                width: 25%;
              }
              mwc-tab[active] {
                background: #EBFFD8 !important;
              }
        card:
          type: custom:tabbed-card

Results showing MLB->Standings->Divisional are the selected tabs.

yesterday, finally found the easiest (?) way of spreading some entities in a glance card, and use the width better.

I use this inside an entities card, so thats why the hui-element is used, and the default mod for setting the margin and eliminating box shadow. Its the second mod for padding that makes it happen:

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          margin: 0px -16px -16px -16px;
          box-shadow: none;
        }
        ha-card .entities {
          padding: 0px;
        }

resulting in:

opposed to:

which feels so much more restricted.

It’s remarkable HA Frontend does this with entities, because eg when using a grid with mushroom cards there, it simply adjust to the available space

  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          margin: 0px -16px -16px -16px;
        }
    card:
      type: grid
      columns: 5
      cards:

in fact, I had these both in my card, and that was why I noticed…

i couldn’t find this simple mod in the posts above for Glance, so thought to add here.

moving from 🔹 Card-mod - Super-charge your themes! - #1331 by Ildar_Gabdullin

looking for a way to change the icon of button in an entities card footer

consisting of these:

    footer:

      type: buttons
      entities:
        - entity: input_boolean.loop_sound_bite
          name: Loop Soundbite
        - entity: script.play_sound_bite
          name: Speel soundbite
          icon: mdi:play

and suggested generic mod is:

card_mod:
  style:
    hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
      ha-chip:
        $: |
          .mdc-chip {
            border: 1px solid red !important;
            border-radius: 4px !important;
          }
        .: |
          ha-chip:nth-child(3) {
            {% if is_state('input_boolean.test_boolean','on') %}
            --ha-chip-background-color: lightgreen;
            {% else %}
            --ha-chip-background-color: cyan;
            {% endif %}
          }

I dont need the first section, as my buttons are modded/styled in the card-mod-theme already, only need the icon to change.

compare a custom:button-card config like

  - type: custom:hui-element
    card_type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: input_boolean.loop_tune
        <<: &style_boolean
           show_name: false
           show_label: true
           label: >
             [[[ var loop = (entity.state === 'on') ? 'Aan' : 'Uit';
                 return 'Loop: ' + loop; ]]]
           aspect_ratio: 4/1
           icon: >
             [[[ return (entity.state === 'on') ? 'mdi:restart' : 'mdi:restart-off'; ]]]
           styles:
             icon:
               - color: >
                   [[[ return (entity.state === 'on') ? 'green' : 'var(--text-color)'; ]]]
           card_mod:
             style: |
               ha-card {
                 box-shadow: none;
               }

      - type: custom:button-card
        entity: script.play_tune
        <<: &style_script
           show_name: false
           show_label: true
           label: >
             [[[ return (entity.state === 'on') ? 'Stop' : 'Speel'; ]]]
           aspect_ratio: 4/1
           icon: >
             [[[ return (entity.state === 'on') ? 'mdi:stop' : 'mdi:play' ]]]
           styles:
             card:
               - box-shadow: none
             icon:
               - color: >
                   [[[ return (entity.state === 'on') ? 'red' : 'var(--text-color)'; ]]]
           tap_action:
             action: call-service
             service: script.toggle
             service_data:
               entity_id: entity
             haptic: light
           hold_action:
             action: more-info
             haptic: light

Styling buttons-row in a footer (+ dependently on a state)
Similarly to buttons-row in Entities card:

изображение

code
type: entities
title: footer
entities:
  - input_boolean.test_boolean
footer:
  type: buttons
  entities:
    - entity: sun.sun
      show_name: true
      show_icon: true
    - entity: sun.sun
      show_name: true
      show_icon: true
    - entity: input_boolean.test_boolean
      show_name: true
      show_icon: true
    - entity: sun.sun
      show_name: true
      show_icon: true
card_mod:
  style:
    hui-buttons-header-footer $ hui-buttons-base $: |
      ha-assist-chip:nth-child(3) {
        {% if is_state('input_boolean.test_boolean','on') %}
        --ha-assist-chip-filled-container-color: lightgreen;
        {% else %}
        --ha-assist-chip-filled-container-color: cyan;
        {% endif %}
        border: 1px solid red;
        border-radius: 4px;
      }
before 2023.12
card_mod:
  style:
    hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
      ha-chip:
        $: |
          .mdc-chip {
            border: 1px solid red !important;
            border-radius: 4px !important;
          }
        .: |
          ha-chip:nth-child(3) {
            {% if is_state('input_boolean.test_boolean','on') %}
            --ha-chip-background-color: lightgreen;
            --card-mod-icon: mdi:card;
            {% else %}
            --ha-chip-background-color: cyan;
            --card-mod-icon: mdi:account;
            {% endif %}

изображение

card itself
type: entities
title: footer
entities:
  - input_boolean.test_boolean
footer:
  type: buttons
  entities:
    - entity: sun.sun
      show_name: true
      show_icon: true
    - entity: input_boolean.test_boolean
      show_name: true
      show_icon: true
    - entity: input_boolean.test_boolean
      show_name: true
      show_icon: true
    - entity: sun.sun
      show_name: true
      show_icon: true
1 Like

I really dislike these nth-child mods, they are so fragile. add/remove an item and its broken
… I had hoped to set a mod directly on the entity itself

You cannot style a button inside a button I guess.

can confirm

  - type: entities
    title: Soundbites
    card_mod:
      class: class-header-margin
    style:
      hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
        ha-chip:

          .: |
            ha-chip:nth-child(2) {
              {% if is_state('script.play_sound_bite','on') %}
              --card-mod-icon: mdi:stop;
              {% else %}
              --card-mod-icon: mdi:play;
              {% endif %}

to work ok!

Scherm­afbeelding 2023-03-18 om 15.24.17
Scherm­afbeelding 2023-03-18 om 15.24.23

can we also touch the name? Like I did in the label of the button-card?
btw, inspector reveals some really odd texts:

including the tap and hold action inside the title?

better use config-template-card

I can’t figure this one out, any help would be greatly appreciated.

yeah, probably.
well, I’ll leave it with the button icon for now. this getting way too complicated for such a small detail in the interface, trying to fix the inflexibility of core Frontend (lack of) options.

If I need more, I guess I just have to fall back to use custom:button-card.

Hello my friend! Did you find a solution for that??
I saw your post on GitHub…
Thank you!!

vertical-stack needs a custom:mod-card to do things like:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: -16px;
      box-shadow: none:
    }
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: vertical-stack

did you try that?

Unfortunetly it didn’t work, this is my code with your suggestion.

type: custom:mod-card
card_mod:
  style: |
   .card-header {
      padding: 6px 16px 2px !important;
   }
card:
  type: vertical-stack

Check Ildars post 🔹 Card-mod - Add css styles to any lovelace card - #1731 by Ildar_Gabdullin on vertical stack

I found the solution from your link, thank you!

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card$: |
      .card-header {
        padding: 6px 16px 22px !important;
      }
card:
  type: vertical-stack

Probably daft/old or combi of those but I cannot modify the title of a markdown card (or other)
I read for about 2 hours, tried left/right but (see assumption above)
This is the simplest I could think off, it is not doing anything to the header ‘some title’
Please prove my lack-of-whatever … then at least I have a solution :slight_smile:

type: markdown
content: >-
  whatever text
title: Some Title
card-mod:
    style: |
      .card-header {
      color: blue;
      }

Has anyone tried to mod the browser_mod popup timeout? It uses primary-color, but in inspect element, there is no color value te be found. I use a primary-color that looks very close to my background-color, so the timeout bar is virtually invisible.

I’m talking about this progress bar btw:

image

I’ve dug around the CSS, but perhaps someone already has done this.

Try --primary-color: transparent; under style to hide the timeout bar

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Purifier
    timeout: 300000
    style: |
      --popup-max-width: calc(385px + 495px);
      --primary-color: transparent; /* hide timeout progress */
...