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

Share your Projects! Dashboards & Frontend
#1283

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 :slight_smile:

BR.,
Lars

#1284

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
1 Like
#1285

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

#1286

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

#1287

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;
    }
    }
2 Likes
#1288

Styling Weather Card:

type: weather-forecast
entity: weather.home
show_forecast: true
style: |
  ha-card .name-state .name {
    color: orange;
    font-size: 20px;
  }
  ha-card .name-state .state {
    color: red;
    font-size: 10px;
  }
  ha-card .temp-attribute .temp {
    color: green;
    font-size: 10px;
  }
  ha-card .temp-attribute .temp span {
    color: blue;
    font-size: 30px;
  }
  ha-card .temp-attribute .attribute {
    color: cyan;
    font-size: 20px;
  }
  ha-card .forecast .temp {
    color: orange;
  }
  ha-card .forecast .templow {
    color: blue;
  }
  ha-card .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;
    }

image

More examples are described here.

3 Likes
Card-mod font size
#1289

Thx :slight_smile:

BR.,
Lars

#1290

Hi all,
hope someone can help me out…

img2
img21380×948 329 KB

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"
    ...
#1291

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

#1292

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

#1293

That sounds way beyond my pay grade!

#1294

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

#1295

You have lost me - what first part?

#1296

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

#1297

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

#1298

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?

#1299

Make two animations. The first one is showing. The second one is hiding. Use Jinja2 templating with an if-else statement. Once it finishes, it remains in that state.

#1300

I’m sure it is something trivial, but since I dont know CSS that well, I better ask. I have clock on my home screen and I have been using this code to make it bigger on bottom of the screen

- cards:
          - entities:
              - entity: sensor.time
            gridcol: 2 / 5
            gridrow: 3
            show_icon: false
            show_name: false
            show_state: true
            style: |
              ha-card {
                font-size: 60px;
                height: 100%; 
                background-color: rgba(0, 0, 0, 0.50)
              }
            type: glance

It used to work just fine, but after I update (from some version from early 2020) to recent Home assistant, it doesnt work anymore. Now all font sizes above 28px get cut from top and bottom. So I think I need some additional code, but I have no idea what.

#1301

Are you using layout-card?

#1302

Yes I am. Does it make difference?