Closed xm4rcell0x closed 1 year ago
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
Can I say you're the best? 😍
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.