@dimitri.landerloos @berkans Thank you both for your help, you guys are awesome!!!
I did mix the code and i got the result is the photo below.
I want now to try to change the background color on the forecast card based on what day we have today.
The picture that i get the idea.
Code
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: ''
icon: |-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% if is_state('weather.openweathermap_2','sunny') %}
mdi:weather-sunny
{% elif is_state('weather.openweathermap_2','clear-night') %}
mdi:weather-night
{% elif is_state('weather.openweathermap_2','rainy') %}
mdi:weather-rainy
{% elif is_state('weather.openweathermap_2','snow') %}
mdi:weather-snowy
{% elif is_state('weather.openweathermap_2','fog') %}
mdi:weather-fog
{% elif is_state('weather.openweathermap_2','sleet') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.openweathermap_2_2','wind') %}
mdi:weather-windy
{% elif is_state('weather.openweathermap_2','cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.openweathermap_2','partlycloudy') %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif is_state('weather.openweathermap_2','hail') %}
mdi:weather-hail
{% elif is_state('weather.openweathermap_2','lightning') %}
mdi:weather-lightning
{% elif is_state('weather.openweathermap_2','thunderstorm') %}
mdi:weather-lightning-rainy
{% endif %}
secondary: |2-
{% set en = states('weather.openweathermap_2') %}
{% set conditions = ['clear-night:Καθαρός',
'cloudy:Συννεφιασμένος',
'fog:Ομιχλώδες',
'hail:Χαλαζόπτωση',
'lightning:Αστραπές',
'lightning-rainy:Βροχερός με αστραπές',
'partlycloudy:Τοπικές νεφώσεις',
'pouring,rainy:Βροχερός',
'snowy:Χιονόπτωση',
'snowy-rainy:Χιονόνερο',
'sunny:Λιακάδα',
'windy:Ανεμώδης',
'windy-variant:Θυελλώδης',
'exceptional:Ιδιαίτερος'] %}
{{ conditions
| select('search', en)
| map('regex_replace', '.*:')
| list
| default([''], true)
| first }}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 400 !important;
}
.secondary {
font-weight: 700 !important;
--secondary-text-color: var(--primary-text-color) !important;
margin-top:50px;
}
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 35px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon {
--icon-symbol-size: 65px;
color: #487aff;
margin-top: 60px;
}
ha-state-icon::after {
content: '{{states('sensor.wu_temperature_rafina')}}°C';
position: relative;
display: flex;
justify-content: center !important;
top: 32px;
left: 10px;
color: var(--primary-text-color) !important;
font-size: 35px;
}
ha-card:before {
content: 'Ραφήνα';
display: flex;
position: relative;
justify-content: center;
font-size: 15px;
color: var(--secondary-text-color) !important;
font-weight: var(--card-primary-font-weight);
}
ha-card {
margin-top:26%;
background-color: none;
border-width: 0px;
border-radius: 25px !important;
border-width: 0px;
width: 200px;
height: 150px!important;
view_layout:
grid-column-start: 1
grid-column-end: 3
grid-row-start: 1
grid-row-end: 1
place-self: center
- type: custom:mini-graph-card
entities:
- entity: sensor.wu_temperature_rafina
name: Θερμοκρασία
color: '#487aff'
show:
icon: false
state: false
fill: fade
hours_to_show: 24
animate: true
line_width: 3
height: 120
card_mod:
style: |
ha-card {
position: absolute !important;
height: 185px;
width: 410px;
background: transparent;
border-width: 0;
top: -10px;
}
ha-card .header.flex .name.flex {
font-size: 14px;
margin-top: 22px;
}
- type: custom:mushroom-template-card
primary: Υγρασία
secondary: '{{states(''sensor.wu_humidity_rafina'')}}%'
icon: ''
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
--secondary-text-color:#e1e1e1;
--primary-text-color: #9b9b9b;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon::after {
content: '{{states('sensor.lounge_downstairs_temperature')}}°C';
position: relative;
display: flex;
justify-content: center !important;
top: 32px;
left: 5px;
color: var(--primary-text-color) !important;
font-size: 65px;
}
ha-card {
background-color: none;
border-width: 0px;
width: 100px;
height: 150px!important;
background: transparent;
}
view_layout:
grid-area: h4
- type: custom:mushroom-template-card
primary: Άνεμος
secondary: |
{{states('sensor.wind_bf_from_kmh')}} -
{% set dir = states('sensor.wu_wind_direction_rafina') %}
{% if dir == "NNE" %} ΒΒΑ
{% elif dir == "NE" %} ΒΑ
{% elif dir == "ENE" %} ΑΒΑ
{% elif dir == "E" %} Α
{% elif dir == "ESE" %} ΑΝΑ
{% elif dir == "SE" %} ΝΑ
{% elif dir == "SSE" %} ΝΝΑ
{% elif dir == "S" %} Ν
{% elif dir == "SSW" %} ΝΝΔ
{% elif dir == "SW" %} ΝΔ
{% elif dir == "WSW" %} ΔΝΔ
{% elif dir == "W" %} Δ
{% elif dir == "WNW" %} ΔΒΔ
{% elif dir == "NW" %} ΒΔ
{% elif dir == "NNW" %} ΒΒΔ
{% else %} Β
{% endif %}
icon: ''
layout: vertical
view_layout:
grid-area: h5
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
--secondary-text-color:#e1e1e1;
--primary-text-color: #9b9b9b;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
}
.: |
ha-state-icon::after {
content: '{{states('sensor.lounge_downstairs_temperature')}}°C';
position: relative;
display: flex;
justify-content: center !important;
top: 32px;
left: 5px;
color: var(--primary-text-color) !important;
font-size: 65px;
}
ha-card {
background-color: none;
border-width: 0px;
width: 110px;
height: 150px!important;
background: transparent;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
primary: >-
{% set days = ['Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
'Παρασκευή', 'Σαββάτο', 'Κυριακή'] %}
{{ days[as_timestamp(state_attr('weather.openweathermap_2', 'forecast')[0].datetime) | timestamp_custom('%w') | int -1] }}
secondary: >-
{{ state_attr('weather.openweathermap_2',
'forecast')[0].temperature | round(1) }} °C
icon: >-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% set weather_icon = state_attr('weather.openweathermap_2',
'forecast')[0].condition %}
{% if weather_icon == 'sunny' %}
mdi:weather-sunny
{% elif weather_icon == 'clear-night' %}
mdi:weather-night
{% elif weather_icon == 'rainy' %}
mdi:weather-rainy
{% elif weather_icon == 'snow' %}
mdi:weather-snowy
{% elif weather_icon == 'fog' %}
mdi:weather-fog
{% elif weather_icon == 'sleet' %}
mdi:weather-partly-snowy-rainy
{% elif weather_icon == 'wind' %}
mdi:weather-windy
{% elif weather_icon == 'cloudy' %}
mdi:weather-cloudy
{% elif weather_icon == 'partlycloudy' %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif weather_icon == 'hail' %}
mdi:weather-hail
{% elif weather_icon == 'lightning' %}
mdi:weather-lightning
{% elif weather_icon == 'thunderstorm' %}
mdi:weather-lightning-rainy
{% endif %}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-state-icon {
--icon-symbol-size: 35px;
color: #487aff;
}
ha-card {
border-width: 0px;
border-width: 0px;
background: transparent;
}
view_layout:
grid-area: h1
place-self: center
- type: custom:mushroom-template-card
primary: >-
{% set days = ['Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
'Παρασκευή', 'Σαββάτο', 'Κυριακή'] %}
{{ days[as_timestamp(state_attr('weather.openweathermap_2', 'forecast')[1].datetime) | timestamp_custom('%w') | int -1] }}
secondary: >-
{{ state_attr('weather.openweathermap_2',
'forecast')[1].temperature | round(1) }} °C
icon: >-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% set weather_icon = state_attr('weather.openweathermap_2',
'forecast')[1].condition %}
{% if weather_icon == 'sunny' %}
mdi:weather-sunny
{% elif weather_icon == 'clear-night' %}
mdi:weather-night
{% elif weather_icon == 'rainy' %}
mdi:weather-rainy
{% elif weather_icon == 'snow' %}
mdi:weather-snowy
{% elif weather_icon == 'fog' %}
mdi:weather-fog
{% elif weather_icon == 'sleet' %}
mdi:weather-partly-snowy-rainy
{% elif weather_icon == 'wind' %}
mdi:weather-windy
{% elif weather_icon == 'cloudy' %}
mdi:weather-cloudy
{% elif weather_icon == 'partlycloudy' %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif weather_icon == 'hail' %}
mdi:weather-hail
{% elif weather_icon == 'lightning' %}
mdi:weather-lightning
{% elif weather_icon == 'thunderstorm' %}
mdi:weather-lightning-rainy
{% endif %}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-state-icon {
--icon-symbol-size: 35px;
color: #487aff;
}
ha-card {
border-width: 0px;
border-width: 0px;
background: transparent;
}
view_layout:
grid-area: h2
place-self: center
- type: custom:mushroom-template-card
primary: >-
{% set days = ['Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
'Παρασκευή', 'Σαββάτο', 'Κυριακή'] %}
{{ days[as_timestamp(state_attr('weather.openweathermap_2', 'forecast')[2].datetime) | timestamp_custom('%w') | int -1] }}
secondary: >-
{{ state_attr('weather.openweathermap_2',
'forecast')[2].temperature | round(1) }} °C
icon: >-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% set weather_icon = state_attr('weather.openweathermap_2',
'forecast')[2].condition %}
{% if weather_icon == 'sunny' %}
mdi:weather-sunny
{% elif weather_icon == 'clear-night' %}
mdi:weather-night
{% elif weather_icon == 'rainy' %}
mdi:weather-rainy
{% elif weather_icon == 'snow' %}
mdi:weather-snowy
{% elif weather_icon == 'fog' %}
mdi:weather-fog
{% elif weather_icon == 'sleet' %}
mdi:weather-partly-snowy-rainy
{% elif weather_icon == 'wind' %}
mdi:weather-windy
{% elif weather_icon == 'cloudy' %}
mdi:weather-cloudy
{% elif weather_icon == 'partlycloudy' %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif weather_icon == 'hail' %}
mdi:weather-hail
{% elif weather_icon == 'lightning' %}
mdi:weather-lightning
{% elif weather_icon == 'thunderstorm' %}
mdi:weather-lightning-rainy
{% endif %}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-state-icon {
--icon-symbol-size: 35px;
color: #487aff;
}
ha-card {
border-width: 0px;
border-width: 0px;
background: transparent;
}
view_layout:
grid-area: h3
place-self: center
- type: custom:mushroom-template-card
primary: >-
{% set days = ['Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
'Παρασκευή', 'Σαββάτο', 'Κυριακή'] %}
{{ days[as_timestamp(state_attr('weather.openweathermap_2', 'forecast')[3].datetime) | timestamp_custom('%w') | int -1] }}
secondary: >-
{{ state_attr('weather.openweathermap_2',
'forecast')[3].temperature | round(1) }} °C
icon: >-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% set weather_icon = state_attr('weather.openweathermap_2',
'forecast')[3].condition %}
{% if weather_icon == 'sunny' %}
mdi:weather-sunny
{% elif weather_icon == 'clear-night' %}
mdi:weather-night
{% elif weather_icon == 'rainy' %}
mdi:weather-rainy
{% elif weather_icon == 'snow' %}
mdi:weather-snowy
{% elif weather_icon == 'fog' %}
mdi:weather-fog
{% elif weather_icon == 'sleet' %}
mdi:weather-partly-snowy-rainy
{% elif weather_icon == 'wind' %}
mdi:weather-windy
{% elif weather_icon == 'cloudy' %}
mdi:weather-cloudy
{% elif weather_icon == 'partlycloudy' %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif weather_icon == 'hail' %}
mdi:weather-hail
{% elif weather_icon == 'lightning' %}
mdi:weather-lightning
{% elif weather_icon == 'thunderstorm' %}
mdi:weather-lightning-rainy
{% endif %}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-state-icon {
--icon-symbol-size: 35px;
color: #487aff;
}
ha-card {
border-width: 0px;
border-width: 0px;
background: transparent;
}
view_layout:
grid-area: h4
place-self: center
- type: custom:mushroom-template-card
primary: >-
{% set days = ['Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη',
'Παρασκευή', 'Σαββάτο', 'Κυριακή'] %}
{{ days[as_timestamp(state_attr('weather.openweathermap_2', 'forecast')[4].datetime) | timestamp_custom('%w') | int -1] }}
secondary: >-
{{ state_attr('weather.openweathermap_2',
'forecast')[4].temperature | round(1) }} °C
icon: >-
{% set current_hour = now().hour %}
{% set is_night = current_hour >= 20 or current_hour < 6 %}
{% set weather_icon = state_attr('weather.openweathermap_2',
'forecast')[4].condition %}
{% if weather_icon == 'sunny' %}
mdi:weather-sunny
{% elif weather_icon == 'clear-night' %}
mdi:weather-night
{% elif weather_icon == 'rainy' %}
mdi:weather-rainy
{% elif weather_icon == 'snow' %}
mdi:weather-snowy
{% elif weather_icon == 'fog' %}
mdi:weather-fog
{% elif weather_icon == 'sleet' %}
mdi:weather-partly-snowy-rainy
{% elif weather_icon == 'wind' %}
mdi:weather-windy
{% elif weather_icon == 'cloudy' %}
mdi:weather-cloudy
{% elif weather_icon == 'partlycloudy' %}
{{ 'mdi:weather-night-partly-cloudy' if is_night else 'mdi:weather-partly-cloudy' }}
{% elif weather_icon == 'hail' %}
mdi:weather-hail
{% elif weather_icon == 'lightning' %}
mdi:weather-lightning
{% elif weather_icon == 'thunderstorm' %}
mdi:weather-lightning-rainy
{% endif %}
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 15px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-state-icon {
--icon-symbol-size: 35px;
color: #487aff;
}
ha-card {
border-width: 0px;
border-width: 0px;
background: transparent;
}
view_layout:
grid-area: h5
place-self: center
layout:
grid-template-columns: 80px 80px 80px 80px 80px
grid-template-areas: |
"h1 h2 h3 h4 h5"
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px !important;
width: 405px;
background: transparent;
}
view_layout:
grid-area: h6
layout:
max_cols: 2
grid-gap: 5px 5px
padding: 0px
margin: 0px
card_margin: 0px
grid-template-columns: 100px 120px 500px
grid-template-rows: 160px 150px
grid-template-areas: |
"h1 h2 h3"
"h4 h5 h6"
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px !important;
width: 655px;
border-radius: 40px !important;
}
is it Messenger avatars?
