Get all CSS style elemts

[Phoenix-DH]

Does anybody got a list of the stylable elements with card mod? I am trying to make the icon and the temperature smaller to have a better view an a tablet.

I am nopt really familiar with that.

Thanks.

[adrianrdzv]

I'm using card-mod to align better the header texts and scales because I think by default the orientations are odd. Maybe this helps you:

    ha-card {
      font-size: 1rem;
    }
    clock-weather-card-today-left  {
      width: 25% !important;
    }
    clock-weather-card-today-right  {
      display: block !important;
      width: 75% !important;
    }
    clock-weather-card-today-right-wrap-top  {
      font-size: 1.2rem !important;
    }
    clock-weather-card-today-right-wrap-center  {
      font-size: 2.7rem !important;
    }
    clock-weather-card-today-right-wrap-bottom  {
      text-align: center !important;
      display: block !important;
    }

[Phoenix-DH]

@adrianrdzv Thank you for the initial starting point. My goal is to make the current temperature a little bit smaller and the main icon too. But here I only get it managed to change the size of all icons. I am not that familiar with styling 🤷🏼‍♂️

I will try and let you know.

[sparment]

@Phoenix-DH I'm interested in this as well... Looking to do a bit of the opposite though and make the current temperature font larger. I'll let you know if I figure anything out. Please do the same!

[Phoenix-DH]

@sparment Sure, will do when I got the time to.

[sparment]

Actually, the post from @adrianrdzv had what I needed. Top is the current weather, center is the time, and bottom is the date.

      clock-weather-card-today-right-wrap-top  {
        font-size: 22px !important;
        text-align: left !important;
      }
      clock-weather-card-today-right-wrap-center  {
        font-size: 50px !important;
        text-align: left !important;
      }
      clock-weather-card-today-right-wrap-bottom  {
        text-align: left !important;
        font-size: 22px !important;
      }

[Phoenix-DH]

@sparment

Great, thanks! This really helps, I got it. Just trying to remove some more space in between to get it more suitable for smaller displays.

[kroon040]

Nice to have the option to modify this.

Any Idea how I can acomplish that it de tekst is somehow like this. Temperature only near the weather icon and time and date on the right

[Camatobe]

I also altered the stylings for my dashboard darkmode: If you are interested I can share the card_mod styles as well

`card_mod: style: > ha-card { background: none; border: none; } clock-weather-card-today-right-wrap-center { font-size: 6.5rem !important; font-weight: 700; opacity: 0.3; height: 5rem !important; }

clock-weather-card-today-right-wrap-top,
clock-weather-card-today-right-wrap-bottom {
  font-size: 1.5rem;
  font-weight: 500;
} 

clock-weather-card-today-right-wrap-top { 
 width: 100%; 
 text-align: end;
 display: block !important; 
} clock-weather-card-today-left {
  max-height: 130px;
} `

[RkcCorian]

I also altered the stylings for my dashboard darkmode: If you are interested I can share the card_mod styles as well

`card_mod: style: > ha-card { background: none; border: none; } clock-weather-card-today-right-wrap-center { font-size: 6.5rem !important; font-weight: 700; opacity: 0.3; height: 5rem !important; }

clock-weather-card-today-right-wrap-top,
clock-weather-card-today-right-wrap-bottom {
  font-size: 1.5rem;
  font-weight: 500;
} 

clock-weather-card-today-right-wrap-top { 
 width: 100%; 
 text-align: end;
 display: block !important; 
} clock-weather-card-today-left {
  max-height: 130px;
} `

@Camatobe : May I ask how you created the hourly forecast as well? Many thanks!

[Camatobe]

Sure, it's https://github.com/decompil3d/lovelace-hourly-weather Just between the clock and daily.

[RkcCorian]

Sure, it's https://github.com/decompil3d/lovelace-hourly-weather Just between the clock and daily.

Cool! As I'm new to HA... how can I reach "Just between"? Do you have the full YAML of your card?

[Phoenix-DH]

Can imagine that he just added the component twice. First one only current. Then hourly, then second time only forecast.

[Camatobe]

Sure, Easy way:

• vertical stack
• clock weather card, hide the forecast (see documentation for that)
• hourly weather card
• clock weather card, only show the forecast (see documentation for that)
• use card mod to remove all card backgrounds (set them to transparent) (see card mod addon documentation)

This way you have 3 weather cards stacked.

My way: (My slow walk tablet could not handle the amount of weather requests for 3 cards) I used card mod and some css magic to make space between clock and forecast. After that I moved the hourly card in that exact spot:

• vertical stack 2 cards
• hourly -> position absolut, height 0px, transform: translateY to the right height.

[RkcCorian]

Sure, Easy way:

• vertical stack
• clock weather card, hide the forecast (see documentation for that)
• hourly weather card
• clock weather card, only show the forecast (see documentation for that)
• use card mod to remove all card backgrounds (set them to transparent) (see card mod addon documentation)

This way you have 3 weather cards stacked.

My way: (My slow walk tablet could not handle the amount of weather requests for 3 cards) I used card mod and some css magic to make space between clock and forecast. After that I moved the hourly card in that exact spot:

• vertical stack 2 cards
• hourly -> position absolut, height 0px, transform: translateY to the right height.

Would it be possible to share the YAML code? Many thanks!!!

[Camatobe]

Would it be possible to share the YAML code? Many thanks!!!

Have fun with it. I have to deal with some nasty layout shift. I may alter the position of hourly to the bottom and move it up later

type: vertical-stack
cards:
  - type: custom:hourly-weather
    entity: weather.weather_entity
    name: ' '
    show_wind: 'false'
    show_precipitation_amounts: false
    show_precipitation_probability: true
    icons: true
    language: de
    colors:
      cloudy: '#444'
    label_spacing: '3'
    num_segments: '19'
    card_mod:
      style: |
        ha-card {
          background: none;
          border:none;
          height: 0;
          transform:translateY(160px);
          transition: none;
        }
  - type: custom:clock-weather-card
    entity: weather.weather_entity
    sun_entity: sun.sun
    weather_icon_type: fill
    animated_icon: true
    forecast_rows: 9
    date_pattern: ccc, DDD
    locale: de
    time_format: 24
    hide_today_section: false
    hide_forecast_section: false
    tap_action:
      action: navigate
      navigation_path: /lovelace-ipad/more_weather
    card_mod:
      style: >
        ha-card {
          background: none;
          border: none;
        } 
        forecast-temperature-bar-current-indicator-dot {
          width: 1.5rem;
        } 
        clock-weather-card-today {
          margin-bottom: 170px;
        }

        clock-weather-card-forecast {
          display: block !important;
        }

        clock-weather-card-today-right-wrap-center {
          font-size: 6.5rem !important;
          font-weight: 700;
          opacity: 0.3;
          height: 5rem !important;
        }

        clock-weather-card-today-right-wrap-top,
        clock-weather-card-today-right-wrap-bottom {
          font-size: 1.5rem;
          font-weight: 500;
        } 

        clock-weather-card-today-right-wrap-top { 
         width: 100%; 
         text-align: end;
         display: block !important; 
        } 
        clock-weather-card-today-left {
          max-height: 130px;
        }

[RkcCorian]

@Camatobe : Many thanks!! / Vielen Dank! :-)

[RkcCorian]

I tried a different approach and resolved it for me. Many thanks for the hint!!!

type: vertical-stack
title: Zeit & Wetter
cards:
  - type: custom:vertical-stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          background: none !important;
          }
    cards:
      - type: custom:clock-weather-card
        entity: weather.forecast_home
        sun_entity: sun.sun
        temperature_sensor: sensor.outdoor_temp
        weather_icon_type: fill
        animated_icon: true
        forecast_rows: 5
        time_pattern: HH:mm:ss
        time_format: 24
        date_pattern: cccc, d.MM.yyyy
        hide_today_section: false
        hide_forecast_section: false
        hide_clock: false
        hide_date: false
        hourly_forecast: false
        use_browser_time: false
        time_zone: null
        card_mod:
          style: |
            forecast-temperature-bar-background {
              background: none !important;
            }
            clock-weather-card-today {
              margin-bottom: 90px;
            }
            clock-weather-card-forecast {
              display: block !important;
            }
            clock-weather-card-today-right-wrap-center {
              font-size: 4.5rem !important;
              font-weight: 500;
              opacity: 0.5;
              height: 5rem !important;
            }
            clock-weather-card-today-right-wrap-top,
            clock-weather-card-today-right-wrap-bottom {
              font-size: 1.0rem;
              font-weight: 500;
            }
            clock-weather-card-today-right-wrap-top { 
              width: 100%; 
              text-align: end;
              display: block !important; 
            }
            clock-weather-card-today-left {
              max-height: 130px;
            }
      - type: custom:hourly-weather
        entity: weather.forecast_home
        name: null
        icons: true
        show_date: 'false'
        show_wind: 'false'
        label_spacing: '2'
        offset: '0'
        num_segments: '12'
        show_precipitation_probability: false
        show_precipitation_amounts: false
        hide_temperatures: true
        card_mod:
          style: |
            ha-card {
              background: none !important;
              position: relative;
              top: -260px;
              box-shadow: none;
              border:none;
              height: 0;
              margin: none;
            }