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

I have tried it many ways in different places and I can not get it to apply I am wondering if its a shadow dom thing as the code posted works when its not nested under tabbed card however I cant get my head around it

Iā€™m tried to create animation but i have a problem, when text scrolling from down to up make overlap with primary text

immagine

itā€™s possible block scrolling under secondary field?

  - type: custom:mushroom-template-card
    picture: /local/channel/rai3.png
    primary: '{{ state_attr(''sensor.rai3'',''name'') }}'
    secondary: '{{ state_attr(''sensor.rai3'', ''description'') }}'
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.panasonic_3
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            {{ 'animation: scroll-text 10s linear infinite;' }}
            white-space: normal !important;
            overflow: visible !important;
            display: -webkit-box;
            -webkit-line-clamp: 4; 
            -webkit-box-orient: vertical;
           }
          @keyframes scroll-text {
            from {
            -moz-transform: translateY(100%);
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            }
            to {
            -moz-transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            }
          }
        .: |
          ha-card {
            overflow: hidden;
          }

Thanks in advanced

I have no idea about todo list.
But in general styling a card inside a tabbed-card should be on THIS cardā€™s level:

type: custom:tabbed-card
tabs:
  - card:
      type: entity
      entity: sun.sun
      card_mod:
        style: |
          ha-card {
            color: red;
          }
    attributes:
      ...

In general - no need to test styling a card inside tabbed-card, try it w/o tabbed-card first.

Hello there

Admitted, I moved from a rather old 2022.6.6 with card-modder to a brand new 2024.1.2 with card-mod 2 (or 3, HACS anyway), and had the usual amount of fun getting everything working again, but I had to upgrade, as the fix for the August integration did not apply to such old core version.

The issue left now, is with card-mod 3. It seems that no matter what I write in the Style section it doesnā€™t change a thing on my cards. Iā€™m just trying to resize the card and put a green border on it (worked in card-modder).

I would think I have the spelling and indents right, but because itā€™s the same problem with all types of cards, surely I must be doing something wrongā€¦ :wink:

I am thankful for any help.

Example:

           - type: 'custom:simple-thermostat'
              entity: climate.stue_aircon
              name: AirCon Stue
              step_size: 1
              control:
                hvac:
                  some_mode: false
                  another_mode: false
                  'off':
                    name: Power
                    icon: mdi:power
              card-mod:
                style: |
                    ha-card {
                    margin: 0.1rem 0.1rem;
                    -webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.8);
                    -moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.8);
                    box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.8);
                    border-radius: 10px;
                    border: solid 5px rgb(80,120,80);
                    color: rgb(137, 193, 137)
                    height: 200px;
                    --ha-card-background: rgba(20, 20, 20, 0.6);
                    --st-font-size-xl: 12px;
                    --st-font-size-m: 10px;
                    --st-font-size-title: 16px;
                    --st-font-size-sensors: 8px;
                    --st-font-size-toggle-label: 8px;
                    --st-spacing: 1px;
                    }




Regards Michael J

Start with fixing the typo: ā€œcard_modā€.

In general. In general in technics.
Test with a simple case first.

            - type: 'custom:simple-thermostat'
              ... as minimal as possible for this card to be shown
              card_mod:
                style: |
                    ha-card {
                      background: red;
                    }
1 Like

Thanks! Works with --tile-color:

Thanks for pointing me your great list :heart_eyes:

Works!

1 Like

Illdar

I canā€™t believe you saw this typo right away - I have been staring at this for week now, without seeing it.
Problem solved !

Thank you so much.

/Michael J

1 Like

I got this working, in case someone needs it here the solution:

square: false
columns: 2
type: grid
cards:
  - features:
      - type: target-temperature
    type: tile
    entity: climate.heizung_wohnzimmer
    name: Wohnzimmer
    icon: mdi:heating-coil
    show_entity_picture: false
    vertical: true
    tap_action:
      action: toggle
    state_content:
      - current_temperature
      - valve_open_percent
    card_mod:
      style:
        ha-tile-info$: |
          .secondary:after {
          visibility: visible;
          content: " - {{ states('sensor.shelly_ht_wohnzimmer_humidity') }}%";
        .: |
          ha-card {
          --ha-card-background: 
            {% set state = ((states('sensor.luften_wohnzimmer')) | string) %}
            {% if (state == "Egal" ) %}
              {% set color = 'var(var(--paper-toggle-button-unchecked-button-color))' %}
            {% elif (state == "Ja" ) %}
              {% set color = '#145A32' %}
            {% else %}
              {% set color = '#78281F' %}
            {% endif %}
            {{ color }};
          }
          .info {
            {% if states('binary_sensor.fenster_wohnzimmer_alle') == 'on' %} 
              --primary-text-color: #039be5;
            {% endif %};
          }
          hui-card-features {
            {% if states('binary_sensor.fenster_wohnzimmer_alle') == 'on' %} 
              --primary-text-color: #039be5;
            {% endif %};
          }

Can anyone suggest an avenue to explore to get the battery icon colored via the following code in custom-auto-enties using a glance card? or an alternative idea?

Green-to-red icon color gradient template (battery percentage)
Example #1

type: custom:button-card
entity: sensor.s22_ultra_battery_level
show_state: true
variables:
  var_color: |-
    [[[ 
      var percentage = entity.state;
      var r = 0; var g = 0; var b = 0;
      if (percentage < 50 ) {
        var r = 255;
        var g = parseInt(5.1 * percentage);
      } else {   
        var g = 255;
        var r = parseInt(510 - 5.10 * percentage);
      }
      var h = r * 0x10000 + g * 0x100 + b * 0x1;
      return '#' + ('000000' + h.toString(16)).slice(-6);
    ]]]
styles:
  icon:
    - color: '[[[ return variables.var_color ]]]'

Example #2

type: custom:mushroom-template-card
entity: sensor.s22_ultra_battery_level
primary: '{{ state_attr(entity, "friendly_name").title() }}'
secondary: '{{ states(entity) + "%" }}'
layout: vertical
icon: |
  {% set battery_level = states(entity) | int // 10 * 10 %}   
  {% set charging_state = states('sensor.s22_ultra_charger_type') %}   
  {% set is_charging = is_state('binary_sensor.s22_ultra_is_charging', 'on') | iif(True, False) %}  
  {% set map = {"none":"", "ac":"charging-", "wireless":"charging-wireless-"} %}  
  {% set charging = map[states('sensor.s22_ultra_charger_type')] %} 
  {% if battery_level == 100 and is_charging == True %} mdi:battery-charging   
  {% elif battery_level == 100 %} mdi:battery      
  {% elif battery_level >= 10 %} mdi:battery-{{charging}}{{battery_level}}    
  {% elif battery_level >= 0 %} mdi:battery-{{charging}}outline     
  {% else %} mdi:battery-unknown     
  {% endif %} 
icon_color: |-
  {% set percentage = states(entity) | int %}
  {% set r, g, b = 0, 0, 0 %}
  {% if (percentage <= 51) %}
    {% set r = 255 %}
    {% set g = (5.0 * percentage) | round | int %}
  {% else %}
    {% set g = 255 %}
    {% set r = (505 - 4.89 * percentage) | round | int %}
  {% endif %}
  {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}

Iā€™ve tried every which way from Sunday but to no avail. This is my most recent code but I canā€™t figure out a way to use the JS from above in any way shape or form:

type: custom:auto-entities
card:
  type: glance
  title: Batteries
  columns: 3
  theme: airy
  show_name: true
  show_icon: true
  show_state: true
  state_color: false
  card_mod:
    style:
      .entity:
        $: |
          state-badge {
            color: red;
          }
filter:
  include:
    - entity_id: '*battery'
      options: {}
    - entity_id: '*battery_level'
  exclude:
    - state: unknown
    - entity_id: automation*
    - entity_id: '*low_battery*'
    - entity_id: sensor.my_phone_battery_level
sort:
  method: state
  reverse: false
  numeric: true

Iā€™ve managed to make this card but Iā€™m still trying to conquer auto-entities & glance!

1 Like

If I canā€™t solve it I will go with this insteadā€¦

type: custom:battery-state-card
sort: state
colors:
  steps:
    - value: 15
      color: '#FF0000'
    - value: 50
      color: '#FFD500'
    - value: 52.11
      color: '#F1D100'
    - value: 54.21
      color: '#E4CD00'
    - value: 56.32
      color: '#D6C901'
    - value: 58.42
      color: '#C9C601'
    - value: 60.53
      color: '#BBC201'
    - value: 62.63
      color: '#AEBE02'
    - value: 64.74
      color: '#A1BB02'
    - value: 66.84
      color: '#93B702'
    - value: 68.95
      color: '#86B303'
    - value: 71.05
      color: '#78B003'
    - value: 73.16
      color: '#6BAC04'
    - value: 75.26
      color: '#5DA804'
    - value: 77.37
      color: '#50A504'
    - value: 79.47
      color: '#43A105'
    - value: 81.58
      color: '#359D05'
    - value: 83.68
      color: '#289A05'
    - value: 85.79
      color: '#1A9606'
    - value: 87.89
      color: '#0D9206'
    - value: 90
      color: '#008F07'
    - value: 92.5
      color: '#00AB08'
    - value: 95
      color: '#00C70A'
    - value: 97.5
      color: '#00E30B'
    - value: 100
      color: '#00FF0D'
  gradient: true
filter:
  include:
    - name: entity_id
      value: '*_battery_level'
    - name: entity_id
      value: '*battery'
  exclude:
    - name: state
      value: 94
      operator: '>'
    - name: entity_id
      value: '*low_battery_level'
    - name: entity_id
      value: '*consumption*'
    - name: entity_id
      value: '*phone_battery*'

yep, it is really odd, but using the battery device_class entities, I cant override the state-colors eitherā€¦

nvm the template I use (you can simply replace that by any valid jinja template )
Iā€™ve also tested some of the other formats for modding the state-badge color

      - type: custom:auto-entities
        card:
          type: glance
          columns: 5
        filter:
          exclude:
            - domain: binary_sensor
            - state: unavailable
          include:
            - attributes: {device_class: battery}
              options:
                card_mod:
                  style: |
                    :host {
                      --paper-item-icon-color:
                        {% set state = states(config.entity)|int(-5) %}
                        {% if state > 90 %} black
                        {% elif state > 70 %} pink
                        {% elif state > 50 %} maroon
                        {% elif state > 30 %} purple
                        {% else %} salmon
                        {% endif %};
                    }
        sort: {method: state, numeric: true}
1 Like

Man, that works! I know I was close, at some point or another!

And my version (based on your template)ā€¦

type: custom:auto-entities
card:
  type: glance
  columns: 3
  theme: airy
  show_name: true
  show_icon: true
  show_state: true
  state_color: false
filter:
  include:
    - entity_id: '*battery'
      options:
        card_mod:
          style: |
            :host {
              --paper-item-icon-color:
                {% set percentage = states(config.entity)|int(0) %}
                {% set r, g, b = 0, 0, 0 %}
                {% if (percentage <= 51) %}
                  {% set r = 255 %}
                  {% set g = (5.0 * percentage) | round | int %}
                {% else %}
                  {% set g = 255 %}
                  {% set r = (505 - 4.89 * percentage) | round | int %}
                {% endif %}
                {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
            }
    - entity_id: '*battery_level'
      options:
        card_mod:
          style: |
            :host {
              --paper-item-icon-color:
                {% set percentage = states(config.entity)|int(0) %}
                {% set r, g, b = 0, 0, 0 %}
                {% if (percentage <= 51) %}
                  {% set r = 255 %}
                  {% set g = (5.0 * percentage) | round | int %}
                {% else %}
                  {% set g = 255 %}
                  {% set r = (505 - 4.89 * percentage) | round | int %}
                {% endif %}
                {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
            }
  exclude:
    - state: unknown
    - entity_id: automation*
    - entity_id: '*low_battery*'
    - entity_id: sensor.my_phone_battery_level
sort:
  method: state
  reverse: false
  numeric: true

Thank you!

2 Likes

you beat me to it on the state_color: false ā€¦

Ive always figured that (false) to be the default, as we need to set it to true normallyā€¦

while weā€™re on the subject of modding this glance cardā€¦ itā€™s the only card in my config I cant get the scroll bar to go all the way to the top:

            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  margin: -8px -16px -16px -16px;
                }
                .entities {
                  height: 500px;
                  overflow-y: scroll;
                }

Ya, that one is a bugger! Iā€™ve had to re-read the docs a few times to get itā€¦

Beats me (at the moment)!
Itā€™s late here (01:40 PST) and Iā€™ve been trying to beat the icon color all day, last night, yesterday, and the day before!!

itā€™s the one exceptionā€¦

while entities:

how confusingā€¦

all the more so, since this is not required when modding an individual entity in a listed configā€¦

btw, we can also use:

--card-mod-icon-color:

I had gone down that road also, and failed!

And I also tried via custom-uiā€¦

  #  customize_glob:
  #    "*.*":
  #      hide_attributes:
  #        - templates
  #
  #    sensor.*_battery_level:
  #      templates:
  #        icon_color: |-
  #          {% set percentage = states(entity) | int %}
  #          {% set r, g, b = 0, 0, 0 %}
  #          {% if (percentage <= 51) %}
  #            {% set r = 255 %}
  #            {% set g = (5.0 * percentage) | round | int %}
  #          {% else %}
  #            {% set g = 255 %}
  #            {% set r = (505 - 4.89 * percentage) | round | int %}
  #          {% endif %}
  #          {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  #  
  #       icon_color: '[[[ var r = 0; var g = 0; var b = 0;  if (state < 50 ) { var r = 255; var g = parseInt(5.1 * state); } else { var g = 255; var r = parseInt(510 - 5.10 * state); } var h = r * 0x10000 + g * 0x100 + b * 0x1; return '#' + ('000000' + h.toString(16)).slice(-6); ]]]'

custom-ui uses javascript and works perfectlyā€¦ (and remember, it also colors the more-info icon)

like this:

      templates: &battery_color
        icon_color: >
          if (state > 75) return 'green';
          if (state > 50) return 'gold';
          if (state > 25) return 'orange';
          if (state > 10) return 'brown';
          return 'red';

weā€™ve updated it recently and more is coming

I am wary to promote it though, but go here if you need some template examples

btw, I did ask the dev team to add more granularity to the current battery-state-color, but no response was given. Currently, the settings are too crude to be useful.

For some reason custom-ui is dragging my system to its knees now to the point of the UI being unresponsive and I have to resort to ssh and undo my change(s) & ha core restart. Latest addition to break itā€¦
image