Black and white entity with color border

I am trying to create a card with “custom:weather-card” but I want the content to appear in black and white but the border to appear in color. Right now I have this example where everything comes out in black and white. Can anyone help me?

type: custom:weather-card
entity: weather.forecast_casa
number_of_forecasts: '7'
name: Casa
details: true
forecast: false
current: true
hourly_forecast: true
card_mod:
  style: |
    ha-card {
      box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
      padding: 0.5rem 1rem;
      border: 10px solid green;
      filter: grayscale(100%);
    }

Regards

Remove below and it should work.

filter: grayscale(100%);

If I remove this option, everything appears in color and I want the interior to appear in black and white. I only want the border in color.

I am on mobile so I can’t inspect the css but removing that give me this below.

If you look at the clouds and the icons appear in blue and what I want that this in black and white but that the border if it appears in green as now.

Yeah, you can inspect the css and change it accordingly. The filter is for everything. I can have a shot at it later if you couldn’t find a solution.

My css knowledge is almost null so I am very lost. I have been searching in forums and web pages for something similar but I can’t find it.

Like this? I added a few other adjustable card settings to play with.

type: custom:weather-card
entity: weather.forecast_casa
number_of_forecasts: '7'
name: Casa
details: true
forecast: false
current: true
hourly_forecast: true
card_mod:
  style: |
    ha-card  {
     --primary-text-color: white !important;
     --paper-item-icon-color: white !important;
     background-color: black;
     box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
     padding: 0.5rem 1rem;
     border: 10px solid green;
     font-size: .9em !important;
    }
    .icon {
     filter: grayscale(100%);
     }

Ugly but the colors will help identify what code controls the card elements.

type: custom:weather-card
entity: weather.forecast_home
number_of_forecasts: '7'
name: Casa
details: true
forecast: false
current: true
hourly_forecast: true
card_mod:
  style: |
    ha-card  {
     --primary-text-color: white !important;
     --paper-item-icon-color: white !important;
     background-color: black;
     box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
     padding: 0.5rem 1rem;
     border: 10px solid green;
     font-size: .9em !important;
    }
    .icon {
     filter: grayscale(100%);
     }
    .variations ha-icon {
        height: 22px;
        margin-right: 5px;
        color: red !important;
      }
    .variations {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        font-weight: 500 !important;
        color: green !important;
        list-style: none;
        padding: 0 1em;
        margin: 0;
      }
     .temp {
          font-size: 4em !important;
          color: yellow !important;
         }
     .tempc {
          font-size: 1.5em !important;
          color: blue !important;
        }
     .title {
        position: absolute;
        left: 3em;
        font-weight: 300 !important;
        font-size: 3em !important;
        color: orange !important;
      }
3 Likes

Perfect, this is what I was looking for, thanks