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

KTibow · January 13, 2021, 8:49pm

You might need to use mod-card, shadow-root into mod-card, and then shadow-root into the card.

Mariusthvdb · January 13, 2021, 10:04pm

experimenting some more with modding top view badges:

badges:
  - entity: person.marijn
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .label-badge .label span{
                {% if is_state('person.marijn','home') %} color: purple;
                {% else %} color: black;
                {% endif %}
              }
        .: |
          :host {
            {% if is_state('person.marijn','home') %} --label-badge-red: gold;
            {% else %} --label-badge-red: grey;
            {% endif %}
          }

I was kinda hoping we could use ‘entity’ in the templates, like

                {% if is_state(entity,'home') %} color: purple;
                {% else %} color: black;
                {% endif %}

making it easier to use anchors and stuff… a bit like we can in Thomas’s other card with jinja templates. Obviously this doesn’t work, but maybe I am not using it correctly, and this is a user error? would this be in any way possible?
thanks for having a look.

TMB · January 14, 2021, 7:04pm

Is it possible to style an entity’s secondary_info only and not the main entity itself?

Ildar_Gabdullin · January 14, 2021, 10:02pm

Try searching here using “secondary_info” keyword, you will find solutions for Entity, Glance, Entities, multiple-entity-card…

lawi75 · January 15, 2021, 9:53am

Newbe challange:

My end goal is to change the font of the temperature in a weather-forecast card but I’m not able to get the style element inserted in the right place (I guess) with shadow-roots etc…

Example code:

              - type: weather-forecast
                entity: weather.home
                debug_cardmod: true
                style: 
                  hui-weather-forecast-card:
                    $:
                      ha-card:
                        $: |
                          .content {
                            ...
                          }                
                show_forecast: false

The end goal (I guess) is to get a style tag inside the temp div or?

Hope any css/frontend guru can help

BR.,
Lars

Martin_Granger · January 15, 2021, 1:40pm

Wondering if anyone can help with an animation.
I have a conditional card that I want to animate its arrival on screen. I have managed to make the card fade in, but I want the space the card takes to slide open. The link is a video showing what I have, and the code is below. Any help would be fab:

type: vertical-stack
cards:
  - type: grid
    columns: 1
    square: false
    cards:
      - type: picture
        image: local/header_information.jpg
        tap_action:
          action: navigate
          navigation_path: /lovelace/upstairs
        hold_action:
          action: none
  - type: conditional
    conditions:
      - entity: input_boolean.show_calendar
        state: 'on'
    card:
      type: 'custom:atomic-calendar-revive'
      entities:
        - entity: calendar.bin_collection
      name: Bin Collections
      enableModeChange: true
      firstDayOfWeek: 1
      maxDaysToShow: 14
      showDate: true
      style: |
        ha-card{
        animation: fadeIn ease 2s;
        -webkit-animation: fadeIn ease 2s;
        -moz-animation: fadeIn ease 2s;
        -o-animation: fadeIn ease 2s;
        -ms-animation: fadeIn ease 2s;
        }
        @keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
        }
  - type: conditional
    conditions:
      - entity: input_boolean.eufy_advanced_settings
        state: 'on'
    card:
      type: entities
      entities:
        - entity: input_datetime.eufy_schedule
        - entity: input_boolean.eufy_weekend_clean
        - entity: vacuum.robovac
          name: Eufy Start / Stop
        - entity: input_boolean.vacuum_disable
          name: Disable Schedule
  - type: grid
    columns: 3
    cards:
      - type: button
        tap_action:
          action: navigate
          navigation_path: /lovelace/security
        entity: alarm_control_panel.ha_alarm
        icon: 'hass:bell-outline'
        show_state: true
        name: Security
      - type: button
        tap_action:
          action: toggle
        entity: input_boolean.guest_mode_switch
        show_state: true
        show_name: true
        show_icon: true
      - entity: input_boolean.house_option_alarmclock
        hold_action:
          action: more-info
        show_icon: true
        show_name: true
        tap_action:
          action: navigate
          navigation_path: /lovelace/alarmClock
        type: button
        show_state: true
      - entity: climate.zone_1
        name: Heating
        hold_action:
          action: navigate
        show_icon: true
        show_name: true
        tap_action:
          action: more-info
        type: button
        show_state: true
      - type: 'custom:button-card'
        aspect_ratio: 1/1
        name: Next Bin
        entity: input_select.bins
        hold_action: none
        tap_action:
          action: call-service
          service: input_boolean.toggle
          service_data:
            entity_id: input_boolean.show_calendar
        show_icon: true
        show_name: false
        show_state: true
        show_label: true
        label: |
          [[[
            return 'Collection: ' + states['sensor.bin_day'].state;
          ]]]
        state:
          - value: Recycling
            color: 'rgb(50, 50, 50)'
          - value: Refuse
            color: 'rgb(21, 150, 49)'
          - value: Garden
            color: 'rgb(92, 65, 12)'
        styles:
          icon:
            - margin-top: '-20px'
            - margin-bottom: 0px
          name:
            - font-size: 12px
            - color: 'rgb(150, 150, 150)'
          state:
            - margin-top: '-55px'
            - padding-bottom: 10px
          label:
            - font-size: 12px
            - color: 'rgb(150, 150, 150)'
            - margin-top: '-20px'
            - margin-bottom: 20px
      - entity: input_boolean.eufy_advanced_settings
        hold_action:
          action: more-info
        icon: 'mdi:robot-vacuum'
        name: Eufy Settings
        show_icon: true
        show_name: true
        show_state: false
        tap_action:
          action: toggle
        type: button

lawi75 · January 15, 2021, 2:02pm

Looks like the font size is set in :host, but how do I override that for div class “temp”?

KTibow · January 15, 2021, 2:38pm

I’m confused. You might be able to do this by progressing from height: 0; to height: unset;.

Martin_Granger · January 15, 2021, 3:16pm

I’m getting really close now!
I have managed to make the item slide in as i want, but I don’t know how to make it animate slide back out.

See the video of it sliding open:

This is the style code I have so far:

style: |
    ha-card{
    animation-duration: 1s;
    animation-name: slidein;
    }

    @keyframes slidein {
    0% {
    opacity:0;
    margin-bottom: -200px;
    }

    100% {
    opacity:1;
    margin-bottom: 0px;
    }
    }

Ildar_Gabdullin · January 15, 2021, 4:23pm

Styling Weather Card:

  - type: weather-forecast
    entity: weather.home_met
    show_forecast: true
    card_mod:
      style: |
        .name-state .name {
          color: orange;
          font-size: 2px;
        }
        .name-state .state {
          color: red;
          font-size: 7px;
        }
        .temp-attribute .temp {
          color: green;
          font-size: 40px !important;
        }
        .temp-attribute .temp span {
          color: blue;
          font-size: 7px !important;
        }
        .temp-attribute .attribute {
          color: cyan;
          font-size: 7px;
        }
        .forecast .temp {
          color: orange;
        }
        .forecast .templow {
          color: blue;
        }
        .forecast div {
          color: magenta;
        }

How to replace the main picture:

type: weather-forecast
entity: weather.home_met
card_mod:
  style: |
    svg {
      display: none;
    }
    .icon-image {
      background-image: url("https://www.pngall.com/wp-content/uploads/11/Weather-No-Background.png");
      background-size: 100% 100%;
      height: 64px;
    }

More examples are described here.

lawi75 · January 15, 2021, 5:06pm

Thx

BR.,
Lars

infiniteloop · January 16, 2021, 3:54pm

Hi all,
hope someone can help me out…

How can I reach the highlighted #root div in the picture above?

This is one of several attempts I’ve made, but I’m a bit loss…

...
type: "custom:mod-card" # MOD CARD FOR HORIZONTAL STACK 
style:
  .: |
    ha-card {
      background: rgba(255, 255, 255, 1);
      height: 70px !important;
      margin: 0 5%;
      width: 90%;
      position: absolute;
      bottom: 10px;
      border-radius: 35px;
      text-align: center;
    }
    hui-horizontal-stack-card:
      $: 
        #root {
          justify-content: center !important;
          align-items: center !important;
        }
card:
  type: horizontal-stack # HORIZONTAL STACK FOR TOP BANNER  
  cards:
    - type: "custom:button-card"
    ...

KTibow · January 16, 2021, 4:23pm

You indented hui-horizontal-stack-card:. It should be 1 less indented.

KTibow · January 16, 2021, 4:24pm

Instead of using a conditional card, show/hide it using Jinja templating.

Martin_Granger · January 16, 2021, 4:28pm

That sounds way beyond my pay grade!

KTibow · January 16, 2021, 4:30pm

Do you get the first part? Do that first, and then I’ll explain it.

Martin_Granger · January 16, 2021, 4:34pm

You have lost me - what first part?

KTibow · January 16, 2021, 4:35pm

Make it so that the card always displays, instead of being inside of a conditional.

infiniteloop · January 16, 2021, 4:38pm

Damn, I knew I was missing something stupid!!!
Thank you so much.

Martin_Granger · January 16, 2021, 4:38pm

Ah - I see. So obviously I can make the card into a standard entities card. How would Jinja be used to make the card show / hide when a button is pressed then?