Zenia
March 19, 2024, 12:11pm
1
I try to redesign my front page with new experimental view, and it’s looks great so far, but I have a problem with my greeting. It was working before but stop work after last HA update. I use @cowboysdude ( Thank you for your great work) greeting card setup, but now it’s stuck in Good afternoon, and not updating.
type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 3px;
line-height: 3px;
}
content: >
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Afternoon
{{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %} ,
{{user}}.<br/> Today
is {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix =
['st', 'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day //
10 == 1 or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2
else day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
<br/> Temperature
{{states('sensor.openweathermap_forecast_temperature')
| int }}°C <br/> {{states('sensor.openweathermap_condition') }}.
- type: picture
image: .
tap_action:
action: navigate
navigation_path: weather
card_mod:
style: |
ha-card {
background-color: transparent !important;
picture-color: green !important;
}
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 10px;
}
This is what I have in my configuration.yaml file:
input_select:
frontend_greeting:
name: Frontend Greeting
options:
- Good Morning
- Good Afternoon
- Good Evening
- Good Night
and here is an automation code:
- alias: Frontend Greeting
trigger:
- platform: time_pattern
minutes: /5
- platform: homeassistant
event: start
action:
service: input_select.select_option
data_template:
entity_id: input_select.frontend_greeting
option:
{%- if states('sensor.time') > '10:00 PM' and states('sensor.time') < '6:00 AM'%}
Good Night
{%- elif states('sensor.time') >'6:00 AM' and states('sensor.time') < '12:00 PM' %} Good Morning
{%- elif states('sensor.time') > '12:00 PM' and states('sensor.time') < '6:00 PM' %} Good Afternoon
{%- elif states('sensor.time') > '6:00 PM' and states('sensor.time') < '9:59 PM' %} Good Evening
{%- endif %}
Even when I put this template in Developer Tool, it’s didn’t change. What I am doing wrong?
The missing card_mod and ### are issues to start…
Card_mod should be where the red line is.
### needs to be removed from content:
The following code may help your greeting situation and eliminate the automation.
type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: dashboard-experimental-1/weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 3px;
line-height: 3px;
}
content: >
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
the image issue in your red circle is from this
1 Like
Zenia
March 20, 2024, 10:11am
3
Thank you. I will try tonight and report back. I know about this image. This is what I use temporary to use for navigation path. When I click to image it’s redirect me to my weather page ( I forgot to attach full code with this image
Zenia
March 20, 2024, 12:40pm
4
Can’t wait for evening, when I can use my laptop and copy and paste your code on my phone. Everything looks great. Your code for greeting is working, so fur for morning time ( thank you for coffee cup picture
I’ll take a deeper dive this evening to see how the original worked.
1 Like
Zenia
March 20, 2024, 9:20pm
6
This is a card with your code and picture ( for navigation purpose)
type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 3px;
line-height: 3px;
}
content: >
###{% if now().hour < 5 %} Good Night {{'\U0001F634'}} {% elif now().hour
< 12 %} Good Morning {{'\u2615\uFE0F'}} {% elif now().hour < 18 %} Good
Afternoon {{'\U0001F44B\U0001F3FB'}} {% else %} Good Evening
{{'\U0001F44B\U0001F3FB'}}{% endif %} , {{user}}.<br/> Today is {{
now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix = ['st',
'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day // 10 == 1
or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}. <br/>
Temperature {{states('sensor.openweathermap_forecast_temperature') |
int }}°C <br/> {{states('sensor.openweathermap_condition') }}.
- type: picture
image: .
tap_action:
action: navigate
navigation_path: weather
card_mod:
style: |
ha-card {
background-color: transparent !important;
picture-color: green !important;
}
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 10px;
}
TY
Your navigation path is generally pointing to another dashboard. For example…
action: navigate
navigation_path: /lovelace/lights
will take you to Lights
Do you have the navigation path weather defined?
Zenia
March 21, 2024, 11:45am
8
Yes I do. I have a pages for all my rooms and weather and CPU info and each of my main page button navigate to specific page, but that one doing this only if I click a picture on the card, but not whole card. It’s not even clickable. So first 2 screenshots is my Front Page, and 3rd one is my Living Room card. When I click on Living Room line on first page it’s redirecting me to my living room page
Zenia
March 21, 2024, 11:58am
9
Here is my front-page code if it will help. Thank you for your help and contribution to whole community.
title: Home
type: sections
sections:
- type: grid
cards:
- type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 3px;
line-height: 3px;
}
content: >
###{% if now().hour < 5 %} Good Night {{'\U0001F634'}} {% elif
now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}} {% elif
now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}} {%
else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %} ,
{{user}}.<br/> Today is {{ now().strftime('%A') }}, {{
now().strftime('%B') }} {% set suffix = ['st', 'nd', 'rd'] %}{%
set day = now().day %}{% set index = 3 if day // 10 == 1 or day %
10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
<br/> Temperature
{{states('sensor.openweathermap_forecast_temperature') | int }}°C
<br/> {{states('sensor.openweathermap_condition') }}.
- type: picture
image: .
tap_action:
action: navigate
navigation_path: weather
card_mod:
style: |
ha-card {
background-color: transparent !important;
picture-color: green !important;
}
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 10px;
}
- type: grid
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.sm_s918u_battery_state',
'charging') %}
Charging 🔌
{%- elif is_state('sensor.sm_s918u_battery_state',
'discharging') %}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
entity: sensor.sm_s918u_battery_state
icon: mdi:battery-charging-high
icon_color: >-
{%- if is_state('sensor.sm_s918u_battery_state',
'charging') %}
yellow
{%- elif is_state('sensor.sm_s918u_battery_state',
'discharging') %}
teal
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
font-size: 30px !important;
}
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -23px !important;
}
alignment: center
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.irinab_iphone_battery_state',
'Charging') %}
Charging 🔌
{%- elif is_state('sensor.irinab_iphone_battery_state',
'Not Charging')
%}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: >-
Battery {{ states('sensor.irinab_iphone_battery_level')
}}%
entity: sensor.irinab_iphone_battery_state
icon: mdi:battery-charging-high
icon_color: >-
{%- if is_state('sensor.irinab_iphone_battery_state',
'charging') %}
yellow
{%- elif is_state('sensor.irinab_iphone_battery_state',
'not charging') %}
teal
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
font-size: 30px !important;
}
entity: sensor.irinab_iphone_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -28px !important;
}
alignment: center
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Sonia
entity: person.sonia
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if
is_state('sensor.sonia_bolembakhs_iphone_battery_state',
'Charging') %}
Charging 🔌
{%- elif
is_state('sensor.sonia_bolembakhs_iphone_battery_state',
'Not Charging') %}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: >-
Battery {{
states('sensor.sonia_bolembakhs_iphone_battery_level') }}%
entity: sensor.sonia_bolembakhs_iphone_battery_state
icon: mdi:battery-charging-high
icon_color: >-
{%- if
is_state('sensor.sonia_bolembakhs_iphone_battery_state',
'charging') %}
yellow
{%- elif
is_state('sensor.sonia_bolembakhs_iphone_battery_state',
'not charging') %}
teal
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
font-size: 30px !important;
}
entity: sensor.sonia_bolembakhs_iphone_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -25px !important;
}
alignment: center
- type: grid
cards:
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
- armed_home
- armed_away
- armed_night
fill_container: true
show_keypad: true
alignment: justify
card_mod:
style:
mushroom-button:nth-child(1):
$: |
.button {
--bg-color: orange !important;
--icon-color: blue !important;
}
mushroom-button:nth-child(2):
$: |
.button {
--bg-color: red !important;
--icon-color: white !important;
}
mushroom-button:nth-child(3):
$: |
.button {
--bg-color: grey !important;
--icon-color: yellow !important;
}
- type: custom:teamtracker-card
entity: sensor.capitals_tracker
alignment: justify
card_mod:
style: |-
ha-card {
font-size: 12px !important;
}
- type: grid
cards:
- type: custom:vertical-stacked-navigation-card
nav_name: " "
nav_items:
- name: First Floor
icon: mdi:home-floor-1
sub_nav_items:
- name: 📺 Living Room
destination: living-room-1
active: false
- name: 👩🍳 Kitchen
destination: kitchen
active: false
- name: 👒 Hallway
destination: hallway
- name: 🚿 My Bathroom
destination: my-bathroom
- name: 🚙 Garage
destination: garage
- name: 🧸 Kids Room
destination: kids-room
- name: 🏝️ Outside
destination: outside
active: false
unfolded: false
- name: Second Floor
icon: mdi:home-floor-2
destination: ""
sub_nav_items:
- name: 🔺 Upstairs
destination: upstairs
- name: 👩❤️👨 Master Bedroom
destination: master-bedroom
- name: ♌ Sonia's Room
destination: sonia-room
- name: ♉ Artem's Room
destination: lovelace
- name: Basement
icon: mdi:home-floor-b
destination: ""
sub_nav_items:
- name: 🔻 Basement
destination: basement
- name: 🧺 Laundry
destination: laundry
- name: ⚒️ Utility Room
destination: utility-room
- name: 💻 HA Info
destination: ha-information
custom_styles:
colors:
text:
main: White
sub: White
hover:
main: Teal
sub: Teal
active:
sub: orange
background:
main: Transparent
sub: Transparent
font_size:
text:
main: 25px
sub: 20px
card_mod:
style: |
ha-card {
background: url('/local/MyPictures/rock wall.jpg');
background-size: 100%;
}
theme: Mushroom Square Shadow
cards: []
icon: mdi:home-heart
path: Bolembakh-home
1 Like
Zenia
March 24, 2024, 12:39pm
10
Thank you for help. I added a transparent big picture ( cover half of the greeting card) and it’s clickable and navigation working fine. Thank you again. You @LiQuid_cOOled and @Ildar_Gabdullin is really professional, helpful and kind people.
1 Like
, getting OLD 
)
, really need one but navigation still not working 
