Clock Weather Card - little help with styling needed

Configuration Frontend
1

Hi,
I have created a popup card for my dashboard but I am stuck on styling the clock weather card. I have no idea how to remove this background. I would be very grateful for any help.

Screenshot 2023-02-18 123631
Screenshot 2023-02-18 123631974×518 528 KB

Untitled
Untitled1810×648 106 KB

2 
                                type: custom:clock-weather-card
                                entity: weather.forecast_home
                                title: null
                                sun_entity: sun.sun
                                weather_icon_type: line
                                animated_icon: true
                                forecast_days: 5
                                locale: en-GB
                                time_format: 24
                                date_pattern: P
                                hide_today_section: true
                                hide_forecast_section: false
                                hide_clock: false
                                hide_date: false
                                card_mod:
                                  style: |
                                    ha-card {
                                      --ha-card-background: transparent !important;
                                      border: none; 
                                      }

                                    forecast-temperature-bar:
                                      $: |
                                        forecast-temperature-bar-background {
                                          background: transparent !important;
                                      }

that doesn’t work

3

Do you mind sharing how you have those different weather icons?

Thanks

4

Hi, thanks to hosein for the custom 3d weather icons available to download from

5

I think he wanted the code for the whole card lol

6

Thanks for the link to the cool icons. I downloaded it. But what do I do with it now? Where do I have to save the icons for them to be used?

7

Hi,

place the downloaded icons in the homeassistant/www/example_folder , remember to rename the icons accordingly to the weather conditions from your weather integrations. Some integrations may use different names. Call the icons location by /local/example_folder.