Post your yaml please
nothing specialā¦
type: custom:mushroom-entity-card
entity: scene.good_night
name: Gute Nacht
icon: mdi:weather-night
icon_color: purple
secondary_info: none
icon_type: icon
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.good_night
data:
transition: 2
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 490px !important;
border-radius: 13px !important;
}
Something like this work for you?
Hard to tell as it seems like you are making it for a very different screen size to mine.
type: custom:mushroom-entity-card
entity: scene.good_night
name: Gute Nacht
icon: mdi:weather-night
icon_color: purple
secondary_info: none
icon_type: icon
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.good_night
data:
transition: 2
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
width: 490px !important;
border-radius: 13px !important;
}
.: |
ha-state-icon {
position: absolute;
left: 10px;
}
mushroom-state-info {
position: absolute;
top: 24px;
left: -10px;
}
1 Like
thank you a lot! worked! just tweaked arround with the numbers:
On:
any idea how i change the off-color?
Off:
Dont have scenes so not sure. Does a scene entity have an on/off state? If so something like this should work:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
width: 490px !important;
border-radius: 13px !important;
{% if states('scene.good_night') == 'on' %}
background: rgba(var(--rgb-purple), 0.2) !important;
{% else %}
background: rgba(var(--rgb-blue), 0.2) !important;
{% endif %}
}
.: |
ha-state-icon {
position: absolute;
left: 10px;
{% if states('scene.good_night') == 'on' %}
color: rgba(var(--rgb-purple), 1) !important;
{% else %}
color: rgba(var(--rgb-blue), 1) !important;
{% endif %}
}
mushroom-state-info {
position: absolute;
top: 24px;
left: -10px;
}
For more styling info check my guide:
1 Like
thank you sir! you just safed my weekend. time to redo my homescreen! haha
will definitely check out your guide
2 Likes
Thanks. That is much better. Scales also well on mobile. The only thing is that the background of the left card (EV disconnected etc) has a very slightly different background color vs the the rest of the card
Very nice. Please Share your Code. Thank You.
can anyone help with card-mod Pop ups. when I view them on android app, it does not fit on the screen?
What am I missing here??
tap_action:
action: fire-dom-event
browser_mod:
command: popup
service: browser_mod.popup
target:
device_id:
- 4064f034b49bd0d728645f51df0ec321
- 2615813c7af26d27771116d33cd7399a
title: Lights
data:
dismissable: true
autoclose: false
size: NORMAL
content:
type: custom:auto-entities
filter:
include:
- group: light.total_light_switch_group
state: 'on'
options:
features:
- type: light-brightness
type: tile
vertical: true
color: accent
tap_action:
action: toggle
icon_tap_action:
action: more-info
- group: light.total_light_bulb_group
state: 'on'
options:
features:
- type: light-brightness
type: tile
vertical: true
color: accent
tap_action:
action: toggle
icon_tap_action:
action: more-info
exclude: []
card:
square: false
type: grid
columns: 2
show_empty: true
card_param: cards
sort:
method: friendly_name
reverse: false
numeric: true
ignore_case: false
``TOP BAR STICKY:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
card_mod:
style: |
ha-card {
--chip-icon-size: 23px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:mushroom-template-card
primary: HOME
secondary: ''
icon: mdi:shield-home
icon_color: |-
{% set alarm_status = states(entity) %}
{% if alarm_status == 'armed_away' %}
green
{% elif alarm_status == 'disarmed' %}
disabled
{% elif alarm_status == 'arming' %}
yellow
{% elif alarm_status == 'triggered' %}
red
{% endif %}
entity: alarm_control_panel.home
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
width: 110px;
--spacing: 3px;
padding-bottom: 0px !important;
background: none;
box-shadow: none;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
transition: all 0s;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.menuconsumi
icon: mdi:chart-bar
card_mod:
style: |
ha-card:after {
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
- type: template
entity: input_boolean.menu
icon: mdi:dots-vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Impostazioni
content:
type: vertical-stack
cards:
- type: custom:mushroom-select-card
entity: input_select.tema
layout: horizontal
secondary_info: none
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'Seleziona il tema:'
secondary: ''
icon: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: horizontal
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:white-balance-sunny
layout: vertical
icon_color: >-
{% if is_state('input_select.chiaro_scuro',
'Scuro') %}
white
{% elif is_state('input_select.chiaro_scuro',
'Chiaro') %}
black
{% endif %}
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.chiaro_scuro
data:
option: Chiaro
entity: input_select.chiaro_scuro
card_mod:
style: |
ha-card {
width: 0px;
height: 0px !important;
--spacing: 0px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 23px;
margin-left: 160px;
transition: all 0.5s;
}
mushroom-shape-icon {
{% if is_state('input_select.chiaro_scuro', 'Scuro') %}
--shape-color: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:weather-night
layout: vertical
icon_color: >-
{% if is_state('input_select.chiaro_scuro',
'Scuro') %}
white
{% elif is_state('input_select.chiaro_scuro',
'Chiaro') %}
black
{% endif %}
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.chiaro_scuro
data:
option: Scuro
entity: input_select.chiaro_scuro
card_mod:
style: |
ha-card {
width: 0px;
height: 0px !important;
--spacing: 0px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 23px;
margin-left: 100px;
transition: all 0.5s;
}
mushroom-shape-icon {
{% if is_state('input_select.chiaro_scuro', 'Chiaro') %}
--shape-color: none !important;
{% endif %}
}
card_mod:
style: |
ha-card {
height: 50px;
padding: 0px;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
--mdc-typography-headline6-font-size: 18px;
padding-left: 8px !important;
}
.mdc-top-app-bar__row {
height: var(--mdc-icon-button-size, 36px) !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
position: absolute !important;
right: 0px;
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: 50%;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
:host {
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
}
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-icon-size: 22px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: conditional
conditions:
- entity: input_boolean.menuconsumi
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.cont_acqua_acqua_m3
icon_color: blue
tap_action:
action: more-info
alignment: end
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: entity
entity: sensor.energia
icon: mdi:lightning-bolt
icon_color: yellow
tap_action:
action: more-info
alignment: end
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: group.luci
content: >
{{ expand(states.group.luci) | selectattr('state', 'eq', 'on') |
list | count }}
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.luci
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: group.luci
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:window-open
entity: group.luci
content: >
{{ expand(states.group.luci) | selectattr('state', 'eq', 'on') |
list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Windows Open
content:
type: custom:auto-entities
filter:
include:
- group: group.luci
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: group.luci
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.luci
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
card_mod:
style: |
/* Set margins on notification chips */
ha-card {
margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
transition: all 0s;
}
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 4;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: absolute;
top: 0px;
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
/* Set width to match */
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;
/* Match background to main card */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: 100%;
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.8);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
//box-shadow: var(--ha-card-box-shadow);
box-shadow: 30px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
4 Likes
SECOND CARD:
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.mattia
content_info: none
use_entity_picture: true
tap_action:
action: none
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.giulia
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sarah
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.giulia
icon_type: entity-picture
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.angela
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Elijah
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.angela
icon_type: entity-picture
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.maurizio
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Michaela
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.maurizio
icon_type: entity-picture
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:mushroom-template-card
primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
secondary: >-
{% set condition = state_attr(entity, 'forecast')[0]['conditions']%}
{% set intensity = states('sensor.wupws_preciprate')%}
{% if intensity != 'None' %}
{% set condition = intensity + 'mm' %}
{% endif %}
{{ condition }}
icon: none
entity: weather.ifiugg2
picture: >-
{% set condition = states(entity) %} {% if condition == 'partlycloudy'
and is_state('sun.sun', 'below_horizon') %} {% set condition =
condition + '-night' %} {% endif %} /local/weather_icon/anim/{{
condition }}.svg
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scaleX(-1);
text-align: right;
width: fit-content;
}
.: |
ha-card {
transform: scaleX(-1);
--icon-size: 40px;
--icon-border-radius: 0;
--card-secondary-font-weight: normal;
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 0px !important;
transition: all 0s;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Buonasera, {{user}}!
{% elif (time >= 22) %}
Buonanotte, {{user}}!
{% elif (time >= 12) %}
Ciao, {{user}}!
{% elif (time >= 5) %}
Buongiorno, {{user}}!
{% else %}
Hello, {{user}}
{% endif %}
subtitle: All'interno ci sono {{ states('sensor.temperatura_soffitta')}}Ā°C
alignment: start
card_mod:
style:
mushroom-title-card$: |
/* Style greeting */
.title {
--title-font-size: var(--mush-title-font-size, 25px);
--title-font-weight: var(--mush-subtitle-font-weight, light);
color: var(--primary-text-color) !important;
}
/* Style name */
.subtitle {
--subtitle-font-size: var(--mush-title-font-size, 12px);
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--secondary-text-color) !important;
padding-left: 2px;
}
/* Set spacing around greeting */
.header {
--title-padding: 5px 12px 24px;
--title-spacing: 5px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: House
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: net
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
card_mod:
style: |
ha-card {
/* Set padding of card */
padding: 8px 8px 12px;
/* Move card up to match header card */
margin-top: -20px;
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
5 Likes
Got the same problem and it was driving me wildā¦ But only on my light theme, dark was perfect. Tried all kind of tweaks but in the end i almost gave up. And now i think i found it!
Could you check your theme*.yaml for this typo?
Change car.rd-background-color: to card-background-color:
After that go to developer-tools, Services, Home Assistant Frontend: Reload themes.
See if your problem is solved.
Edit: I will install UI Lovelace Minimalist. The code below will probably not fix the issue.
See if that fix it.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: minmax(0, 1fr)
grid-template-rows: auto
grid-template-areas: |
"a b"
cards:
- type: horizontal-stack
view_layout:
grid-area: a
cards:
- type: custom:mushroom-template-card
primary: |
{{ states("sensor.myenergi_zappi_plug_status") }}
icon: >
{% set battery_level = (states('sensor.t_616_rz_state_of_charge')
| int / 10) | round(0) | int * 10 %}
{% if is_state('sensor.myenergi_zappi_status', 'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set bl = states("sensor.t_616_rz_state_of_charge") | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
secondary: >
{{ states("sensor.myenergi_zappi_status") }} {{
states("sensor.myenergi_zappi_power_ct_internal_load") }}W
entity: sensor.myenergi_zappi_plug_status
layout: horizontal
fill_container: true
tap_action:
action: more-info
card_mod:
style: |
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
padding: 0px !important;
margin: 0px !important;
border: none;
background: none !important;
}
ha-state-icon:after {
content: "{{states('sensor.t_616_rz_state_of_charge')}}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: {% if is_state('switch.ev_smart_charging_ev_connected', 'off') %}
rgb(var(--rgb-red)) {% else %} rgb(var(--rgb-green)) {% endif %};
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
font-size: 8px;
}
- type: horizontal-stack
view_layout:
grid-area: b
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:play
entity: button.ev_smart_charging_manually_start_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
background: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:stop
entity: button.ev_smart_charging_manually_stop_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
background: none;
}
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
}
Weāre almost thereā¦loading 
17 Likes
What does it show when you tap on the chart icon? The one on the top bar.
Anybody got an Idea how to only display the icon with the badge (template card) (with or without the background but without the large space on the right).
If i dont have any primary or secondard text the chip card, it only uses the needed space for the icon. with the normal mushroom template card it still reserves the full space.
Did you find a solution yet? I have the same feeling 
Top is Mushroom, bottom is Tile
Any idea what the standard Tile font / icon settings are?
You can do it with card mod.
With shape background:
Code
card_mod:
style: |
ha-card {
width: fit-content;
}
Without shape background:
Code
card_mod:
style: |
ha-card {
width: fit-content;
}
mushroom-shape-icon {
--shape-color: none !important;
}
No card background:
Code
card_mod:
style: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
No card background or shape background:
Code
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
And last one, no card background, shape background, or badge background:
Code
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
mushroom-badge-icon {
--main-color: none !important;
}
7 Likes
Not a different font. Different font weight and color.
You can change the font weight and color of the tile card like this (to match mushroom default):
Tile to Match Mushroom
card_mod:
style:
ha-tile-info$: |
.primary {
font-weight: bold !important;
color: rgba(var(--rgb-primary-text-color), 1) !important;
}
.secondary {
font-weight: bold !important;
color: rgba(var(--rgb-secondary-text-color), 1) !important;
}
And to do the opposite:
Mushroom Match Tile
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 400 !important;
color: rgba(var(--rgb-primary-text-color), 1) !important;
}
.secondary {
font-weight: 400 !important;
color: rgba(var(--rgb-primary-text-color), 1) !important;
}
For the icons the only real difference tends to be the icon size and color as well. Both can be changed like this (note that i have chosen blue as an example, can be any color, also please note any 0.2 or 1 in the rgba color, it shows the transparency of the color so it is important!):
Tile Match Mushroom
card_mod:
style:
ha-tile-icon$: |
:host {
--mdc-icon-size: 20px !important;
}
ha-icon {
color: rgba(20, 160, 255, 1) !important;
}
.shape::before {
background-color: rgba(20, 160, 255, 1) !important;
}
And the opposite:
Mushroom Match Tile
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(var(--rgb-blue), 0.2) !important;
}
.: |
ha-state-icon {
color: rgba(var(--rgb-blue), 1);
--icon-symbol-size: 25px;
}
EDIT: just to add if the modification for the icon doesnt work for the tile card try and replace ha-icon with ha-svg-icon unfortunately the tiles use a mix depending on whether the icon is one that changes based on the state or not (so open or closed blinds etc.)
8 Likes