Post a screenshot.
Try clearing your browser cache.
I use stack-in-card instead of horizontal-stack:
type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.ben
layout: vertical
icon_type: entity-picture
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bens_iphone_battery_level
content_info: none
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: entity
entity: sensor.bens_iphone_connection_type
content_info: none
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
margin-top: -5%;
margin-bottom: 2%;
}
I used your template, but stil the borders are visible… maybe I just have to live with it 
Odd, should work… Did you try as @rhsyb suggested and clearing your browser cache?
@rhysb how would you go about removing the “Title” from the card and adding a little more asthetically pleasing X say to the top right hand of the map?
So, instead of the current white title bar with David in it, remove that totally and have a circled X level with the + but on the right of the card? Is that possible?
1 Like
Yes, i cleared my browser cache.
is a popup?
I apologize for interrupting you, @rhysb, and revisiting this topic. I am unsure if my question was answered, but I have been unable to resolve a few issues with the Album Art feature of your Mushroom Media Player. Specifically, I have noticed that the progress bar only appears when the player is paused, and the linear gradient appears too bright. It would be appreciated if the gradient could be made darker.
Playing:
Paused:
Hello,
Can someone tell me if I can use this Mushroom drop down for links?
I want to be able to have a drop down that will navigate me to different URLs
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