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

Share your Projects! Dashboards & Frontend
1288

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;
    }

image

More examples are described here.

6 Likes