Weather Flex Card - hiding elements via card_mod

Hello,

I am trying to hide everything below the icons in the weather-flex-card. I have all but the precipitation probability hidden. I can’t for the life of me figure out how to hide it. Below is a screenshot and the code I have so far. Any help would be greatly appreciated!

YAML Code:
  - type: custom:weather-flex-card
    card_mod:
      style: |
        .wfc-forecast-slot-temperature {
          display: none !important;
        }

        .wfc-forecast-slot-time,
        .wfc-forecast-slot-time * {
          font-size: 20px !important;
          font-weight: 600 !important;
          line-height: 18px !important;
        }

        .wfc-forecast-slot-time-sub,
        .wfc-forecast-slot-time div:nth-child(2),
        .wfc-forecast-slot-time span:nth-child(2) {
          display: none !important;
        }

        .wfc-weather-condition-icon-slot {
          width: 80px !important;
          height: 80px !important;
          margin-bottom: -25px !important;
        }

        .wfc-weather-condition-icon-slot ha-icon,
        .wfc-weather-condition-icon-slot ha-state-icon,
        .wfc-weather-condition-icon-slot img,
        .wfc-weather-condition-icon-slot svg {
          width: 70px !important;
          height: 70px !important;
        }

        .wfc-forecast-column-item-layout {
          height: 90px !important;
        }
    show_current: true
    show_forecast: true
    default_forecast: daily
    forecast_types: hourly
    tap_action:
      action: more-info
    entity: weather.home_nws_home_weather_ktaz
    wfc:
      order:
        - current
        - details
        - hourly
        - daily
        - sun_position
        - sun_arc
      card:
        border_enabled: false
        border_color: ''
        border_width: 1
        border_radius: 12
        border_top: true
        border_bottom: true
        border_left: true
        border_right: true
        corner_tl: true
        corner_tr: true
        corner_br: true
        corner_bl: true
        bg_color: ''
        glow_enabled: false
        glow_color: ''
        glow_intensity: 1
        glow_borders_only: true
        shadow_enabled: false
        shadow_color: '#000000'
        shadow_x: 0
        shadow_y: 4
        shadow_blur: 16
        shadow_spread: 0
        shadow_opacity: 35
      current:
        show: false
        header_state_size: 0
        header_temp_size: 0
        header_icon_size: 0
        clock_show_time: false
        clock_placement: right
        clock_date_placement: with_time
        clock_format: auto
        clock_show_seconds: false
        clock_show_date: false
        clock_font_size: 28
        clock_font_weight: '500'
        clock_color: ''
        clock_font_family: ''
        clock_date_font_size: 12
        clock_date_color: ''
        clock_date_format: auto
        clock_contrast: none
        clock_date_contrast: none
        title_show: false
        title_text: ''
        title_icon: ''
        title_text_align: left
        title_icon_align: left
        title_icon_color: ''
        title_icon_size: 20
        title_color: ''
        title_font_size: 15
        title_font_weight: '600'
        title_indent: 0
        divider_above: false
        divider_above_width: 1
        divider_above_length: 100
        divider_above_style: solid
        divider_below: false
        divider_below_width: 1
        divider_below_length: 100
        divider_below_style: solid
        divider_color: ''
        background_enabled: false
        background_color: ''
        background_opacity: 80
      details:
        show: false
        details_layout: grid
        columns: 2
        global_icon_color: ''
        global_icon_size: 22
        global_text_color: ''
        global_text_size: 14
        chips: false
        chip_bg: ''
        chip_border_color: ''
        chip_text_color: ''
        chip_icon_color: ''
        chip_text_size: ''
        chip_icon_size: ''
        chip_scale: 1
        chip_show_icon: true
        chip_icon_source: auto
        chip_show_name: false
        chip_hide_when_off: false
        chip_layout: wrap
        chip_columns: 0
        chip_pill: true
        chip_radius: 8
        items:
          - key: humidity
            show: true
          - key: wind_speed
            show: true
          - key: pressure
            show: true
          - key: visibility
            show: true
          - key: sunrise
            show: true
          - key: sunset
            show: true
          - key: apparent_temperature
            show: false
          - key: dew_point
            show: false
          - key: uv_index
            show: false
          - key: cloud_coverage
            show: false
          - key: ozone
            show: false
        title_show: false
        title_text: ''
        title_icon: ''
        title_text_align: left
        title_icon_align: left
        title_icon_color: ''
        title_icon_size: 20
        title_color: ''
        title_font_size: 15
        title_font_weight: '600'
        title_indent: 0
        divider_above: false
        divider_above_width: 1
        divider_above_length: 100
        divider_above_style: solid
        divider_below: false
        divider_below_width: 1
        divider_below_length: 100
        divider_below_style: solid
        divider_color: ''
        background_enabled: false
        background_color: ''
        background_opacity: 80
      hourly:
        show: true
        title_show: false
        title_text: awe4rwgvaerg
        title_icon: ''
        title_text_align: left
        title_icon_align: left
        title_icon_color: ''
        title_icon_size: 20
        title_color: ''
        title_font_size: 15
        title_font_weight: '600'
        title_indent: 0
        divider_above: false
        divider_above_width: 1
        divider_above_length: 100
        divider_above_style: solid
        divider_below: false
        divider_below_width: 1
        divider_below_length: 100
        divider_below_style: solid
        divider_color: ''
        background_enabled: false
        background_color: ''
        background_opacity: 80
        flush_edges: true
        flush_bottom: true
      daily:
        show: false
        title_show: false
        title_text: ''
        title_icon: ''
        title_text_align: left
        title_icon_align: left
        title_icon_color: ''
        title_icon_size: 20
        title_color: ''
        title_font_size: 15
        title_font_weight: '600'
        title_indent: 0
        divider_above: false
        divider_above_width: 1
        divider_above_length: 100
        divider_above_style: solid
        divider_below: false
        divider_below_width: 1
        divider_below_length: 100
        divider_below_style: solid
        divider_color: ''
        background_enabled: false
        background_color: ''
        background_opacity: 80
      sun_position:
        show: false
        height: 44
        flush_top: false
        flush_bottom: false
        flush_edges: false
        timeframe_mode: hours
        timeframe_hours: 24
        timeframe_anchor: now_left
        times_position: below
        ticks_position: hidden
        ticks_every: 0
        times_font_size: 11
        times_font_weight: '400'
        times_color: ''
        day_color: ''
        night_color: ''
        weather_adjust: true
        marker_color: ''
        marker_opacity: 100
        ss_markers_position: hidden
        ss_markers_color: ''
        ss_markers_opacity: 100
        forecast_temps: hidden
        forecast_icons: hidden
        forecast_stack: temps_out
        forecast_every: 3
        forecast_font_size: 11
        forecast_color: ''
        forecast_temp_color: ''
        forecast_icon_color: ''
        forecast_icon_size: 22
        forecast_extra: []
        forecast_extra_color: ''
        forecast_metric_detail_icons: false
        forecast_temp_with_icon: false
        title_show: false
        title_text: ''
        title_icon: ''
        title_text_align: left
        title_icon_align: left
        title_icon_color: ''
        title_icon_size: 20
        title_color: ''
        title_font_size: 15
        title_font_weight: '600'
        title_indent: 0
        divider_above: false
        divider_above_width: 1
        divider_above_length: 100
        divider_above_style: solid
        divider_below: false
        divider_below_width: 1
        divider_below_length: 100
        divider_below_style: solid
        divider_color: ''
        background_enabled: false
        background_color: ''
        background_opacity: 80
      sun_arc:
        show: false
        height: 90
        flush_top: false
        flush_bottom: false
        flush_edges: false
        timeframe_mode: sunrise_sunset
        timeframe_hours: 24
        timeframe_anchor: now_left
        time_format: auto
        labels_position: 0
        time_font_size: 13
        time_font_weight: '600'
        time_color: ''
        caption_font_size: 11
        caption_font_weight: '400'
        caption_color: ''
        sun_icon: ''
        night_moon: false
        moon_icon: mdi:weather-night
        show_arc_ticks: false
        show_base_ticks: true
        sunrise_sunset_ticks: none
        tick_color: ''
        show_times: true
        show_captions: true
        show_ss_icons: false
        sunrise_icon: mdi:weather-sunset-up
        sunset_icon: mdi:weather-sunset-down
        ss_icon_color: ''
        ss_icon_size: 20
        ss_icon_position: left
        baseline_mode: line
        title_show: false
        title_text: ''
        title_icon: ''
        title_text_align: left
        title_icon_align: left
        title_icon_color: ''
        title_icon_size: 20
        title_color: ''
        title_font_size: 15
        title_font_weight: '600'
        title_indent: 0
        divider_above: false
        divider_above_width: 1
        divider_above_length: 100
        divider_above_style: solid
        divider_below: false
        divider_below_width: 1
        divider_below_length: 100
        divider_below_style: solid
        divider_color: ''
        background_enabled: false
        background_color: ''
        background_opacity: 80
      editor_accordion: true
    show_condition_effects:
      - rain
      - snow
      - lightning
      - moon
      - sun
      - cloud
    forecast:
      mode: simple
      show_sun_times: true
      use_color_thresholds: true
      scroll_to_selected: true
    forecast_action:
      tap_action:
        action: toggle-forecast
      hold_action:
        action: select-forecast-attribute

I had not tried either of those yet. Neither take the precip probability out though. I found both of these and tried to target them as well, but display: none didn’t work with them either. wfc-forecast-slot-temperature and wfc-forecast-temperature-high wfc-small.

EDIT: I also added in extra_attribute: none under the hourly section of yaml but it is still there.

not using weather-flex-card, but I can see it’s copied from weather-forecast-card. Try using

    wfc-forecast-details div.wfc-forecast-precip-amount-container {
      display: none !important;
    }

Can confirm works, you can even leave out wfc-forecast-details.

Need an easy way to find where to style, and if in shadowRoot or not? Use UIX which has the uix_path() DOM inpsection helper.

e.g. Output from the element you want to hide…

...
📝 Boilerplate UIX YAML
uix:
  style: |
    ha-card div.wfc-container div.wfc-section:nth-of-type(2) div.wfc-forecast-container wfc-forecast-simple div.wfc-mask-container div.wfc-forecast div.wfc-forecast-slot:nth-of-type(7) wfc-forecast-details div.wfc-forecast-precip-amount-container {
      /* your styles for div */
    }

Its a long path, but the inspector is specific in case you need to be. On inspecting the output, you can see that he general CSS selector is div.wfc-forecast-precip-amount-container

Thank you both so much! This works. I could not figure out that path. Looks so much cleaner on my dashboard now.