I made a Bolder Weather Card that's great for wall-mounted dashboards

Share your Projects!
,
1

Hey everyone! I’m on a quest to make my dashboard look exactly like I want, but without having to use things like card-mod. To that end, I need to make or modify a bunch of cards that let me customize aspects of them that I couldn’t before.

The first card I did is the Bolder Weather Card!

430549433-030d0f77-f940-4818-bb01-969a96b34571
430549433-030d0f77-f940-4818-bb01-969a96b34571807×596 54.4 KB

It’s based on @pkissling’s excellent Clock Weather Card, but with a totally redesigned Today section and full UI customization support.

I plan on trying to get this (and the other cards I have in the works) into the default HACS repository eventually, but am making it available as a custom repository right now:

Features:

  • Big bold text and images that are readable from a distance.
  • Full UI customization.
  • Day/Night colors.
  • All icons have been modified and cropped to look good on the card.
  • Theme variables to customize… basically every CSS aspect of the card. These can be applied in 2 ways:
    • Editing your theme’s YAML file to add them globally.
    • Using the individual card configuration.
  • New loading UI on the Forecast section so that it doesn’t resize when refreshing (vs the Clock Weather Card it’s based on).

Planned Features
* Ability to add a “style” ID in the configuration that makes custom CSS variable names so that you can single out one card only to apply certain theming to. This is no longer planned, as you can apply variables to individual cards using config now.

I don’t know if anyone else will find this useful, but it’s always good to share.

7 Likes
2

Update v1.2.1

  • Adds UV Index support (Reddit request: thanks, u/NecessaryOdd9745)
  • Adds stubs for all languages with the new necessary translations. Sorry, I’m not 47-lingual!
3

Nice work - Only item I see is the revised card not being compatible with an iPhone. This may have been reported already.

5

I released v1.2.2, which I believe fixes the issue. I don’t have an iOS device, but I used an online real-device service to test a fix, and it appears to be good now.

6

Version 1.3.0 adds the ability to make “Time” the primary element.

Note that if you do this (and you use 12h time), you should DEFINITELY modify the theme’s variable for the primary text size, otherwise it’s just too big.

Add this line to your theme’s yaml file:

bolder-weather-card-primary-text-size: 48pt # This seems reasonable
7

Version 1.4.0

  • Adds the ability to specify theme variables in the card config (yaml only). See the documentation on github for an example.
8

Version 1.5.0 is a minor update that simply lets you specify theme variables in the config in a shorter way.

Previously, you needed to specify:

styles:
  - variable: bolder-weather-card-forecast-background-color
    value: red

Now, you no longer need the card name prefix when using the card config:

styles:
  - variable: forecast-background-color
    value: red

You still need the full name when applying using your theme’s YAML file.

9

Love the card, having some issues trying to modify color though. Im trying to change the main temperature color, but it doesn’t change. The code below should make the temperature color black right?

use_day_night_colors: false
use_time_as_primary: false
styles:
  - variable: bolder-weather-card-primary-text-color
    value: '#000000'
11

Unfortunately, I’m not able to reproduce. I copied your styles code right into my dashboard, and it changed like I would expect (see below). I did have a bug-fix regarding configuration styles (version 1.5.2), so maybe it got fixed inadvertently?

Can you post your full card yaml configuration here, or on a github issue?

image
image1484×808 132 KB

Side note: I’m serially on Reddit, so I get notifications on reports there, and I also check the GitHub page often, but I’m on these forums less frequently, so the best place for bug reports is GitHub.