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.

8

I have recently installed HACS and the Clock Weather Card, I love the look and functionality. Thank you!

I was digging through the clock_weather_card.js file and reviewing the documentation available for the add-on within HACS, but was not able to find a way to change the displayed temperature to Fahrenheit (I know I should just get more comfortable with Celsius, but for weather I still prefer F).

I was able to click on the card within the dashboard and set the desired units for the source entity (see the image below), but this does not seem to impact the units that are displayed. Is there a way to change this?

IMG_1523
IMG_15231460×1668 142 KB

9

MrJelly17, I love your Clock Weather Card and I see that it is in need of an update. I’m curious if you are planning (or willing) to add support for changing temperature scales? As my other reply mentions, I have tried to do this myself, but my skills are only very basic and I was not able to sort out how to do it. Any help you can offer would be greatly appreciated.