Has the weather part been working fine for you @rhysb ?
I am seeing a weird behavior on my end:
however, the weather says otherwise:
anyone knows how i can make that graph-card not look cut off? like having a little fade in effect on it?
Hey friends! I was wondering if someone could help me - here’s what I’m trying to do.
I’d like to use mushroom cards to display severe weather information and do it in two ways:
-
I’d like to display severe weather information from templates I’ve built. I’d like to use the attributes from the severe weather watch or warning statements to change the icon and color. For example: when a tornado watch is issued, I want the box to turn red and the icon to be a tornado.
-
I’d like to prioritize certain watches and warnings over others. So, for example, if my area had a thunderstorm warning and tornado warning at the same time, I’d like for it to prioritize the tornado warning. Is there a way to have a hierarchy or use if/contains functions I could use?
I appreciate any help!
Perhaps something like this:
Mushroom Chip Map Popup
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.rhys
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rhys
content:
type: vertical-stack
cards:
- type: map
entities:
- entity: person.rhys
dark_mode: false
hours_to_show: 24
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
fill: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
#display: none;
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 8px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 8px;
left: 8px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
16 Likes
These mushroom cards are great - so much better than defaults
Currently I use the subtitle field to display today’s calendar events that I get from a local json endpoint (I have a separate python script that fetches the items from several calendars and processes them into date and time order).
Json example:
{"todays_events": [{"dt_start": "2023-04-01 07:45:00+01:00", "dt_end": "2023-04-02 10:00:00+01:00", "who": "Person 1", "start_date": "01/04/2023", "start_time": "07:45:00", "end_date": "02/04/2023", "end_time": "10:00:00", "summary": "Test Event 1"}
Mushroom card subtitle
subtitle: >-
{% for calendar_item in
state_attr('sensor.calendar_data','todays_events')
%}{{calendar_item.who + " - " + calendar_item.summary + " " +
calendar_item.start_time}}{% endfor%}
I’d love to instead display each calendar item in a chip card at the top and use the “who” key to change the colour of the chip card for ease of identification. Is there a way to generate these chip cards dynamically?
Using rhysb his welcome card (godly card!)
For some reason i cant get the number of weather next to the cloud. 
Anyone know how to?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.laurens
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.adna
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.jax
content_info: none
use_entity_picture: true
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.jax_home_not_home
data: {}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.gast
content_info: none
use_entity_picture: true
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.gast_home_not_home
data: {}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: custom:weather-card
entity: weather.buienradar
details: false
current: true
forecast: false
card_mod:
style:
.: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 5px !important;
}
.current{
font-size: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Goedeavond,
{% elif (time >= 12) %}
Goedemiddag,
{% elif (time >= 5) %}
Goedemorgen,
{% else %}
Welcome,
{% endif %}
subtitle: |
{{ user }}!
alignment: start
card_mod:
style:
mushroom-title-card$: |
/* Style greeting */
.title {
--title-font-size: var(--mush-title-font-size, 16px);
--title-font-weight: var(--mush-subtitle-font-weight, light);
color: var(--secondary-text-color) !important;
}
/* Style name */
.subtitle {
--subtitle-font-size: var(--mush-title-font-size, 24px);
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--primary-text-color) !important;
padding-left: 12px;
}
/* Set spacing around greeting */
.header {
--title-padding: 0px 12px 24px;
--title-spacing: 8px;
}
2 Likes
Here you go.
Mushroom Horizontal Graph:
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.family_room_sensor_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.family_room_sensor_humidity
name: Temperature
color: var(--blue-color)
height: 60
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
32 Likes
Yes, weather is fine for me. I have my own weather station…
Have a look here:
1 Like
someone by any chance knows how to template a friendly_name?
something like '{{entity('friendly_name')}}'
Try {{ state_attr(entity, 'friendly_name') | title }}
The title part capitalizes the first letter in the name, you can use that or not.
trying to use this as a secondary: on a mushroom-template-card, however i get “bad indentation of a mapping entry (6:32)” in the editor. so i guess that one doesn´t work
If you’re doing it in YAML, try it like this. It works for me.
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}
1 Like
there we go, thanks!
I can see you have your cats on dashboard. What kind of device you are using to track them?
Surepetflap.
I don’t really know where they are. Just if they are inside or outside.
Is it possible to template the icon element of a mushroom slider? I want to change the icon & colours, based on the status of another entity, but have failed miserabely looking at the examples on this thread.
Any help/ direection is appreciated!
Is it possible to change icon color of the cover card?
icon_color:
Doesn’t seems to work.
Have a look here:
1 Like
What card are you wanting to do this with?