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

Thanks but it doesnā€™t work for me, maybe i need to change the rest of the css code. Iā€™ll try asking in the button-card thread.

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.