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

EinfachKjell · January 10, 2023, 7:14pm

I found the problem.

type: custom:mushroom-template-card
primary: ''
icon: |-
  {% if is_state('switch.kamin','on') -%}
    mdi:fireplace
  {%- else -%}
    mdi:fireplace-off
  {%- endif %}
icon_color: |-
  {% if is_state('switch.kamin','on') -%}
    orange
  {%- else -%}
    disabled
  {%- endif %}
layout: horizontal
entity: switch.kamin
card_mod:
  style: 
    .: |
     :host {
     --mush-icon-size: 70px;
     }
    mushroom-shape-icon$: |
      ha-icon {
        {{'--icon-animation: fire 1500ms infinite;'if is_state('switch.kamin', 'on') }}
        transform-origin: 50% 85%;
      }
      @keyframes fire {
          0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
          20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
      }

gpolzer1 · January 11, 2023, 2:28pm

hello one question please can you also make a border with switch-checked-track-color

catchdave · January 12, 2023, 5:14pm

@thomasloven : Question about the right way to enforce the height of the mini-graph-card. I get a warning from card-mod: “mod-card should NEVER be used with a card that already has a ha-card element, such as mini-graph-card”.

I tried doing it the normal style way, but to enforce the height of mini-graph card, it seems that the CSS height attribute has to be on the mini-graph-card element, which is above the ha-card element. Would love to know the right/best way to do have a smaller graph card (in height). This is what I currently have (it’s in a de-cluttering-template):

  small_mini_graph:
    card:
      type: custom:mod-card
      card_mod:
        style: |
          mini-graph-card { height: 128px; }
      card:
        type: custom:mini-graph-card
        upper_bound_template: '[[upper_template]]'
        entity: '[[sensor]]'
        entities:
          - entity: '[[sensor]]'
            color: '[[color]]'
        show:
          icon_adaptive_color: true
        height: 80
        font_size: 90
        style: |
          .states { padding-bottom: 0; }
          .header { padding-right: 8px; }

arganto · January 12, 2023, 6:32pm

Dont @ users here.
Use it without mod_card. Your reference from Thomas is really related to cards without it.

card_mod:
  style: |
    :host { height: 276px; }

catchdave · January 12, 2023, 6:41pm

Why are you saying not to mention (@) users here? I see it happen alot on this forum (even this specific topic) and it is common practice most elsewhere (github, slack, email, whatsapp, etc).
Thank you! Using :host works and now I can remove the card_mod wrapper. :host is not documented in card-mod, probably would be helpful to have that there

arganto · January 12, 2023, 7:08pm

If other users are doing it wrong, it is no reason to do it as well. See here

dragos · January 12, 2023, 8:30pm

Hello,

I’m trying to make my mushroom buttons pop when clicked; I used the below code:

  - type: custom:mushroom-template-card
    primary: HBO Max
    secondary: ''
    icon: phu:hbo-max
    icon_color: |-
      {% if is_state('script.hbo_max','on') %}
        deep-purple
      {% endif %}
    badge_icon: |-
      {% if is_state('script.hbo_max','on') %}
        mdi:play
      {% endif %}
    badge_color: |-
      {% if is_state('script.hbo_max','on') %}
        green
      {% endif %}
    layout: vertical
    entity: script.hbo_max
    tap_action:
      action: toggle
    card_mod:
      style: |
        :host {
           {% if is_state('script.delay','on') %}
           transition: all .2s ease-in-out;
           transform: scale(1.05);
           {% endif %}
        }

The issue with this code is that I would have to create a separate delay script for each individual button I’m using, as using this syntax will just pop all the other button. I could use the script “hbo_max”, which changes the source to HBO on the TV; however this script takes a few seconds to execute and I’d like the pop to be brief, for a few milliseconds.

Is there a way around it? Can I use another “if” function with the condition that only the button card is pressed? Or is it possible to add a delay after these lines and then rever the values back to normal? Something like

           {% if is_state('script.hbo_max','on') %}
           transition: all .2s ease-in-out;
           transform: scale(1.05);
           delay 200ms
           transform: scale(1.05);
           {% endif %}

Thank you!

parautenbach · January 13, 2023, 5:07am

Arganto is right. Only @ someone if they’ve been part of your specific conversation already (by choice). Even better: Just reply directly to the relevant post or quote it (like I did here). “Everywhere” is not a justification. Those are the forum rules here, and there’s good reason for it.

sagilo · January 15, 2023, 8:12am

Im trying to reduce the padding around a specific mushroom-title-card.
I’ve created it under a mod-card to have a ha-card element but I cant reduce the padding.
Here are the relevant elements:

The padding: 0px should be added to the div element (highlighted)
I’ve tried a few things, among:

card_mod:
  style:
    .: |
      div {
        padding: 0px;
      }
    mushroom-title-card$: |
      div {
        padding: 0px;
      }

Also tried div.header but nothing changes.
Any thoughts?

CDRX2 · January 15, 2023, 12:45pm

Have you tried with !important?

boheme61 · January 15, 2023, 1:38pm

Have you tried

card_mod:
    style: |
       ha-card div.header{
           padding: 0px; ( or --padding: 0px; )
       }

sorry, i just saw your in "mushroom-title-card _shadow-root

Try with

card_mod:
  style:
    .: |
      div.header {
        --padding: 0px;
      }

and also as above add " !important "

boheme61 · January 15, 2023, 2:47pm

, it took me awhile to find this post ( and a dozen attempt to Resize the SVG icon within the ".wrapper " in template-entity-row )

Is this really impossible ? , been sitting 1 day now, and tried dozen different ways.

    - entity: sensor.moon_phase
      name: []
      type: custom:template-entity-row
      state: >-
        {% if is_state('sensor.moon_phase', 'new_moon')%} NyMåne {% else %}  {%
        if is_state('sensor.moon_phase', 'waxing_crescent')%} Tilltagande {%
        else %} {% if is_state('sensor.moon_phase', 'first_quarter')%} HalvMåne
        {% else %} {% if is_state('sensor.moon_phase', 'waxing_gibbous')%}
        Tilltagande Fullmåne {% else %}  {% if is_state('sensor.moon_phase',
        'full_moon')%} FullMåne !!! {% else %}  {% if
        is_state('sensor.moon_phase', 'waning_gibbous')%} Avtagande Fullmåne {%
        else %}  {% if is_state('sensor.moon_phase', 'last_quarter')%} HalvMåne
        {% else %}  {% if is_state('sensor.moon_phase', 'waning_crescent')%}
        Avtagande {% else %} away !!! {% endif %} {% endif %} {% endif %} {%
        endif %} {% endif %}  {% endif %} {% endif %} {% endif %}
      card_mod:
        style:
          div#wrapper state-badge $ ha-state-icon $ ha-icon $: |
            ha-svg-icon {
              height: 36px; !important;
              width: 36px; !important;
            }

Above is latest attempt, with inspiration from the post you replied to … Still no solution to this ?

Or is it me, who just can’t figure out how to get in there ? … i can change the size of the icon in browser_inspector ( as you see to the right in the pic. ), but how to get there with card-mod ?

arganto · January 15, 2023, 4:17pm

What card are you using to include the row?

If I take you eample and put it in an entities card, then a. there is no ha-icon element and b. it is working as always

type: entities
entities:
  - entity: sun.sun
    name: []
    type: custom:template-entity-row
    card_mod:
      style:
        state-badge:
          $:
            ha-state-icon:
              $: |
                ha-svg-icon {
                  height: 36px !important;
                  width: 36px !important;
                }

boheme61 · January 15, 2023, 4:36pm

header-cards

Edit: and Moon entity, Not sun.sun …it seems like it’s the “sensor.moon_phase” which is playing me

Yes, the ha-icon seems to come from the “sensor.moon_phase”, but still in header-cards it’s still, it doesn’t play along

boheme61 · January 15, 2023, 5:20pm

Thanks alot, for “loosen up” my “dilemma” … now the sensor.moon_phase/template-row is inside entities inside header-card …

    - type: entities
      entities:
        - entity: sensor.moon_phase
          name: []
          type: custom:template-entity-row
          state: >-
            {% if is_state('sensor.moon_phase', 'new_moon')%} NyMåne {% else %}
            {% if is_state('sensor.moon_phase', 'waxing_crescent')%} Tilltagande
            {% else %} {% if is_state('sensor.moon_phase', 'first_quarter')%}
            HalvMåne {% else %} {% if is_state('sensor.moon_phase',
            'waxing_gibbous')%} Tilltagande Fullmåne {% else %} {% if
            is_state('sensor.moon_phase', 'full_moon')%} FullMåne !!! {% else %}
            {% if is_state('sensor.moon_phase', 'waning_gibbous')%} Avtagande
            Fullmåne {% else %} {% if is_state('sensor.moon_phase',
            'last_quarter')%} HalvMåne {% else %} {% if
            is_state('sensor.moon_phase', 'waning_crescent')%} Avtagande {% else
            %} away !!! {% endif %} {% endif %} {% endif %} {% endif %} {% endif
            %} {% endif %} {% endif %} {% endif %}
          card_mod:
            style:
              state-badge:
                $:
                  ha-state-icon:
                    $:
                      ha-icon:
                        $: |
                          ha-svg-icon {
                            height: 46px; !important;
                            width: 46px; !important;
                          }

arganto · January 15, 2023, 5:22pm

So is it working or not there now as well? As I’m not using the header-card, I can only test with entities. And there sun (without ha-cion) and moon (with) is working.

type: entities
entities:
  - entity: sensor.moon_phase
    name: []
    type: custom:template-entity-row
    card_mod:
      style:
        state-badge:
          $:
            ha-state-icon:
              $: 
                ha-icon:
                  $: |
                    ha-svg-icon {
                      height: 36px !important;
                      width: 36px !important;
                    }

BTW There are wrong ; in your CSS before !important.

boheme61 · January 15, 2023, 5:28pm

thanx again, it slipped my eyes … yes it’s working now in header-card … i actually also had some problems with the “mushroom-cards” in header-card, but so far everything looks as intention

boheme61 · January 15, 2023, 8:29pm

Card-mod in header:

Thought i would share my code for the Header ( Still under Construction ) , but so far it looks as below:
It’s “a bit” messy, and need some “font” trimming, and eventually i will try and “clean” the card-mod , thou still has to work in both Edge/Firefox

header_cards:
  justify_content: start
  cards:
    - type: weather-forecast
      entity: weather.forecast_home
      name: []
      show_current: true
      show_cond:ition: false
      show_forecast: false
      card_mod:
        style: |
          ha-card {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: -30px
            margin-top: 0px;
            margin-bottom: 0px;
            margin-right: 0px;
            margin-left: -60px;
            font-size: 12pt;
            border-radius: 0px;
            icon-size: 45px; !important;
            width: 160px !important;
          }
          ha-card div.content {
            height: 40px !important;
            width: 100px !important;
          }
          ha-card div.content div.icon-image svg {
            --svg-icon-size: 45px;
            width: 45px;
            height: 45px
          }
          ha-card div.content div.info div.name-state div.state {
            font-size: 14px
          }
          ha-card div.content div.info div.temp-attribute div.temp {
            font-size: 14px
          }
    - type: custom:mushroom-template-card
      primary: '{{ states(''sensor.home_wind_speed'') }} m/s '
      secondary: '{{ states(''sensor.home_precipitation_amount'') }} mm'
      icon: mdi:weather-windy
      entity: sensor.annerstad_wind_speed
      multiline_secondary: true
      layout: horizontal
      icon_color: blue
      fill_container: false
      card_mod:
        style: |
          ha-card {
            ha-icon-size: 38px;
            font-size: 18px;
            border-radius: 0px;
            height: 72px !important;
            width: 60 !important;
            margin-left: -20px;
          }
    - type: entities
      card_mod:
        style: |
          ha-card {
            border-radius: 0px;
            font-size: 16px;
            margin-right: 20px;
            margin-left: -16px;
          }
      entities:
        - entity: sensor.moon_phase
          name: []
          type: custom:template-entity-row
          state: >-
            {% if is_state('sensor.moon_phase', 'new_moon')%} NyMåne {% else %}
            {% if is_state('sensor.moon_phase', 'waxing_crescent')%} Tilltagande
            {% else %} {% if is_state('sensor.moon_phase', 'first_quarter')%}
            HalvMåne {% else %} {% if is_state('sensor.moon_phase',
            'waxing_gibbous')%} Tilltagande Fullmåne {% else %} {% if
            is_state('sensor.moon_phase', 'full_moon')%} FullMåne !!! {% else %}
            {% if is_state('sensor.moon_phase', 'waning_gibbous')%} Avtagande
            Fullmåne {% else %} {% if is_state('sensor.moon_phase',
            'last_quarter')%} HalvMåne {% else %} {% if
            is_state('sensor.moon_phase', 'waning_crescent')%} Avtagande {% else
            %} away !!! {% endif %} {% endif %} {% endif %} {% endif %} {% endif
            %} {% endif %} {% endif %} {% endif %}
          card_mod:
            style:
              state-badge:
                $:
                  ha-state-icon:
                    $:
                      ha-icon:
                        $: |
                          ha-svg-icon {
                            height: 38px !important;
                            width: 38px !important;
                            color: yellow;
    - type: custom:mushroom-entity-card
      entity: sensor.electricity_price_somewhere
      icon_type: icon
      icon: mdi:lightning-bolt-circle
      icon_color: green
      card_mod:
        style: |
          ha-card {
            icon-size: 38px;
            font-size: 18px;
            border-radius: 0px;
            height: 72px !important;
            width: 80 !important;
            margin-right: 0px;
            margin-left: -20px;
          }

KoenChiau · January 15, 2023, 9:08pm

All,

I like to change the color of the icons in a glance card, of which the listed entities are generated by the auto-entities card.

Currently I have this:
Screenshot 2023-01-15 at 22.02.30

==> love to change the color of the yellow icons (“Bureau”, “TV Hoek”, …)

Currently my code is this:

        # --- Conditional Toggle All Lights On
        # ------------------------------------
        - type: conditional
          conditions:
            - entity: input_boolean.on_off_toggle_conditional_lights_on
              state: 'on'
          card:
            type: custom:auto-entities
            show-empty: false
            filter:
              include:
                - domain: light
                  state: 'on'
                  options:
                    tap_action:
                      action: toggle
            card:
              type: glance
              show_state: false
              columns: 6
              card_mod:
                style:
                  .: |
                    ha-card {
                      border-radius: 12px;
                      font-family: Helvetica;
                      font-size: 11px;
                      }
                    .entities.no-header {
                      padding: 8px 0px 0px 0px !important;
                      }
                    .entity {
                      margin: 0px !important;
                      }
                  .entity:
                    $: |
                      state-badge {
                        margin: 0px 0px 4px !important;
                        }

I was successful in changing the icon colors, if I have a simple glance card with entities I list explicitely.
I am at a loss on how to change the icon colors, if the glance card entities are generated by auto-entities card.

Can a CSS guru please guide me ?

boheme61 · January 15, 2023, 9:47pm

filter:
  include:
    - domain: light
      options
          icon_color: yellow