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

Just copy the path from settings-lovelace-ressources.

1 Like

Hi, running card mod version:
But iā€™m having background issues? Seems style isnt applied?

  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js

the code above fixes the card background issues for Chrome and webbrowsers, but the background is still visible on the companion app? is this a bug in card mod or companion app?

Did you get this answered? I removed mine from the resources as the directions say instead. Just trying to verify that I read them correctly.

Not (yet?). I removed it as well. But Iā€™m not sure if there are disadvantages or gaps. I read the instead as well, but saw the warnings and the re-adding after updating. Because of that my (currently unanswered) double check question to Thomas.

I loaded it in both places as well. Error message if not loaded in resources.

1 Like

Iā€™m having a couple of issues with my badges:
image

The first two arenā€™t supposed to show until they get activated but for some reason theyā€™ve started showing when I load the page. If I edit the config and save they disappear again until I refresh again.

      - entity: binary_sensor.bath_water_leak
        icon: mdi:alert
        style: |
          @keyframes blinker { 50% { opacity: 0; } }
          :host {
            --label-badge-background-color: red;
            animation: blinker 1s linear infinite;
            display: 
              {% if is_state('binary_sensor.bath_water_leak', 'off')  %}
                none;
              {% endif %}
          }
      - entity: binary_sensor.alarm_landing_smoke_detector_smoke
        icon: mdi:alert
        style: |
          @keyframes blinker { 50% { opacity: 0; } }
          :host {
            --label-badge-background-color: red;
            animation: blinker 1s linear infinite;
            display: 
              {% if is_state('binary_sensor.alarm_landing_smoke_detector_smoke', 'off')  %}
                none;
              {% endif %}
          }

The second issue is one Iā€™m just trying to figure out. In the third badge, for some reason when I add an icon to an input_boolean badge it tries to show the state as well. This probably isnā€™t card-mod related but I was wondering if there was some magic to get rid of the text? This one has been bugging me for a while!

Add card_mod keyword.

Iā€™m trying a slightly different spin on this, to show if the fan is running in our relevant zones or not. the state of the icon changes, but Iā€™m not getting a rotating icon. Not sure where Iā€™m going wrong, Iā€™ve read through the docoā€¦

My cards looks like thisā€¦

image

title: Sewing Room
mode: vertical
cards:
  - type: custom:simple-thermostat
    entity: climate.sewing_room_air_conditioner
    step_layout: row
    show_header: false
    name: study
    control: false
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: glance
        entities:
          - entity: switch.sewing_room_zone
            icon: mdi:fan
            tap_action:
              action: toggle
        show_name: false
        show_state: false
        card_mod:
          style:
            div#wrapper: |
              state-badge {
                animation: rotation 0.5s linear infinite
              }
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sewing_room
            name: Temperature
            smoothing: true
            show_fill: true
          - entity: sensor.sewing_target_temp
            name: Target
            smoothing: true
          - entity: switch.sewing_room_zone
            y_axis: secondary
            color: orange
            show_line: false
            show_points: false
            show_legend: false
            aggregate:func: max
            smoothing: false
        hours_to_show: 24
        points_per_hour: 4
        line_width: 2
        font_size: 90
        animate: true
        show:
          name: false
          icon: false
          state: false

Where did you take this example?
Probably from template-entity-row.
You cannot apply styles from one card (history-graph card, for instance) to absolutely different card (glance).
Examples for glance are provided in the corr. post (see the 1st post).
If no animations are provided in the post - do it by yourself like styling an icon.

I got the example from the one you were helping Marius withā€¦ Iā€™ll go back and have a look again - thanks

Thanks but this doesnā€™t seem to make a difference. I think Iā€™m doing it right?

   badges:
      - entity: binary_sensor.bath_water_leak
        icon: mdi:alert
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              --label-badge-background-color: red;
              animation: blinker 1s linear infinite;
              display: 
                {% if is_state('binary_sensor.bath_water_leak', 'off')  %}
                  none;
                {% endif %}
            }

I also tried as per the example and I had to reverse the condition but it still did the same showing after a refesh despite the condition being negative.

      - entity: binary_sensor.bath_water_leak
        icon: mdi:alert
        card_mod:
          style: |
            :host {
              {% if is_state('binary_sensor.bath_water_leak', 'on')  %}
              display: inline-block;
              {% else %}
              display: none;
              {% endif %}
            }

I do not see this ā€œrefreshā€ issue when using as a badge on the viewā€™s top:

title: test-2
path: test-test-2
panel: false
badges:
  - entity: input_boolean.test_boolean
    card_mod:
      style: |
        :host {
          --label-badge-background-color: red;
          animation: blinker 1s linear infinite;
          {% if is_state('input_boolean.test_boolean', 'off')  %}
          display: none;
          {% endif %}
        }
        @keyframes blinker { 50% { opacity: 0; } }
cards: []

I registered this issue:

Would be very grateful if someone simulates the same condition and gives a feedback.

The problem started with 3.1.x.
Do not observe it with 3.0.13.

this is the bit where Iā€™m struggling with the syntaxā€¦ itā€™s a bit beyond me, I can happily change the colour of an icon for a switch, but I canā€™t manage to get them changing colour or animated via stylingā€¦ CSS has never been my strong point, and itā€™s shining through now :frowning:

I can use button-card to achieve a similar outcome, but it loses haptic feedback on Android for the switch toggle, which is a shame

new challenge, trying to make the fold cards fill 100 with the image and background.
the stack I cards show perfectly when used standalone (as I had them up to now) but I want to declutter my frontend and fold these cards in an entities like below. Seems obvious enough, set the margin for the stack to 0px -16px -16px -16px. that does move the entities though, and not the color or the background imageā€¦:

  - type: entities
    title: Met de trein
    card_mod: *header_no_margin
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: Ns
        padding: 0
        entities:

          - type: custom:stack-in-card
            keep:
              background: true
            cards:
              - type: picture
                image: /local/images/ns.jpg
                hold_action:
                  action: url
                  url_path: https://www.ns.nl
              - type: entities
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgb(255,203,0);
                      color: rgb(15,34,132);

                    }
                title: Ns reizen
                show_header_toggle: false
                entities:
                  - sensor.rotterdam_roosendaal
                  - sensor.roosendaal_rotterdam
                  - sensor.tilburg_roosendaal
                  - sensor.roosendaal_tilburg
      - type: custom:fold-entity-row
        an identical card for another railway ;-)

btw, I also tested stack-in-card for the top card, but that is really ugly:

Does anyone know how to change the border radius of the map card?

What did you try before? I think, something basic like this should work

type: map
card_mod:
  style: |
    ha-card { border-radius: 200px; }

for reference: this is the magic setting:

entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: Ns
    padding: 0
    card_mod: &fold
      style: |
        div#items {
          margin: 16px -16px -16px -16px;
        }
    entities:

and also applies to map in a fold:

pretty cool, and freely adapted from earlier discussion with @Ildar_Gabdullin :slight_smile: thanks mate

1 Like

Nice looking))

yes, happy with it, next challenge is luring: widen the markdown (see the mod-card that works, but card-mod says I am doing it wrongā€¦

#  - type: custom:mod-card
#    card_mod:
#      style: |
#        ha-card {
#          margin: -8px -16px -16px -16px;
#        }
#    card:
  - type: custom:hui-element
    card_type: markdown
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
        }
        .card-content {
          margin: -8px -16px -16px -16px;
        }
    content: >

this should be the easiest:

  - type: custom:hui-element
    card_type: markdown
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px -16px -16px;
        }

but often makes the card go beyond its bordersā€¦