You can format the date/time with .strftime() like this:
{{ now().strftime("%A, %-d %B %Y") }}
Format code reference:
https://strftime.org/
Made it… 
you are really Genius.
Thank you So much… you are the best
1 Like
You can change the Mushroom Climate Buttons like this:
type: custom:mushroom-climate-card
entity: climate.air_conditioner
hvac_modes:
- 'off'
- heat
- heat_cool
show_temperature_control: true
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-state-info$: |
.primary:after {
content: " | {{ states('sensor.lounge_sensor_humidity') | round(1) }} %";
}
mushroom-climate-hvac-modes-control $ mushroom-button:nth-child(1) $: |
.button {
--card-mod-icon: mdi:mushroom;
}
.: |
mushroom-climate-hvac-modes-control {
transform: scalex(-1);
}
Note that the :nth-child() numbering is reversed because we have reversed the buttons.
2 Likes
Title and entity:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Study
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Bens PC
secondary: |-
{{ states((entity)) | title }} {% if is_state((entity), 'on') %}
{% if (now() - states('sensor.winterfell_lastactive')|as_datetime).total_seconds() < 10 %}
- Active
{% else %}
- Inactive
{% endif %}
{% endif %}
icon: mdi:microsoft-windows
icon_color: |-
{% if is_state((entity), 'off') %}
disabled
{% else %}
blue
{% endif %}
badge_icon: >-
{% if (now() -
states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
10 %}
mdi:run
{% else %}
''
{% endif %}
badge_color: >-
{% if (now() -
states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
10 %}
green
{% else %}
''
{% endif %}
entity: switch.winterfell
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.985);
transition: 0s;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.winterfell_lock
icon_color: white
icon: mdi:lock
content_info: none
tap_action:
action: call-service
service: button.press
target:
entity_id: button.winterfell_lock
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.winterfell_sleep
icon_color: white
icon: mdi:power-sleep
content_info: none
tap_action:
action: call-service
confirmation:
text: Are you sure you want to Sleep?
service: button.press
target:
entity_id: button.winterfell_sleep
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.winterfell_restart
icon_color: white
icon: mdi:restart
content_info: none
tap_action:
action: call-service
confirmation:
text: Are you sure you want to Restart?
service: button.press
target:
entity_id: button.winterfell_restart
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.winterfell_shutdown
icon_color: white
icon: mdi:power
content_info: none
tap_action:
action: call-service
confirmation:
text: Are you sure you want to Shutdown?
service: button.press
target:
entity_id: button.winterfell_shutdown
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
CPU/RAM/GPU:
type: conditional
conditions:
- entity: sensor.winterfell_cpuload
state_not: unavailable
card:
type: vertical-stack
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.winterfell_cpuload
color: rgb(76, 175, 80)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.winterfell_cpuload
primary_info: name
secondary_info: state
name: Core
icon: mdi:cpu-64-bit
icon_color: green
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.winterfell_memoryusage
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.winterfell_memoryusage
primary_info: name
secondary_info: state
name: Memory
icon_color: blue
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.winterfell_gpuload
color: rgb(233, 30, 99)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.winterfell_gpuload
primary_info: name
secondary_info: state
name: GPU
icon: mdi:expansion-card
icon_color: pink
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
Harddrives:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: sensor.winterfell_cpuload
state_not: unavailable
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:sd
icon_color: red
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: C Drive
secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
multiline_secondary: false
entity: sensor.winterfell_storage_c
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:harddisk
icon_color: teal
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: D Drive
secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
multiline_secondary: false
entity: sensor.winterfell_storage_d
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:harddisk
icon_color: orange
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: E Drive
secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
multiline_secondary: false
entity: sensor.winterfell_storage_e
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
Just put the --icon-animation command in a condition:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: charge 3s steps(1) infinite;' if is_state(config.entity, 'charging') }}
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
Yes. All good
1 Like
What you are using for shutdown restart sleep and lock? HASS Agent?
not an oven although you could try the same idea as this Post where they’d taken an image of the washing machine and over laid the controls and info
Part 3 of my manual is also finished.
You can find 12 Useful automation ideas and how to text on this page :
So 1 manual is left before I finsh my Modern Dashboard.
2 Likes
—→ cimbom 
1 Like
Thank you so much, you are the best!
1 Like
Can I somehow get Mushroom cards to use CSS attributes as icon color? I have a theme that changes drasticly depending on if its a dark och light theme
Thanks very much. Sorry, does this go into my card template or into config yaml?
1 Like
It can go in your Template Card/Chip or wherever else a template can be used.
type: custom:mushroom-template-card
primary: '{{ now().strftime("%A, %-d %B %Y") }}'
icon: mdi:clock
icon_color: blue
@rhysb Any idea why this is not working with a custom:button-card? The goal is to convert your motion sensor animation to a button card because i’m not using Mushroom.
type: custom:button-card
icon: mdi:motion-sensor
name: Motion test
styles:
img_cell:
- animation: motion 2s linear infinite
icon:
- color: var(--blue-color)
- animation: clip 2s linear infinite
- transform-origin: 50% 85%
- height: 36px
- width: 36px
- padding: 8px
- background-color: "rgba(var(--color-blue),0.2)"
- border-radius: 50%
extra_styles: |
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
hello is there any way to reduce the transparency behind the icon ?
Not sure how? I can’t replace the icon with the code. It just goes blank?
{% set state=states(entity) %}
{% if state =='readyForCharging' %}
mdi:ev-station
{% elif state =='charging' %}
mdi:battery-alert
{% elif state =='notReadyForCharging' %}
mdi:battery-alert
{% else %}
mdi:battery-high
{% endif %}