The automation for Option 2 is exactly the same as Option 1 other than the time before dua due to the difference in length of adhan media.
For Option 3 the only difference is the offset I have added before the media plays.
Jazakallah brother it worked. I have few more questions.
Where I can find different adhans. Why do you have a delay in Fajr. Where can find the dua after adhan.
Lastly how do I make the front end looks like yours mine looks like this:
Thank you again, appreciate all the help.
I basically googled for adhan mp3 files. The search results will give you multiple sites from where you can download the adhan of your choice.
I don’t get what you mean by delay in Fajr? For all adhans other than Maghrib, as soon as the trigger happens, the adhan is played. After the adhan, the delay timer is inserted before the dua gets played. The reason for putting the delay timer there is because the trigger for both actions of playing adhan and dua is the same. If you won’t put the delay timer in between then both media will be triggered at the same time.
This is the trace of my automation which shows the logic.
Dua after adhan: I searched on YouTube and then converted the YouTube video to mp3 file.
For front end, I’m still in the process of learning/figuring out dashboard cards. Mine currently is the default one same as yours. The one you are referring to is built on Mushroom cards (I think!). You’ll have to search on YouTube to learn about these.
1 Like
I got my automation to run, but I am not having any luck with setting up front end for the adhan timings. Which card are you guys selecting and where are you putting the code. I am new to HA. Thanks
I am able to get this far, but still getting errors and times are not showing properly.
Here’s the code:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_fajr_prayer
primary: Fajr
secondary: null
icon: mdi:weather-sunset-up
icon_color: '#F1C40F'
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_fajr_prayer
primary: '{{states(entity)}}'
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_dhuhr_prayer
primary: Dhuhr
secondary: ''
icon: mdi:weather-sunny
icon_color: '#E74C3C'
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_dhuhr_prayer
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_asr_prayer
primary: Asr
secondary: ''
icon: mdi:sun-angle
icon_color: '#3498DB'
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_asr_prayer
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_maghrib_prayer
primary: Maghrib
secondary: null
icon: mdi:weather-sunset-down
icon_color: '#A569BD'
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_maghrib_prayer
primary: '{{states(entity)}}'
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_isha_prayer
primary: Isha
secondary: ''
icon: mdi:moon-waxing-crescent
icon_color: green
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.islamic_prayer_times_isha_prayer
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
I am trying to use two different layouts for different dashboards, here my other on with error also:
Here’s the code for it:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid
layout:
grid-template-columns: auto 120px
grid-template-rows: auto auto
margin: '-4px 0px -10px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Prayer Times
secondary: |-
Next Prayer: {{ states('sensor.next_prayer') }} | Starts in {{
states('sensor.time_until_next_prayer_formatted') }}
icon: mdi:mosque
entity: sensor.next_prayer
tap_action:
action: none
hold_action:
action: none
icon_color: red
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
}
mushroom-state-info$: |
.container {
--primary-text-color: rgba(255, 255, 255, 0.9); /* White with slight transparency for high legibility */
--secondary-text-color: rgba(255, 235, 59, 0.9); /* A soft amber for a warm contrast */
}
- type: custom:timer-bar-card
entities:
- timer.next_prayer_timer
layout: full_row
bar_radius: 5px
bar_height: 20px
bar_width: 70%
bar_foreground: rgba(92, 107, 192, 1)
bar_background: rgba(237, 231, 246, 1)
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Fajr
secondary: |
{{ states('sensor.islamic_prayer_times_fajr_prayer') }}
icon: mdi:weather-sunset-up
icon_color: '#F44336'
layout: vertical
tap_action:
action: more-info
entity: sensor.current_prayer
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Fajr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(199, 224, 238, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Fajr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
- type: custom:mushroom-template-card
primary: Dhuhr
secondary: |
{{ states('sensor.islamic_prayer_times_dhuhr_prayer') }}
tap_action:
action: more-info
entity: sensor.current_prayer
icon: mdi:weather-sunny
icon_color: '#FFC107'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Dhuhr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(199, 224, 238, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Dhuhr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
- type: custom:mushroom-template-card
primary: Asr
secondary: |
{{ states('sensor.islamic_prayer_times_asr_prayer') }}
icon: mdi:weather-sunset-down
icon_color: '#9C27B0'
layout: vertical
tap_action:
action: more-info
entity: sensor.current_prayer
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Asr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(199, 224, 238, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Asr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
- type: custom:mushroom-template-card
primary: Maghrib
secondary: |
{{ states('sensor.islamic_prayer_times_maghrib_prayer') }}
icon: mdi:weather-sunset
icon_color: '#FF9800'
layout: vertical
tap_action:
action: more-info
entity: sensor.current_prayer
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Maghrib' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(199, 224, 238, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Maghrib' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
- type: custom:mushroom-template-card
primary: Isha
secondary: |
{{ states('sensor.islamic_prayer_times_isha_prayer') }}
tap_action:
action: more-info
entity: sensor.current_prayer
icon: mdi:weather-night
icon_color: '#673AB7'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Isha' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(199, 224, 238, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Isha' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
card_mod:
style: |
ha-card {
/* Styling of card background */
background: linear-gradient(to bottom right, rgba(95, 158, 160, 0.85) 30%, rgba(173, 216, 230, 0.85) 100%);
}
Any help is appreciated. Jzk
It did help me a lot and also the automation steps you sent. I am stuck on the time not showing correctly and spacing.
I haven’t managed to get the fancy card to work. But if you are interested I have created a much simpler one:
show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.islamic_prayer_times_fajr_prayer
name: Fajr
format: time
icon: mdi:weather-sunset-up
- entity: sensor.islamic_prayer_times_dhuhr_prayer
name: Dhuhr
format: time
icon: mdi:weather-sunny
- entity: sensor.islamic_prayer_times_asr_prayer
name: Asr
format: time
icon: mdi:weather-sunset-down
- entity: sensor.islamic_prayer_times_maghrib_prayer
name: Maghrib
format: time
icon: mdi:weather-sunset
- entity: sensor.islamic_prayer_times_isha_prayer
name: Isha
format: time
icon: mdi:weather-night
state_color: true
title: Prayer Times
`type or paste code here`
1 Like
This works for me. Thank you so much appreciate it. If someone else have any ideas about how to get the timer please let me know. JZK
For the following card,
The yaml code is:
type: custom:stack-in-card
cards:
- type: custom:button-card
variables:
currentview: |
[[[
return window.location.pathname.split('/').slice(-1);
]]]
entity: sensor.islamic_day
show_name: false
show_state: true
color_type: card
card_mod:
style: |
ha-card {
margin-top: 1px;
margin-bottom: 1px;
margin-left: 1px;
margin-right: 10px;
border: skyblue solid 5px !important;
}
styles:
card:
- height: 3em
- align: center
- font-weight: bold
- background-color: ''
- color: orange
- type: custom:layout-card
layout_type: custom:grid
layout:
grid-template-columns: auto 100px
grid-template-rows: auto auto
margin: '-4px 0px -10px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Prayer Times | أوقات الصلاة
secondary: |-
Next Prayer: {{ states('sensor.next_prayer') }} | Starts in {{
states('sensor.time_until_next_prayer_formatted') }}
icon: mdi:mosque
entity: sensor.next_prayer
tap_action:
action: none
hold_action:
action: none
icon_color: blue
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
font-style: italic;
font-variant: small-caps;
}
mushroom-state-info$: |
.container {
--primary-text-color: rgba(255, 255, 255, 0.9); /* White with slight transparency for high legibility */
--secondary-text-color: rgba(255, 235, 59, 0.9); /* A soft amber for a warm contrast */
}
- type: custom:mushroom-template-card
primary: Now is
secondary: '{{ states(''sensor.current_prayer'') }} time'
entity: sensor.current_prayer
tap_action:
action: none
hold_action:
action: none
icon_color: blue
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
ha-card {
background: #A100ff;
box-shadow: none;
font-style: italic;
font-variant: small-caps;
font-weight: bold
}
mushroom-state-info$: |
.container {
--primary-text-color: rgba(255, 255, 255, 0.9); /* White with slight transparency for high legibility */
--secondary-text-color: rgba(0, 255, 206, 0.9); /* A soft amber for a warm contrast */
--card-secondary-font-size: 13px;
align-items: center;
}
- type: custom:timer-bar-card
entities:
- timer.next_prayer_timer
layout: full_row
bar_radius: 5px
bar_height: 20px
bar_width: 70%
bar_foreground: rgba(92, 107, 192, 1)
bar_background: rgba(237, 231, 246, 1)
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Fajr
secondary: |
{{ states('sensor.fajr_prayer_time') }}
icon: mdi:mosque
icon_color: '#Fff600'
layout: vertical
tap_action:
action: more-info
entity: sensor.current_prayer
card_mod:
style:
.: |
ha-card {
font-style: italic;
font-variant: small-caps;
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Fajr' %}
border: 1px outset green; /* Example border color */
background: rgba(161, 0, 255, 0.5) !important;
{% else %}
background: rgba(21,76,121, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Fajr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.primary:after {
content: 'الفجر';
display: flex;
flex-direction: column;
color: skyblue;
}
.container {
--secondary-text-color: rgba(238,238,228, 0.9); /* A soft amber for a warm contrast */
--primary-text-color: orange;
}
- type: custom:mushroom-template-card
primary: Dhuhr
secondary: |
{{ states('sensor.dhuhr_prayer_time') }}
tap_action:
action: more-info
entity: sensor.current_prayer
icon: mdi:mosque-outline
icon_color: '#Ffa800'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Dhuhr' %}
border: 1px outset green; /* Example border color */
background: rgba(161, 0, 255, 0.5) !important;
{% else %}
background: rgba(21,76,121, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Dhuhr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.primary:after {
content: 'الظهر';
display: flex;
flex-direction: column;
color: skyblue;
}
.container {
--secondary-text-color: rgba(238,238,228, 0.9); /* A soft amber for a warm contrast */
--primary-text-color: orange;
}
- type: custom:mushroom-template-card
primary: Asr
secondary: |
{{ states('sensor.asr_prayer_time') }}
icon: mdi:mosque
icon_color: '#2fff00'
layout: vertical
tap_action:
action: more-info
entity: sensor.current_prayer
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Asr' %}
border: 1px outset green; /* Example border color */
background: rgba(161, 0, 255, 0.5) !important;
{% else %}
background: rgba(21,76,121, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Asr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.primary:after {
content: 'العصر';
display: flex;
flex-direction: column;
color: skyblue;
}
.container {
--secondary-text-color: rgba(238,238,228, 0.9); /* A soft amber for a warm contrast */
--primary-text-color: orange;
}
- type: custom:mushroom-template-card
primary: Maghrib
secondary: |
{{ states('sensor.maghrib_prayer_time') }}
icon: mdi:mosque-outline
icon_color: '#00d5ff'
layout: vertical
tap_action:
action: more-info
entity: sensor.current_prayer
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Maghrib' %}
border: 1px outset green; /* Example border color */
background: rgba(161, 0, 255, 0.5) !important;
{% else %}
background: rgba(21,76,121, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Maghrib' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.primary:after {
content: 'المغرب';
display: flex;
flex-direction: column;
color: skyblue;
}
.container {
--secondary-text-color: rgba(238,238,228, 0.9); /* A soft amber for a warm contrast */
--primary-text-color: orange;
- type: custom:mushroom-template-card
primary: Isha
secondary: |
{{ states('sensor.isha_prayer_time') }}
tap_action:
action: more-info
entity: sensor.current_prayer
icon: mdi:mosque
icon_color: '#B6ff00'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Isha' %}
border: 1px outset green; /* Example border color */
background: rgba(161, 0, 255, 0.5) !important;
{% else %}
background: rgba(21,76,121, 0.5) !important;
{% endif %}
width: 75px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Isha' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.primary:after {
content: 'العشاء';
display: flex;
flex-direction: column;
color: skyblue;
}
.container {
--secondary-text-color: rgba(238,238,228, 0.9); /* A soft amber for a warm contrast */
--primary-text-color: orange;
}
card_mod:
style: |
ha-card {
/* Styling of card background */
background: linear-gradient(to bottom right, rgba(95, 158, 160, 0.85, 0.85) 30%, rgba(33,19,13, 0.85) 100%);
}
All credit goes @chintito4ever . Try to scroll up and read his post about all the sensors you need to create the card. There is also a timer helper you need to create.
SA Brothers,
Can anyone share one blueprint for the automation and one for the prayer card ?
This will help a lot of beginners like myself, JAK
Did you create a time_date sensor in your configuration? That might be the issue!
You can create it and add it to your sensors yaml file or to the configuration.
sensor:
- platform: time_date
display_options:
- 'time'
- 'date'
- 'date_time'
- 'date_time_utc'
- 'date_time_iso'
- 'time_date'
- 'time_utc'
Removed “beat” as it is deprecated.
Waalikom salam. Unfortunately, I don’t have a blueprint for the automation. I can share one of my automation for the adhan if that s what you want to see! The prayer card code is listed above.
I forgot to mention to reboot the server after creating the sensors!
My dashboard looks ok on my iPad, however it’s not able to show in entirety on my iPhone. How do I adjust to the change in screen size? A major part of the right side is missing.
Sorry, I could not help with that issue since I am in the same boat as you and I give up for lack of time. It s working great on my pc and Ipad but not on my iphone!
No problem. Appreciate your quick response.
Any idea how do I get rid of the unsightly thin margin lines? I tried fiddling with the margin numbers but that didn’t help.
scroll up and find posts from @chintito4ever and @cob94440 ! I copied their code to enhance mine. Hope this helps you!
Hi.
i have got this problem with new update to 2024.7.3, Beat seams to now be working, how can we solve this?
Invalid config for ‘time_date’ from integration ‘sensor’ at sensor.yaml,
line 9: value must be one of
[‘date’, ‘date_time’, ‘date_time_iso’, ‘date_time_utc’, ‘time’, ‘time_date’, ‘time_utc’]
‘display_options->5’, got ‘beat’
Just remove beat entry (only) from the configuration . Check configuration before rebooting and it should work.