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

Pease help me,I would like the cards to be of the same size and the title ā€œConsumo Istantaneoā€ to be in the centre of that card, here is my code:

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    #root {
      margin: 15px !important;
    }  
card:
  type: horizontal-stack
  cards:
    - type: weather-forecast
      entity: weather.forecast_meteonetwork
      show_current: true
      show_forecast: false
      secondary_info_attribute: humidity
      name: Torino
    - type: custom:button-card
      entity: sensor.date
      show_name: false
      show_icon: false
      show_state: true
      styles:
        grid:
          - grid-template-areas: '"s" "ora" "event"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content
        state:
          - justify-self: center
          - align-self: center
        custom_fields:
          ora:
            - justify-self: center
            - align-self: center
            - font-weight: bold
          event:
            - justify-self: center
            - align-self: center
      custom_fields:
        ora: |
          [[[ return `<span>${states['sensor.time'].state}</span>` ]]]
        event: |
          [[[ return `<span>Appuntamenti calendario</span>` ]]]
    - type: custom:bar-card
      title: Consumo Istantaneo
      show_icon: true
      name: ' '
      max: 4100
      positions:
        indicator: inside
        value: inside
      unit_of_measurement: W
      severity:
        - color: '#1e90ff'
          from: 0
          to: 3299
        - color: Orange
          from: 3000
          to: 3500
        - color: red
          from: 3501
          to: 4100
      style: |
        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 10px;
        }
        ha-card { 
          --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
          --ha-card-background: "rgba(0, 0, 0, 0.0)";
          --paper-item-icon-color: 'var(--text-primary-color';
          --ha-card-box-shadow: 'none';
        }
        ha-card .card-header .name {
          text-align: center;
        }
      entities:
        - entity: sensor.sensore_potenza_casa_w

Try to simplify the issue - get rid of card-mod for embedded cards & other complex code and concentrate on these 2 tasks. You are asking for a help a posting a code with lots of unrelated details.

i need this, i donā€™t know how to explain it

For bar-card - here is how to center a title:

type: custom:bar-card
title: title
entities:
  - entity: sensor.processor_use
card_mod:
  style:
    $: |
      .card-header {
        text-align: center;
      }

image

As for button-card - probably better to ask in the button-card thread.

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