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

Staff19 · March 14, 2023, 4:35pm

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

Ildar_Gabdullin · March 14, 2023, 4:42pm

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.

Staff19 · March 14, 2023, 5:01pm

i need this, i don’t know how to explain it

Ildar_Gabdullin · March 14, 2023, 5:32pm

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

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

Staff19 · March 14, 2023, 5:39pm

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.

Ildar_Gabdullin · March 14, 2023, 5:45pm

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.

ztorm · March 17, 2023, 9:09am

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!

kbrown01 · March 17, 2023, 5:11pm

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

Mariusthvdb · March 18, 2023, 10:32am

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.

Mariusthvdb · March 18, 2023, 2:10pm

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

…

Ildar_Gabdullin · March 18, 2023, 2:13pm

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

Mariusthvdb · March 18, 2023, 2:17pm

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

Ildar_Gabdullin · March 18, 2023, 2:18pm

You cannot style a button inside a button I guess.

Mariusthvdb · March 18, 2023, 2:24pm

Ildar_Gabdullin:

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

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!

Schermafbeelding 2023-03-18 om 15.24.17

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?

Ildar_Gabdullin · March 18, 2023, 2:34pm

better use config-template-card

Fifthy · March 18, 2023, 3:14pm

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

Mariusthvdb · March 18, 2023, 3:22pm

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.

Tarcisio · March 18, 2023, 3:43pm

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

Mariusthvdb · March 18, 2023, 3:56pm

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?

Fifthy · March 18, 2023, 4:13pm

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