More chip cards on the esh_welcome_card

[xm4rcell0x]

Hi, i'd love to see more chip cards on the top of the https://github.com/UI-Lovelace-Minimalist/UI/tree/main/custom_cards/custom_card_esh_welcome , instead of the only weather. It's a beautiful custom card but a bit limitated with only one chip (i'd also add temperature and humidity on the ulm_weather). I think that a total of 3 or 4 chips it's the optimal to boost the look of this card.

[Marck]

You can build that in the custom_card_esh_welcome template. I guess you can use the chip_temperature template with a entity which has a temperature on it Something like this (search for card_esh_welcome_topbar::

card_esh_welcome_topbar:
  show_icon: false
  show_label: false
  show_name: true
  styles:
    grid:
      - grid-template-areas: "'item1 item2 item3 item4 item5'"
      - grid-template-columns: "1fr 7fr 1fr 1fr 7fr 1fr"
      - grid-template-rows: "min-content"
      - justify-items: "center"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - cursor: "default"
      - "--mdc-ripple-press-opacity": 0   # prevent click animation
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "chips"
        tap_action:
          action: "call-service"
          service: "input_boolean.toggle"
          service_data:
            entity_id: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
        show_icon: true
        icon: "mdi:chevron-up"
        entity: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
        styles:
          grid:
            - grid-template-areas: "'i'"
          card:
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - visibility: "[[[ return variables.ulm_card_esh_welcome_collapse ? 'visible' : 'hidden'; ]]]"
            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
        state:
          - value: "on"
            icon: "mdi:chevron-down"
            styles:
              icon:
                - color: "rgb(var(--color-theme))"
    item2:
      card:
        type: "custom:button-card"
        template: "chip_weather_date"
        variables:
          ulm_weather: "[[[ return variables.ulm_weather]]]"
        tap_action:
          action: "more-info"
        entity: "[[[ return variables.ulm_weather]]]"
        styles:
          card:
            - width: "100px"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
    item3:
      card:
        type: "custom:button-card"
        template: "chip_temperature"
        variables:
          ulm_weather: "[[[ return variables.ulm_weather]]]"
        tap_action:
          action: "more-info"
        entity: "[[[ return variables.ulm_weather]]]"
        styles:
          card:
            - width: "100px"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
    item4:
      card:
        type: "custom:button-card"
        template: "chip_weather_date"
        variables:
          ulm_weather: "[[[ return variables.ulm_weather]]]"
        tap_action:
          action: "more-info"
        entity: "[[[ return variables.ulm_weather]]]"
        styles:
          card:
            - width: "100px"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
    item5:
      card:
        type: "custom:button-card"
        template: "chip_mdi_icon_only"
        variables:
          ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
        tap_action:
          action: "navigate"
          navigation_path: "/config/dashboard"
        styles:
          card:
            - align-self: "end"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
            - "--mdc-ripple-press-opacity": 0.12    # allow click animation

[xm4rcell0x]

Can I say you're the best? 😍