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

  1. Dont @ users here.

  2. Use it without mod_card. Your reference from Thomas is really related to cards without it.

card_mod:
  style: |
    :host { height: 276px; }
  1. 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).

  2. 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 :slight_smile:

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

1 Like

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!

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.

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:
image

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?

Have you tried with !important?

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 "

:frowning: , 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 ?

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

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

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

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.

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 :slight_smile: :+1:

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

2 Likes

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 ?

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

@boheme61,

I cannot get this to work.
Browsing the docs for auto-entities card and entities card, I cannot find any “icon_color” option.

Am I missing something ?

Maybe you are right, The “Options” is applied to the “Card” you choose to present the individual entities as, so if you chooses “entities”(default) then it’s the configuration options for entities you can apply here.
I am im using custom:mushroom-entity.card( custom:auto-entities in grid, in a custom:fold-entity-row ), so thats where i got this “option” from :slight_smile:

Thou it’s also here “under options” you apply “optional” card-mods to each(all) entities(the “entity”-card)

card_param: cards
filter:
  include:
    - domain: device_tracker
      options:
        type: custom:mushroom-entity-card
        icon_color: green
        hide_state: true
        style: |
          ha-card {
            --icon-size: 24px;
            --card-height: 26px;
            --font-size: 15px;

EDIT: I still wonder how your presented card-pic is made/function, as your description(code-snippet for conditional) puzzles me

Thx for the feedback.
The code I used displays a glance card (populated by auto-entities) only if a certain input_boolean is “on”. That logic seems to work fine.

My query is how to change the icon color of the populated (light) entities in the glance card…