Black and white entity with color border

Configuration Frontend
1

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

2

Remove below and it should work.

filter: grayscale(100%);

3

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.

4

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

1000020670
10000206701079×607 38.7 KB

5

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.

6

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.

7

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.

8

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

image
image932×452 12.1 KB

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.

image
image780×416 15.7 KB

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
9

Perfect, this is what I was looking for, thanks