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.