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

Share your Projects! Dashboards & Frontend
691

Hi

Can someone help with a card-mod config for styling the element chartHeader and/or chartTitle for the history-graph. I have spent hours but I simple don’t get it :sob:

This is the JS path:

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view").shadowRoot.querySelector("#columns > div:nth-child(3) > hui-history-graph-card").shadowRoot.querySelector("ha-card > div > state-history-charts").shadowRoot.querySelector("state-history-chart-line").shadowRoot.querySelector("#chart").shadowRoot.querySelector("div.chartHeader > div.chartTitle")
692

Hi @thomasloven
Can Card-mod or anything else be used to position your badge card in to the top right corner of a card in line with the heading?
Also many thanks for the badge card, I’ve been hoping for this for a long time. The above would really be a dream layout for me.

Cheers,

Linton

693

Anyone figure out how to make all fan icons spin when active? I think this example can be super useful as it will allow to also change colors of icons globally based on state without the need for “Custom UI” add-on that’s on its last leg :slight_smile:

1 Like
694

For the color change, i have this in my button template:

    state: &button_state
      - value: 'on'
        styles:
          card: [background-color: 'rgba(79, 79, 79, 0.4)', box-shadow: '0px 0px 10px 1px var(--button-card-light-color-no-temperature)']

Its only the shadow that changes the color on state, but for me, ist right.

color
color1242×712 74.6 KB

and for the spinning fan icon i use animate SVG (have it form Mattias_Persson)

8 Likes
695

Thats pretty great looking, your css only shows a change in background color and addition of box shadow. Did you have to add that css to each button separately or you can do it globally? Also where can i see the animation example for the fan? Did you have to use keyframes?

696

Its set on a Button-Card Template, you have to set it one time and use “template: xxx” in the butten config.:

  light:
    aspect_ratio: 1/1
    show_state: false
    show_icon: false
    state: &button_state
      - value: 'on'
        styles:
          card: [background-color: 'rgba(79, 79, 79, 0.4)', box-shadow: '0px 0px 10px 1px var(--button-card-light-color-no-temperature)']
          name: [color: 'rgba(255, 255, 255, 0.6)']
          state: [color: 'rgba(0, 0, 0, 0.6)']
    custom_fields:
      info: >
        [[[ if (entity.state === 'on' && entity.attributes.brightness) {
        const brightness = Math.round(entity.attributes.brightness / 2.54);
        const radius = 14.5; const circumference = radius * 2 * Math.PI; 
        return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
        transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
        <text x="50%" y="54%" fill="#8d8e90" font-size="10" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="7">%</tspan></text></svg>`; } ]]]
    styles:
      name: &button_styles_name
        [top: 68.7%, left: 6%, position: absolute, line-height: 2vw]
      state: &button_styles_state
        [top: 74%, left: 11%, position: absolute, line-height: 2vw]
      custom_fields:
        info: &circle_pos
          [top: 38.5%, left: 62.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
      card: &button_styles_card
        [font-family: Sf Display, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.54vw, 
        background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw,]

      action: toggle
      haptic: light
    hold_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: '[[[ return entity.attributes.friendly_name ]]]'
        deviceID: this
        card:
          type: entities
          entities:
            - type: custom:light-popup-card
              entity: '[[[ return entity.entity_id ]]]'
              icon: none
              fullscreen: false
              brightnessWidth: 130px
              brightnessHeight: 360px
              borderRadius: 1.7em
              sliderColor: '#c7c7c7'
              sliderTrackColor: rgba(25, 25, 25, 0.9)
              actionSize: 4.5em
              actionsInARow: 2
              style: |
                #popup {
                  margin: -2.4em 0 1.4em 0; }
                #popup > div.range-holder > input[type=range] {
                  cursor: grab; }
                #brightnessValue {
                  color: rgba(255, 255, 255, 0.8); margin: -1em 0 0 0; font-size: 2em; font-weight: 400; 
                  position: absolute; z-index: 100; font-family: SF Display; letter-spacing: 0.02em; pointer-events: none; 
                  mix-blend-mode: difference; text-align:center; width: 3.4em; height: 3.4em; }
                #popup > div.range-holder > input[type=range]::-webkit-slider-thumb {
                  border: 0; eight: 0; width: 0; cursor: grabbing; }
                #popup > div.action-holder > div > div {
                  margin: 0.8em 0.5em -0.8em 0.5em; }
                #popup > div.action-holder > div:nth-child(2) > div:nth-child(2) > span {
                  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%), 
                  conic-gradient(rgb(120,39,230), rgb(230,34,231), rgb(228,5,136), rgb(228,25,25), rgb(229,105,30), rgb(232,226,46), 
                  rgb(125,230,41), rgb(52,232,40), rgb(51,231,92), rgb(52,232,224),rgb(32,125,229), rgb(18,39,229), rgb(120,39,230));
                  border-width: 2px; border-color: #e6e6e6; --size: 4.4em !important; }
              actions:
                - service: light.turn_on
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                    color_temp: 153
                  color: "#d8d9e1"
                - service: light.turn_on
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                    color_temp: 326
                  color: "#d5b08d"
                - service: light.turn_on
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                    color_temp: 500
                  color: "#ce944b"
                - service: browser_mod.popup
                  service_data:
                    title: '[[[ return entity.attributes.friendly_name ]]]'
                    deviceID: this
                    card:
                      type: entities
                      show_header_toggle: false
                      entities:
                        - entity: '[[[ return entity.entity_id ]]]'
                          secondary_info: last-changed
                        - type: custom:light-entity-card
                          entity: '[[[ return entity.entity_id ]]]'
                          brightness: false
                          color_temp: true
                          full_width_sliders: true
                          hide_header: true
                          show_slider_percent: true
                          smooth_color_wheel: true

and this is the button:

          - type: custom:button-card
            entity: light.pc
            style:
              top: 42%
              left: 70%
              width: 8%
            custom_fields:
              icon_bad: >
                <svg viewBox="0 0 35.02 31.02">
                <path style="clip-path: url(#mask);" fill="#9da0a2" <path d="M14.34,6.69c-.15,0-.25-.09-.31-.32h.58C14.57,6.6,14.48,6.69,14.34,6.69Zm-1.4-1a1.84,1.84,0,0,1,1.28-1.8c.9-.08,1.49,1,1.49,1.8Zm8.88,1c-.15,0-.25-.09-.31-.32h.58C22.05,6.6,22,6.69,21.82,6.69Zm-1.4-1a1.84,1.84,0,0,1,1.29-1.8c.9-.08,1.45,1,1.48,1.83ZM15,3.39c-.13-.07-.28-.12-.42-.18H14c-.84.21-1.51,1.38-1.53,2.7,0,.33.07.45.28.45h.72c.07,0,.1,0,.12.14.1.53.39.86.73.86s.63-.33.73-.87c0-.11.06-.14.12-.13h.72c.21,0,.28-.13.28-.43A3.06,3.06,0,0,0,15,3.39Zm7.48,0a1.56,1.56,0,0,0-.33-.14h-.67A2.77,2.77,0,0,0,20,6c0,.33.06.45.27.45H21c.07,0,.09,0,.12.14.1.53.39.86.73.86s.62-.33.73-.87c0-.11,0-.14.12-.13h.72c.21,0,.28-.13.28-.43a3.07,3.07,0,0,0-1.21-2.58Zm-.89,0H22V.05h-.49Zm-7.48,0h.5V0h-.5ZM2,17.25h.72c.19,0,.22,0,.22.23a2.09,2.09,0,0,0,0,.26h.91a1.82,1.82,0,0,0-.11-.28s-.07-.06-.11-.07a.51.51,0,1,1,0-1h0v0c.08-.5,0-.44.53-.44H5.37c.18,0,.21,0,.24.22a2.8,2.8,0,0,1-.2,1.61H9.23l.22-1H9.24c-.79,0-1.58,0-2.38,0A.67.67,0,0,1,6.15,16c0-1.72,0-3.44,0-5.17a.62.62,0,0,1,.68-.68h7.81a.62.62,0,0,1,.65.66v5.25a.61.61,0,0,1-.65.64H12l.22,1h3.4c.24,0,.26,0,.26.27v.73c0,.2,0,.22-.22.23H14.6v3.94c0,.1,0,.25-.13.25s-.13-.14-.13-.25V19h-.55v1.06c0,1,0,2,0,2.95,0,.09,0,.17-.13.17s-.14-.09-.14-.18c0-.46,0-.92,0-1.38V20.29H2.37c0,.06,0,.12,0,.18v2.45a.27.27,0,0,1,0,.16.19.19,0,0,1-.11.09.2.2,0,0,1-.12-.1.37.37,0,0,1,0-.15V19H1.54V22.9c0,.05,0,.11,0,.15s-.09.12-.13.12-.1-.07-.12-.12a.53.53,0,0,1,0-.18V19c-.36,0-.71,0-1,0S0,19,0,18.75s0-.53,0-.79.06-.22.21-.21H.77v-.26c0-.22,0-.24.23-.24h.69V17c0-1.41,0-2.82,0-4.23a.3.3,0,0,1,.2-.32L3,11.91s.07-.06.1-.05a.65.65,0,0,1,.19,0c0,.06,0,.15-.08.18a7.56,7.56,0,0,1-.89.47.55.55,0,0,0-.37.61c0,1.3,0,2.6,0,3.9Zm12.47-2.19c0-.21,0-.41,0-.6s0-.2.14-.19.13.09.12.19v.6H15V10.85c0-.33-.1-.43-.43-.43H6.85c-.34,0-.44.09-.44.43v4.21ZM.27,18.7H15.61V18H.27ZM15,15.34H6.41V16c0,.36.08.44.44.44h6c.63,0,1.25,0,1.88,0,.22,0,.34-.1.35-.3ZM5.91,20V19H2.37v1Zm3.81-1H6.19v1H9.72ZM10,20h3.52V19H10ZM9.5,17.74H12c-.07-.32-.13-.63-.2-.93a.16.16,0,0,0-.12-.09H9.82a.16.16,0,0,0-.12.09C9.63,17.11,9.57,17.42,9.5,17.74ZM5.35,16.16H3.94s-.09.06-.1.1a2.38,2.38,0,0,0,.21,1.39.29.29,0,0,0,.15.09H5a.17.17,0,0,0,.13-.07A2.4,2.4,0,0,0,5.35,16.16ZM2.62,17.52H1v.22H2.62Zm.93-.87c-.21,0-.28.11-.25.3s.13.2.29.16Zm-1.1-3.58a.63.63,0,0,1,.33-.57l1.41-.69a.54.54,0,0,1,.69.2c.08.14.14.29.22.43a.14.14,0,0,1-.07.2l-2.12,1a.17.17,0,0,1-.17,0C2.63,13.45,2.53,13.23,2.45,13.07Zm2.37-.61-.14-.28c-.1-.19-.19-.22-.38-.13l-1.21.59c-.46.21-.46.27-.21.73,0,0,0,0,0,0ZM5,14.88c0-.06-.12-.14-.18-.14s-.12.1-.07.2a.18.18,0,0,1,0,.12.42.42,0,0,0,0,.49.21.21,0,0,0,.18,0,.22.22,0,0,0,0-.16.21.21,0,0,1,0-.29S5,15,5,15,5,14.9,5,14.88Zm-.77.68a.2.2,0,0,0,.17,0,.17.17,0,0,0,0-.15.23.23,0,0,1,0-.27s0-.15,0-.16a.19.19,0,0,0-.18,0,1.27,1.27,0,0,0-.11.26A2.21,2.21,0,0,0,4.25,15.56Zm10.43-3.65c0-.1,0-.2-.13-.2s-.13.1-.13.19c0,.64,0,1.27,0,1.91,0,.1,0,.2.13.2s.13-.11.13-.21V11.91Zm-6.09.65-.26-.27-1-1a.33.33,0,0,0-.17-.07s-.09.07-.09.1a.35.35,0,0,0,.08.16L8.37,12.7s.06.07.1.08a.13.13,0,0,0,.18-.13A.35.35,0,0,0,8.59,12.56Zm0,.89-.83-.82a.2.2,0,0,0-.15,0,.17.17,0,0,0,0,.17c.26.28.54.55.81.81a.15.15,0,0,0,.13,0s.06-.07.09-.1S8.65,13.47,8.63,13.45Zm2.09-2.54a1.93,1.93,0,0,0,.34,0s.1-.08.15-.13-.09-.11-.14-.12h-.69c-.05,0-.09.08-.14.13s.09.11.14.12a1.93,1.93,0,0,0,.34,0ZM8.87,13.12a3.49,3.49,0,0,0,.43.43.16.16,0,0,0,.15,0s.06-.12,0-.14L9,12.94H9C8.88,12.93,8.8,13,8.87,13.12Zm1.72,2.75a.22.22,0,0,0,.14.14s.12-.08.13-.12-.07-.1-.13-.19C10.66,15.78,10.58,15.84,10.59,15.87ZM4.28,19.65a.93.93,0,0,0,.15-.13s-.09-.11-.14-.12a.86.86,0,0,0-.32,0c-.05,0-.1.08-.14.12a.93.93,0,0,0,.15.13s.09,0,.14,0S4.24,19.67,4.28,19.65Zm3.83,0a.25.25,0,0,0,.12-.13s-.07-.11-.12-.12a1,1,0,0,0-.35,0,.18.18,0,0,0-.11.13.23.23,0,0,0,.12.12s.11,0,.16,0A.54.54,0,0,0,8.11,19.65Zm3.64-.25a.48.48,0,0,0-.17,0c-.05,0-.12.08-.12.12a.18.18,0,0,0,.12.13,2.16,2.16,0,0,0,.36,0,.16.16,0,0,0,.11-.12.2.2,0,0,0-.11-.13.6.6,0,0,0-.19,0Z"/></clipPath></defs><path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14,6.41h.58a.3.3,0,0,1-.27.32C14.2,6.74,14.09,6.69,14,6.41Zm.19-2.52a1.84,1.84,0,0,0-1.28,1.8h2.77C15.71,4.92,15.12,3.81,14.22,3.89Zm7.49,0a1.84,1.84,0,0,0-1.29,1.8h2.76C23.15,4.92,22.6,3.81,21.71,3.89Zm.11,2.8c.13,0,.23-.13.27-.32h-.58C21.57,6.69,21.71,6.74,21.82,6.69Zm-7.4,8.37h-8V10.85c0-.34.1-.43.44-.43h7.76c.33,0,.43.1.43.43v4.21h-.36v-.6c0-.1,0-.19-.12-.19s-.14.09-.14.19S14.42,14.85,14.42,15.06Zm.26-2.2v-.95c0-.1,0-.2-.13-.2s-.13.1-.13.19c0,.64,0,1.27,0,1.91,0,.1,0,.2.13.2s.13-.11.13-.21Zm-6-.21a.35.35,0,0,0-.06-.09l-.26-.27-1-1a.33.33,0,0,0-.17-.07s-.09.07-.09.1a.35.35,0,0,0,.08.16L8.37,12.7s.06.07.1.08A.13.13,0,0,0,8.65,12.65Zm0,.89s0-.07,0-.09l-.83-.82a.2.2,0,0,0-.15,0,.17.17,0,0,0,0,.17c.26.28.54.55.81.81a.15.15,0,0,0,.13,0S8.64,13.57,8.67,13.54Zm2.05-2.63h0a1.93,1.93,0,0,0,.34,0s.1-.08.15-.13-.09-.11-.14-.12h-.69c-.05,0-.09.08-.14.13s.09.11.14.12A1.93,1.93,0,0,0,10.72,10.91ZM9,12.93c-.1,0-.18.11-.11.19a3.49,3.49,0,0,0,.43.43.16.16,0,0,0,.15,0s.06-.12,0-.14L9,12.94Zm-4.3-.75c-.1-.19-.19-.22-.38-.13l-1.21.59c-.46.21-.46.27-.21.73,0,0,0,0,0,0l1.91-.94Z"/></svg>
            styles:
              custom_fields:
                icon_bad:
                 [top: 0%, left: 2%, width: 100%, position: absolute]
            template: light

The Animation you can see here, this is my button-card for the pool heater (Heizung), there is a animated svg with spinning and color changing fan. its made with a custom field:

          - type: custom:button-card
            entity: switch.sonoff_1000851ce1
            name: Heizung
            tap_action:
              action: call-service
              service: switch.toggle
              service_data:
                entity_id: switch.sonoff_1000851ce1
            hold_action:
              action: more-info
            style:
              top: 78.35%
              left: 53.0%
              width: 8%
            custom_fields:
              air_propeller: >
                [[[ const path = '<circle cx="25" cy="25" r="6.6"/> <path d="M31.9 30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>';
                const style = '<svg viewBox="0 0 50 50"> <style>@keyframes rotate{0%{visibility: visible; transform: rotate(0deg);}100%{transform: rotate(1080deg);}}.start{animation: rotate 2.8s ease-in; transform-origin: center; fill: #f74608; visibility: hidden;}.on{animation: rotate 1.8s linear infinite; transform-origin: center; fill: #f74608; animation-delay: 2.8s; visibility: hidden;}.end{animation: rotate 2.8s; transform-origin: center; fill: #9ca2a5; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);}</style>';
                if (entity.state === 'on') { return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`; }
                else { return `${style}<g class="end">${path}</g></svg>`; } ]]]
              air: >
                <svg viewBox="0 0 340.32 263.79">
                <path style="clip-path: url(#mask);" fill="#9da0a2" d="M181.07.09H288.25c9.24,0,18.5-.33,27.71.24s16.1,5.39,20.76,13.42a28,28,0,0,1,3.57,14.51q0,64.08,0,128.16c0,21.05-.15,42.1,0,63.14a27.35,27.35,0,0,1-27.62,27.57c-36.91-.18-73.81-.06-110.72-.06q-75.78,0-151.55,0a50.71,50.71,0,0,1-50-43.74A46.38,46.38,0,0,1,0,197Q0,145.84,0,94.7,0,72.79,0,50.87A50.62,50.62,0,0,1,43.59.61a51.93,51.93,0,0,1,7.27-.5q53.31,0,106.62,0h23.59Zm0,9.74H148.08Q103,9.83,58,9.84a100.19,100.19,0,0,0-12.14.31,40.94,40.94,0,0,0-36.05,41q0,26.79,0,53.58,0,45.15,0,90.3c0,1.87.1,3.75.28,5.61a40.93,40.93,0,0,0,30.83,35.53c6.28,1.56,12.64,1.2,19,1.2q69.5,0,139,0,56.85,0,113.7,0a20.13,20.13,0,0,0,4.46-.41,17,17,0,0,0,13.5-17.06q0-37.09,0-74.18V55.93c0-9.43,0-18.86,0-28.29a21.57,21.57,0,0,0-.6-5c-1.9-7.72-8.66-12.75-17.21-12.8-9.85-.05-19.7,0-29.56,0ZM160.47,39.76c3.7,2.27,7.17,4,10.18,6.35,5.22,4,10.12,8.49,15.21,12.69a5.11,5.11,0,0,0,2.9,1.2c10.81.09,21.61,0,32.42.06s21.58.12,32.38.11c17.73,0,35.47-.08,53.21-.11,3.11,0,4.91,1.24,5.52,3.72a4.77,4.77,0,0,1-3.94,5.92,8.12,8.12,0,0,1-1.3.09H196.9c-.49,0-1,0-1.7.07a14,14,0,0,0,.68,1.35,89.25,89.25,0,0,1,10.33,20.27c.47,1.36,1.22,1.69,2.61,1.69q31.67-.08,63.33,0,17.61,0,35.22,0a4.8,4.8,0,0,1,4.81,6.46c-.67,2-2.6,3.26-5.17,3.26-6.87,0-13.74,0-20.61,0H209.87c.73,5.31,1.42,10.45,2.15,15.8h94.51c3.25,0,5.37,2,5.34,5s-2.21,4.83-5.47,4.83H213.28c-.43,0-.86,0-1.18.06-.91,6-1.8,11.89-2.71,18h2.83q47,0,94,0a10.37,10.37,0,0,1,3,.34,4.83,4.83,0,0,1-1.11,9.37c-.74.07-1.5.05-2.25.05h-97.8c-1.18,0-2.07,0-2.61,1.41a88.16,88.16,0,0,1-11.46,21,8.52,8.52,0,0,0-.43.81c.71,0,1.24.11,1.77.11l49.46,0H306.6c3.34,0,5.29,1.41,5.77,4.13a4.74,4.74,0,0,1-3.84,5.51,16.32,16.32,0,0,1-2.62.16H253.45c-21.47,0-42.95.09-64.42-.1a8.76,8.76,0,0,0-7,2.7,87.17,87.17,0,0,1-20,14.38c-.37.21-.74.44-1.1.67,0,0,0,.11-.1.38h2.36q27.83,0,55.64.08,43.38,0,86.75-.05a9.53,9.53,0,0,1,3.3.4,4.71,4.71,0,0,1,2.9,5.31,5,5,0,0,1-4.33,4.06,10.74,10.74,0,0,1-1.5,0H226q-53.29,0-106.6,0c-38.87,0-72.76-22.41-87.69-58.26a88.79,88.79,0,0,1-6.26-46.19c4.2-32.23,20.85-56.15,49.12-71.88A88.61,88.61,0,0,1,118.2,30q94.06-.07,188.12,0c3.41,0,5.29,1.18,5.95,3.72a4.79,4.79,0,0,1-4.19,6.06,10.68,10.68,0,0,1-1.13,0l-56,0-88.43,0ZM118.34,207.41c45.77.07,83.47-37.48,83.84-83,.36-45.68-36.74-85.9-86.29-84.62a83.54,83.54,0,0,0-81.34,86C35.58,171.32,73.05,207.4,118.34,207.41ZM93.08,263.7V250H65.68V263.7Zm198.74-13.78H264.6v13.87h27.22Z"/></svg>
            styles:
              custom_fields:
                air_propeller:
                  [top: 19%, left: 15%, width: 1.8vw, position: absolute, opacity: 0.6]
                air:
                  [top: 12%, left: 10%, width: 4vw, position: absolute, opacity: 0.6]
            template: pool_smal

Unbenannt

This all is based on the work of Mattias_Persson, you can see his work here:

4 Likes
697

Could I please get a little help with selecting the correct css attribute. I’m trying to remove the box shadow from the four buttons:

Untitled
Untitled1920×1060 627 KB

I’ve tried this but without success:

    style: |
      '#mmp-shortcuts' mmp-button:
        $: |
          button {
            box-shadow: none !important;
          }
698

Untitled
Untitled1920×1060 850 KB

The : | should only be used on the very last step when navigating the tree, as that turns what follows into a string, rather than a dictionary which can be parsed.

The exception is in themes, where the entire variable must be a string - but which parses to a dictionary…

4 Likes
699

That is an excellent explanation. Thank you.

EDIT. Damn. Thought I had it:

    style:
      mmp-shortcuts:
        $: |
          mmp-button.mmp-shortcuts__buttons {
            box-shadow: none;
            background: none;
          }
      .: |
        ha-card {
          border: solid 1px var(--primary-color);
        }

But no.

Screenshot_2020-07-28 Administration - Home Assistant

I tried adding !important after the style options and before the semi-colon but it did not help.

EDIT2: Got it to work:

    style:
      mmp-shortcuts:
        $: |
          mmp-button {
            box-shadow: none;
            background: none;
            border: solid 1px var(--primary-color);
            border-radius: 10px
          }
      .: |
        ha-card {
          border: solid 1px var(--primary-color);
        }

Screenshot_2020-07-28 Administration - Home Assistant(1)

700

hello, I open the tools for google chrome developers but that inspector tab does not come out, I have also installed the visual inspector extension but nothing comes out either, could you tell me how it is enabled or maybe you are using another browser?
greetings and thanks

Sin título
Sin título1920×1150 304 KB

701

You want the Elements tab.

IMG_0603
IMG_06031920×1150 393 KB

1 Like
702

Is it possible to change the color of the icon in picture-glance card with card-mod?

      - type: picture-glance
        title: Baby
        camera_image: camera.baby_monitor
        camera_view: live
        entities:
          - entity: sensor.babymonitor_battery_level
          - entity: binary_sensor.babymonitor_motion_active
          - entity: switch.babymonitor_motion_detection
          - entity: switch.babymonitor_night_vision
          - entity: light.hue_bar_1
          - entity: script.kodi
            tap_action: 
              action: call-service
              service: script.kodi
              confirmation:
                text: Cast to TV?            
            icon: mdi:cast

scr

2 Likes
703

I’ll add that to The List.

1 Like
704

Ok. Thanks!

705

Hello, Help me please find the error in my yaml.
I have mistake like that:

 duplicated mapping key at line 116, column -185:
                  state-card-cover:
                  ^

My yaml:

- type: custom:more-info-card
              entity: cover.73731581a4cf12e748f2
              debug_cardmod: true
              title: Ролеты на кухне
              style: 
               .: |
                   ha-card {
                    height: 100%; 
                   }
               state-card-cover:
                $: 
                  state-info:
                      $: |
                          div.info > .name {
                            display: none;
                          }
                          :host {
                            max-width:30px;
                            min-width:10px;
                          }
               state-card-cover:
                      $: |
                          .justified {
                            justify-content: space-around!important;
                          }
706

I understood that. Maybe someone will help this.
Thanks to the author for this excellent work.

style: 
               .: |
                   ha-card {
                    height: 100%; 
                   }
                   ha-card > .card-header{
                       text-align: center;
                   }
               'state-card-cover':
                $: 
                  state-info:
                      $: |
                          :host{
                              display:none;
                          }
                          div.info > .name {
                            display: none;
                          }
               'state-card-content state-card-cover':
                 $: |
                     .horizontal{
                            justify-content: center!important;
                            flex-direction: column!important;
                            margin: auto;
                          }
707

Good day. I’m trying to apply spin animation to an icon inside a picture-elements card. Found this thread, searched through and saw your reply. It made me wonder… do you know if it is possible to define @keyframes for a card so that I could use them for an icon style? I was trying this but it didn’t work:

style: |
  ha-card {
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  }

and then on an element:

    style:
      animation: spin 4s linear infinite
708

You define the keyframes outside of the specification for the element style.

709

Yep. Thank you for such a quick answer!

That’s what I was afraid of :frowning: … if I go and use the dev-tools in my browser and inject that keyframes definition right into the shadowroot of the icon, then it starts spinning.

So just to sum up - no way I can do a spinning icon with the card-mod, and I have to look somewhere else. Correct?

710

Of course there is.
Just move it out of the specification for the element style.

style: |
  @keyframes spin {
  }
  ha-card {
  }
1 Like