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

And the “rotated icon” is not the same as the “rotating icon”.
I am talking about helper classes

yes, so was I?

flipping the icon is easy in Lovelace, but not possible in custom-ui javascript using the helper class (as far as I have been able to establish)

Schermafbeelding 2021-03-12 om 09.27.54

thanks!

You were right, multiple entity row is able of doing this in a simpler way
worked out like this:

  - type: 'custom:multiple-entity-row'
    entities:
      - entity: switch.sonoff_10xxxe2
        toggle: true
        icon: 'mdi:coach-lamp'
        name: false
        state_color: true
        tap_action:
          action: toggle
        styles:
          width: 40px
          text-align: center
      - entity: switch.sonoff_10xxxx2
        toggle: true
        icon: 'mdi:globe-light'
        name: false
        state_color: true
        tap_action:
          action: toggle
        styles:
          transform: rotate(180deg)
          width: 40px
          text-align: center
    entity: switch.sonoff_10xxxx3
    toggle: true
    icon: 'mdi:grass'
    name: Frente
    show_state: false

Note that “multiple-entity-row::styles” can be used to rotate only a “secondary” entity’s icon, not a “primary” one.

1 Like

Hello,
card-mod stopped working for me a few weeks ago, when I updated from the 2.x release to 3.x
The logs give the following error:
ERROR (MainThread) [frontend.js.latest.202103026] https://smarthome.viknyaos.com:8321/hacsfiles/lovelace-card-mod/card-mod.js:1:1 Uncaught SyntaxError: Identifier 's' has already been declared
Fold-entity row and Lovelace swipe navigation also give the same error, subsitution “identifier ‘s’” as another single letter. (n, l, etc.)
Refreshing the page a dozen or so times will eventually lead to everything working, but then fail the next dozen times the page is loaded. So it’s not a consistent bug.
HomeAssistant version 2021.3.3
Side by side image below:


And my lovelace config:

background: center / cover no-repeat url("/local/background-15.gif") fixed
#swipe_nav:
#wrap: false
#animate: swipe
#prevent_default: true
#swipe_amount: 20
style: &disarmedStatusStyle |
  ha-card {
    background-color: rgba(0,255,0,1);
    background-image: url("/local/cardbackK.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 20pt;
    text-align: center;
  }
style: &armedStatusStyle |
  ha-card {
    background-color: rgba(255,0,0,1);
    background-image: url("/local/cardbackK.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 20pt;
    text-align: center
  }
style: &windowDoorOpenStatusStyle_auto-entities |
  ha-card {
    background-color: rgba(255,255,0,1);
    background-image: url("/local/cardbackK.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .card-header {
    font-size: 20pt;
    text-align: center;
  }
style: &cardStyle |
  ha-card {
    background-image: url("/local/cardbackK.png");
    border: solid 2px rgba(100,100,100,0.3);
    background-color: rgba(50,50,50,0.3);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 3px 3px rgba(0,0,0,0.4);
    color: #999999;
  }
decluttering_templates:
  scene-button:
    card:
      type: custom:button-card
      label: '[[label]]'
      lock:
        enabled: true
        unlock: hold
      show_label: true
      show_entity_picture: true
      entity_picture: '[[entity_picture]]'
      aspect_ratio: 1/1
      color_type: card
      color: rgba(50, 50, 50, 0)
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.movie_mode
          option: '[[option]]'
      styles:
        entity_picture:
          - border-radius: 50%
          - height: 100%
          - width: 75%
        label:
          - font-size: 14x
        card:
          - box-shadow: none
      state:
        - operator: template
          value: >
            [[[
            return states['input_select.movie_mode'].state == '[[option]]'
            ]]]
          color: '#ffffcc'
          styles:
            label:
              - color: '#000000'
  light_button_toggle:
    card:
      type: entity-button
      style: *cardStyle
      entity: '[[entity]]'
      tap_action:
        action: toggle
  light_button_more_info:
    card:
      type: entity-button
      style: *cardStyle
      entity: '[[entity]]'
      tap_action:
        action: more-info
  aux_sensor_card_vertical:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      icon: 'mdi:[[icon]]'
      show_state: true
      show_name: false
      #show_icon: true
      layout: icon_state
      tap_action:
        action: more-info
      styles:
        state:
          - font-size: 20px
          - color: '#999999'
        card:
          - padding: 0px 0px 0px 0px
      style: |
        ha-card {
          background-color: rgba(50, 50, 50, 0);
          box-shadow: 0px 0px;
        }
  temp_humidity_stack:
    card:
      type: entities
      show_header_toggle: false
      title: '[[title]]'
      style: |
        ha-card {
          background-image: url("/local/cardbackK.png");
          border: solid 2px rgba(100,100,100,0.3);
          background-color: rgba(50,50,50,0.3);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          box-shadow: 3px 3px rgba(0,0,0,0.4);
          color: #999999;
          padding: 0px 0px 0px 0px;
        }
        .card-header {
          padding: 16px 16px 8px 16px;
        }
      entities:
        - type: custom:hui-vertical-stack-card
          cards:
            - type: custom:decluttering-card
              template: aux_sensor_card_vertical
              variables:
                - entity: '[[temperature]]'
                - icon: thermometer
            - type: custom:decluttering-card
              template: aux_sensor_card_vertical
              variables:
                - entity: '[[humidity]]'
                - icon: water-percent
  alarm_sensor_status:
    card:
      type: custom:auto-entities
      show_empty: false
      card:
        type: glance
        title: "Alarm Sensors Detected:"
        columns: 3
        show_state: false
        style: *windowDoorOpenStatusStyle_auto-entities
      filter:
        include:
          - group: group.zigbee_alarm_sensors
            state: "on"
            options:
              tap_action:
                action: navigate
                navigation_path: /lovelace/security/
          - entity_id: binary_sensor.*z*
            state: "on"
            options:
              tap_action:
                action: navigate
                navigation_path: /lovelace/security/
          - entity_id: binary_sensor.refrigerator_door
            state: "on"
  alarm_status:
    card: 
      type: horizontal-stack
      cards: 
         - type: conditional
           conditions:
             - entity: alarm_control_panel.home
               state: "disarmed"
           card:
             type: markdown
             title:
             content: System Disarmed
             style: *disarmedStatusStyle
         - type: conditional
           conditions:
             - entity: alarm_control_panel.home
               state: "armed_away"
           card:
             type: markdown
             title:
             content: System Armed
             style: *armedStatusStyle

views:
  - title: Home
    path: default_view
    icon: mdi:home
    badges: []
    cards:
      - type: custom:decluttering-card
        template: alarm_status
      - type: custom:decluttering-card
        template: alarm_sensor_status
      - type: horizontal-stack
        cards:
          - card: null
            entities:
              - entity: device_tracker.nicholas_phone_ping
              - entity: device_tracker.pixel_3_xl
            entity: group.nicholas_device_tracker
            image: /local/njpic.png
            state_filter:
              not_home: grayscale(90%) blur(2px)
            title: Nicholas
            type: picture-glance
            style: *cardStyle
          - card: null
            entities:
              - entity: device_tracker.lesley_phone_ping
              - entity: device_tracker.samsung_sm_g955u
            entity: group.lesley_device_tracker
            image: /local/lbpic.png
            state_filter:
              not_home: grayscale(90%) blur(2px)
            title: Lesley
            type: picture-glance
            style: *cardStyle
      - type: weather-forecast
        entity: weather.dark_sky
        name: Home
        style: *cardStyle
        show_forecast: false
      - type: entities
        style: *cardStyle
        show_header_toggle: false
        title: Volume
        entities:
          - type: 'custom:slider-entity-row'
            entity: media_player.living_room_speaker
          - type: 'custom:slider-entity-row'
            entity: media_player.kitchen_speaker
      - type: entities
        style: *cardStyle
        show_header_toggle: false
        entities:
          #- switch.nursery_humidifier
          #- type: divider
          - switch.bedroom_fan
          - switch.nursery_humidifier_switch
          - input_boolean.night_mode
          - input_boolean.alarm_clock
          - type: custom:time-picker-card
            style: | 
              ha-card {
                background-color: rgba(50,50,50,0.0);
                color: #999999;
              }
            entity: input_datetime.wakeup_time
            layout:
              embedded: true
              name: inside
              align_controls: right
          - type: custom:fold-entity-row
            head:
              type: section
              label: Night Mode Options
            entities:
              - input_boolean.night_mode_nicholas_lamp
              - input_boolean.night_mode_lesley_lamp
              - input_boolean.night_mode_fan
              - input_number.fan_delay
              #- input_boolean.night_mode_tv_news
              - input_boolean.night_mode_radio_news
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.lesley_lamp
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.nicholas_lamp
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.back_porch
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.square_standing_lamp_light
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.window_lamp
                #- type: custom:decluttering-card
                #$template: light_button_toggle
                #variables:
                #- entity: light.front_porch
          - type: custom:gap-card
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.laundry_room_light
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.kitchen_lights
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.coffee_table
      - type: horizontal-stack
        cards:
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.mantle
          - type: custom:gap-card
          - type: custom:decluttering-card
            template: light_button_toggle
            variables:
              - entity: light.nursery_lamp
      - type: entities
        title: Color Scenes
        show_header_toggle: false
        style: *cardStyle
        entities:
          - type: custom:hui-vertical-stack-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:decluttering-card
                    template: scene-button
                    show_entity_picture: false
                    variables:
                      - label: Reset
                      - option: Normal
                      - entity_picture: /local/scenes/off.jpg
                  - type: custom:decluttering-card
                    template: scene-button
                    variables:
                      - label: Watermelon
                      - entity_picture: /local/scenes/watermelon.gif
                      - option: Watermelon
                  - type: custom:decluttering-card
                    template: scene-button
                    variables:
                      - label: Blue & Red
                      - option: "Blue & Red"
                      - entity_picture: /local/scenes/blue_red.jpg
                  - type: custom:decluttering-card
                    template: scene-button
                    variables:
                      - label: Arctic
                      - option: Arctic
                      - entity_picture: /local/scenes/arctic.jpg
  - title: Security
    path: security
    icon: mdi:shield-home
    badges: []
    cards:
      - type: custom:decluttering-card
        template: alarm_status
      - type: entities
        title: Actions
        show_header_toggle: false
        style: *cardStyle
        entities:
          - type: call-service
            action_name: Disarm/Clear Alarm
            icon: mdi:home
            name: Disarm/Clear Alarm
            service: alarm_control_panel.alarm_disarm
            service_data:
              entity_id: alarm_control_panel.home
          - type: call-service
            action_name: Arm Away
            icon: mdi:security
            name: Arm Away
            service: script.turn_on
            service_data:
              entity_id: script.arm_away
      - type: custom:logbook-card
        entity: alarm_control_panel.home
        title: Alarm History
        style: *cardStyle
        max_items: 4
        state_map:
          - label: Armed
            value: armed_away
          - label: Disarmed
            value: disarmed
        show:
          duration: false
          end_date: false
      - type: vertical-stack
        cards:
          - type: custom:auto-entities
            card:
              type: entities
              title: Alarm Sensors - ON
              style: *cardStyle
              show_header_toggle: false
              #secondary_info: last-changed
            filter:
              include:
                - group: group.zigbee_alarm_sensors
                  state: "on"
                - entity_id: binary_sensor.*z*
                  state: "on"
          - type: custom:auto-entities
            card:
              type: entities
              title: Alarm Sensors - OFF
              style: *cardStyle
              show_header_toggle: false
            filter:
              include:
                - group: group.zigbee_alarm_sensors
                  state: "off"
                - entity_id: binary_sensor.*z*
                  state: "off"
      - type: entities
        title: Status
        show_header_toggle: false
        style: *cardStyle
        entities:
          - sensor.home_keypad
          - type: call-service
            action_name: "* Key"
            icon: mdi:security
            name: "* Key"
            service: envisalink.alarm_keypress
            service_data:
              entity_id: alarm_control_panel.home
              keypress: "*"
          - sensor.ac_on_off
          - sensor.battery_good_bad
          - sensor.alarm_panel_trouble
  - title: Cameras
    path: cameras
    badges: []
    icon: mdi:camera
    cards:
      - type: vertical-stack
        cards:
          - type: picture-entity
            camera_view: live
            entity: camera.back_yard
            show_state: false
            show_name: false
          - type: picture-entity
            camera_view: live
            entity: camera.front_yard
            show_state: false
            show_name: false
          - type: picture-entity
            camera_view: live
            entity: camera.nursery
            show_state: false
            show_name: false
          - type: picture-entity
            camera_view: live
            entity: camera.kennel
            show_state: false
            show_name: false
  - title: Garden
    path: garden
    badges: []
    icon: mdi:fruit-cherries
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mini-graph-card
            style: *cardStyle
            entities:
              - sensor.greenhouse_therm_temperature
            show:
              extrema: true
            hours_to_show: 72
            points_per_hour: 1
            decimals: 1
          - type: custom:mini-graph-card
            style: *cardStyle
            entities:
              - sensor.greenhouse_therm_humidity
            show:
              extrema: true
            hours_to_show: 72
            points_per_hour: 1
            decimals: 0
      - type: horizontal-stack
        cards:
          - type: custom:mini-graph-card
            style: *cardStyle
            entities:
              - sensor.dark_sky_temperature
            show:
              extrema: true
            hours_to_show: 72
            points_per_hour: 1
            decimals: 1
          - type: custom:mini-graph-card
            style: *cardStyle
            entities:
              - sensor.dark_sky_humidity
            show:
              extrema: true
            hours_to_show: 72
            points_per_hour: 1
            decimals: 0
      - type: picture-entity
        camera_view: live
        entity: camera.garden_cam
        show_state: false
        show_name: false

Which version?

The latest in HACS, 3.0.9

You should raise an issue.

as in, on github?

Yes, make an issue there.

Change the resource type from js to module.

One more reason to use card-mod - struggling with a clipped tooltip for "history-graph" card:


The problem appears when the "history-graph" card is placed inside "custom:stack-in-card".

A possible reason of this clipping - CSS style "overflow: hidden" used for "custom:stack-in-card".
How to solve:

type: 'custom:stack-in-card'
style: |
  ha-card {
    overflow: visible !important;
  }
cards:
  - type: history-graph
    title: tooltip + stack-in-card
    entities:
      - sun.sun
    hours_to_show: 6
    refresh_interval: 0

More examples are described here.

I’m trying to make the word “Fan” not appear but I would like to still be able to adjust the distance between the fan icon and the buttons. Nothing I try seems to affect it. There is an “Off” button that is not shown.

I would also like to adjust the fan icon up a little to make it even with the buttons. I adjusted the size of the icon but I can’t move it.

Is anyone else having an issue with card-mod changes not being displayed in fully kiosk browser? Everything else appears and works but none of these changes show up. I cleared fully kiosk’s cache but that didn’t solve the issue.

The fan icon is not going to stay red. I was just testing. Eventually, I would like to have the icon rotate at different speeds depending on which button was pressed.

image

              - type: entities
                show_header_toggle: false
                card_mod:
                  style:
                    '#states div':
                      fan-control-entity-row$:
                        hui-generic-entity-row$:
                          state-badge$:
                            ha-icon$: |
                              ha-svg-icon {
                                width: 48px;
                                height: 48px;
                                margin-bottom: 5px;
                               }
                            .: |
                              ha-icon { color: #fa051e; }
                        .: |
                          button.speed {
                            min-width: 48px;
                            height: 36px;
                            font-size: 14px !important;
                           }
                          .info {
                            display: none;
                           }
                entities:
                  - entity: fan.master_bedroom_fan
                    name: Fan
                    type: 'custom:fan-control-entity-row'

I have also tried changing the name and with/without !important:

                           }
                          info.pointer.text-content {
                            margin-left: 30px !important;
                           }

and

                          '#info.pointer.text-content div' {
                            margin-left: 30px !important;
                           }

Any help is greatly appreciated.

hello, I would like to apply the css style to ha-icon and set the style to “display: inline;” to a ha-icon because the icon is bigger then the element state-badge when i landscape the iphone. i have try so many way but still fail. please somebody help me out.

  floor_plan_button10:
    element:
      entity: '[[entity_1]]'
      style:
        '#root > hui-conditional-element > decluttering-card':
          $: |
            "#declutter-child": 
              $: |
                "s#tate-badge":
                  $: |
                    ha-icon {
                      display: inline;
                    }
        '#state-badge':
          $: |
            ha-icon {
              display: inline;
            }
        height: 4vw
        width: 4vw
        max-width: 4vw
        max-height: 4vw
        display: inline-flex
        align-self: start
        text-align: start
        margin-right: 0px
        '--mdc-icon-size': 90%
        transform-origin: left
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: 'rgba(255, 255, 255, 0.4)'
        border-radius: 40%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        justify-content: center
        left: 44%
        top: 35%
        position: absolute
      tap_action:
        action: toggle
      hold_action:
        action: fire-dom-event
        haptic: success
        browser_mod:
          command: call-service
          service: script.general_button_card_detail_popup
          service_data:
            deviceID: this
            entity_1: input_boolean.ceiling_light
      text-align: center
      type: state-icon
      card_mod:
        style: |
          "#root > hui-conditional-element > decluttering-card":
            $: |
              "#declutter-child": 
                $: |
                  state-badge > ha-icon {display: inline;}

          "#state-badge":
            $: |
              ha-icon {
                display: inline;
              }


num2

Why are you replying to that person?

Try playing around with position: relative.

Thank you KTibow. I was able to get the fan icon to move upwards using position: relative.

Do you happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything.

info.pointer.text-content

Has anyone else had an issue with mod-card changes not appearing in the fully kiosk browser? In the Fully Kiosk browser it looks like I didn’t do anything.

Edit; I found the solution to mod-card changes not showing. I use a Fire HD 10 to display Home Assistant lovelace. Once I updated the Fire OS from 7.3.1.2 to 7.3.1.8 I was able see the changes.

Hello, is it possible to color this image according to the stats?

Sans titre

                - attribute: BMI
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/b_m_i.webp
                  name: IMC
                  style:
                    hui-image:
                      $: |
                        #image {
                          {% set imc = state_attr('bodymiscale.aurelien', 'BMI') | float %}
                          {% if 0 < imc < 18.4 %}color: blue;
                          {% elif 18.5 <= imc <= 25 %}color: green;
                          {% elif 25.1 <= imc <= 28 %}color: yelow;
                          {% elif 28.1 <= imc <= 32 %}color: orange;
                          {% else %}color: red;
                          {% endif %}
                        }
                  type: attribute

What do you see if you enter it into the template tab of HA devtools?

That’s an image. It doesn’t have a color attribute. Check out the css property filter, but remember that if you rotate around the color wheel starting from black, you’ll always end up at black.