[request] Weather card

[yvesfouquet4]

Hi, i dont know if its meant to work but i wanted to add the "weather card" or "simple weather card" to the homekit panel config but it doesnt seem to work.

thanks in advance

code

              - column: 2
                entities:
                  - entities:
                      - entity: weather.breucq
                      - card: 'custom:weather-card'
                        cardOptions:
                          entities:
                            - entity: 'weather.breucq'
                        noPadding: true
                      - card: 'custom:simple-weather-card'
                        cardOptions:
                          entities:
                            - entity: 'weather.breucq'
                        noPadding: true
                      - card: 'custom:mini-graph-card'
                        cardOptions:
                          entities:
                            - sensor.temp_zithoek
                          update_interval: 1
                        noPadding: true
                      - card: 'custom:mini-graph-card'
                        cardOptions:
                          entities:
                            - sensor.temp_leefruimte
                          update_interval: 1
                        noPadding: true
                    title: Temperatuur
                tileOnRow: 3

result

[Freshhat]

Try this one:

              - card: weather-forecast
                cardOptions:
                  entity: weather.dark_sky
                  name: ' '
                  show_forecast: false
                cardStyle: ":host {\n\theight: 100%;\n}\nha-card { background: transparent;\n\tcolor: #E9E9E9;\n\tbox-shadow: none;\n}\n.header {\n\tpadding: 10px 10px 0 10px;\n}\n.header .name, .header .name .ellipsis {\n\tfont-size: 13px!important;\n\tfont-weight: 500;\n\tcolor: #AF8A31;\n\topacity: 1;\n}\n.header icon {\n\tcolor: #f7d959;\n}\n.states {\n\tpadding: 0 10px;\n}\n.states .state {\n\tfont-size: 10px;\n}\n.header .icon {\n\tcolor: #f7d959;\n}\n"
                noPadding: true

[slipx06]

How do I fix the font. Does not seem like the style is being applied properly

[Freshhat]

Mhm you're right the last update also created that behavior on my setup. But 10 min playing a little bit with the Chrome Dev Tools fixed it on my side - i'm not the CSS expert but try & error is always a good starting point.

Try this for the cardStyle:

                cardStyle: ":host {\n\theight: 100%;\n}\nha-card { background: transparent;\n\tcolor: #E9E9E9;\n\tbox-shadow: none;\n}\n.header {\n\tpadding: 10px 10px 0 10px;\n}\n.header .name, .header .name .ellipsis {\n\tfont-size: 13px!important;\n\tfont-weight: 500;\n\tcolor: #AF8A31;\n\topacity: 1;\n}\n.header icon {\n\tcolor: #f7d959;\n}\n.states {\n\tpadding: 0 10px;\n}\n.states .state {\n\tfont-size: 10px;\n}\n.header .icon {\n\tcolor: #f7d959;\n}\n.info .name-state .state {\n    font-size: 13px!important;\n}\n.state, .temp-attribute .temp {\n    font-size: 13px!important;\n}\n.temp-attribute .temp span {\n    font-size: 13px!important;\n}                \n"

[slipx06]

Thank you. It works now but on my mobile device the temperature is still being cut off. Maybe I need to try make the icon smaller

[kaosmagix]

It would also be nice if the current default button with a weather entity, either displays more information (like simple weather card) or does show in a standard size tile (not wider as it is now)

[slipx06]

A quick fix for the mobile issue

    style: |
      :host {
        --tile-width-mobile: 91px;
        --tile-height-mobile: 93px;
      }

[DBuit]

I use this at the moment:

- card: weather-forecast
                        noPadding: true
                        wider: true
                        cardOptions:
                          entity: weather.weersverwachting
                        cardStyle: |
                            ha-card {
                                padding: 5px!important;
                                display: flex!important;
                                flex-direction: column!important;
                                background: transparent!important;
                                box-shadow: none!important;
                                border-radius:0!important;
                            }
                            .content {
                               display: flex!important;
                                flex-direction: row!important;
                            }
                            .icon-image {
                                min-width: auto!important;
                            }
                            .icon-image > * {
                                height: 32px!important;
                                flex: 0 0 32px!important;
                            }
                            .info .name-state {
                                font-weight: 500;
                            }
                            .info .name-state .state {
                                font-size:14px!important;
                                text-align:right;
                            }
                            .info .name-state .name {
                                font-size:14px!important;
                            }
                            .info .temp-attribute {
                                width:100%;
                                font-weight: 500;
                            }
                            .info .temp-attribute .temp {
                                    font-size: 16px!important;
                            }
                            .info .temp-attribute .temp span {
                                    font-size: 14px!important;
                            }
                            .forecast {
                                font-size: 10px!important;
                                padding-top: 5px!important;
                            }
                            .forecast-image-icon {
                                padding:0!important;
                            }
                            .forecast-image-icon > * {
                                width:20px!important;
                                height:20px!important;
                                margin: 0 auto!important;
                            }
                            .forecast .temp {
                                margin-top:0!important;
                                font-size:12px!important;
                            }
                            .forecast .templow {
                                display:none;
                            }

[slipx06]

Thanks @DBuit. I need someone to teach me how to identify and tweak all these css values. I tried using developer tools but I don't know enough

[yvesfouquet4]

worked like a charm, thanks for the feedback, appreciate it a lot !