Sorry I didn’t get that. Which code do you mean by 154 ?
Sorry, but where do i put this code?
It’s not showing the frog images.
I want to use the wind direction map. I have a sensor sensor.wind_direction. The sensor shows the degree. Code but it doesn’t work
please help
type: custom:mushroom-template-card
entities:
- sensor.wind_direction
card_mod:
style: |
ha-card {
background-color: transparent;
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
}
content_template: |
<ha-icon
icon="mdi:arrow-up-bold"
style="transform: rotate({{ states['sensor.wind_direction'].state }}deg);"
></ha-icon>
Found already what the issue is. In which config file i have to configure the template?
Hello everyone!
I am almost happy with my 3D printing front end.
Unfortunately the 2 buttons for pause and stop are not working. Can anyone tell me what I have done wrong?
Code
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 4
cards:
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_1'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_1','empty') == false %}
{{ state_attr('sensor.ams_tray_1','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_1
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_1','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_2'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_2','empty') == false %}
{{ state_attr('sensor.ams_tray_2','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_2
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_2','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_3'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_3','empty') == false %}
{{ state_attr('sensor.ams_tray_3','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_3
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_3','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(''sensor.ams_tray_4'',''type'') }}'
secondary: ''
icon: mdi:circle
tap_action:
action: more-info
hold_action:
action: more-info
icon_color: |-
{% if state_attr('sensor.ams_tray_4','empty') == false %}
{{ state_attr('sensor.ams_tray_4','color') }}
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
entity: sensor.ams_tray_4
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 50px;
{% if state_attr('sensor.ams_tray_4','active') == true %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.3);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
Code
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bambulab X1C
secondary: |-
{% set status = states('sensor.y1_print_status') %}
{% if is_state('sensor.y1_print_status','running') %}
{{ (states("sensor.y1_print_progress") |float ) | round(0) }}% |
{% if status == 'finish' %} Fertig {% endif %}
{% if status == 'running' %} Drucken {% endif %}
{% if status == 'idle' %} Standby {% endif %}
{% if status == 'pause' %} Pause {% endif %}
{% if status == 'failed' %} Fehler {% endif %}
{% if status == 'prepair' %} Vorbereiten {% endif %}
{% else %}
{% if status == 'finish' %} Fertig {% endif %}
{% if status == 'running' %} Drucken {% endif %}
{% if status == 'idle' %} Standby {% endif %}
{% if status == 'pause' %} Pause {% endif %}
{% if status == 'failed' %} Fehler {% endif %}
{% if status == 'prepair' %} Vorbereiten {% endif %}
{% endif %}
icon: mdi:printer-3d-nozzle
icon_color: |-
{% if is_state('sensor.y1_print_status','running') %}
blue
{% endif %}
badge_color: red
badge_icon: null
entity: light.y1_chamber_light
collapsible_controls: true
tap_action:
action: none
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
{% if is_state('sensor.y1_print_status','running') %}
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.y1_print_progress') }}% 0%,
var(--card-background-color) 0% 100%);
{% endif %}
z-index: 1;
}
.shape:after {
{% if is_state('sensor.y1_print_status','running') %}
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
{% endif %}
}
.: |
mushroom-state-info {
z-index: 1;
}
mushroom-badge-icon {
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.y1_pause_printing
icon_color: white
icon: mdi:pause
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-grey' }}), 0.7);
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.y1_stop_printing
icon_color: white
icon: mdi:alert-octagon
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' }}), 1);
}
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;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.y1_nozzle_temperature
icon: mdi:printer-3d-nozzle-heat
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-grey), 0.2)
}
- type: entity
entity: sensor.y1_bed_temperature
icon: mdi:heating-coil
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-grey), 0.2)
}
- type: template
content: >-
{% set ct = states('sensor.y1_remaining_time') | int %}
{{ (ct | float // 60) | round(0) }}h {{ (ct | float % 60) | round(0)
}}m
icon: mdi:alarm
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-grey), 0.2)
}
Try:
type: custom:mushroom-template-card
entity: sensor.wind_direction
icon: mdi:arrow-up-bold
card_mod:
style: |
ha-card {
background-color: transparent;
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
rotate: 90
}
ha-state-icon {
transform: rotate({{ states['sensor.wind_direction'].state }}deg);
}
Has anyone tried to restyle the basic more-info windows using card_mod to look more like mushroom? Can you please share your code?
bottom-nav:
dynamic or static menu?
You need to use conditions for that.
For example in my code at line 153
You can use it like this
secondary: |
{% if is_state('weather.forecast_home', 'partlycloudy') %}
deels bewolkt
{% elif is_state('weather.forecast_home', 'sunny') %}
zonnig
{% else %}
none
{% endif %}
And the result will look like this
and of course there are some other ways but this is the easiest.
Sorry, I am confused. I wanted the person card as in the following pictures:
Maybe you have imbedded in the input_boolean.notififiche.
Thank you again 
1 Like
The location sensor only refreshes at 4 AM, after that it should work. All three template sensors should be added to configuration.yaml.
Not sure what you mean
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.pupetti
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: custom:mushroom-entity-card
entity: person.pupetti
layout: horizontal
icon_type: entity-picture
primary_info: state
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
/* Style shadow ring around person avatar */
box-shadow: 0px 0px 4px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 12px);
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
/* Increase icon size */
--icon-size: 72px;
/* Center card */
margin: auto;
width: fit-content;
/* Add padding to bottom of card */
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
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.entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
/* Match styling to Mushroom Title */
--mush-card-primary-font-size: var(--mush-title-font-size, 24px);
--mush-card-primary-font-weight: var(--mush-title-font-weight, normal);
--mush-card-primary-line-height: var(--ush-title-line-height, 1.2);
--mush-card-secondary-font-size: var(--mush-title-font-size, 16px);
--mush-card-secondary-font-weight: var(--mush-title-font-weight, normal);
--mush-card-secondary-line-height: var(--ush-title-line-height, 1.2);
}
- type: history-graph
entities:
- entity: person.pupetti
name: ' '
hours_to_show: 24
title: Timeline
card_mod:
style:
$: |
.card-header {
/* Style timeline title */
padding: 0px 24px !important;
font-size: var(--mush-card-primary-font-size, 14px) !important;
font-weight: var(--mush-card-primary-font-weight, bold) !important;
line-height: var(--mush-card-primary-line-height, 1.5) !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-box-shadow: none;
--ha-card-background: none;
--ha-card-border-width: 0;
user-select: none;
}
.content {
/* Add padding on right */
padding: 0px 24px !important;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.fede_l_16_average_active_pace_3
state_not: '0'
card:
type: custom:mushroom-template-card
primary: >-
{{ states(entity) }} {{ state_attr(entity,
'unit_of_measurement') }}
secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
icon: mdi:map-marker-path
entity: sensor.fede_l_16_distance_3
layout: vertical
icon_color: purple
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
/* Add destination details */
content: "\Ato Home";
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.fede_l_16_geocoded_location_3
state_not: '0'
card:
type: custom:mushroom-template-card
primary: >-
{{ states(entity) }} {{ state_attr(entity,
'unit_of_measurement') }}
secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
icon: mdi:map-marker-path
entity: sensor.fede_l_16_distance_3
layout: vertical
icon_color: purple
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
/* Add destination details */
content: "\Ato Work";
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: >
{{ 'charging' if
is_state('sensor.fede_l_16_battery_state', 'on' ) else
'discharging' }}
icon: >
{% set battery_level = (states(entity) | int / 10) |
round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
entity: sensor.fede_l_16_battery_level_3
layout: vertical
badge_icon: >-
{% if is_state('sensor.fede_l_16_battery_state_3', 'on')
%}
mdi:lightning-bolt
{% elif states(entity) | int < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
/* Add back icon shape */
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
ha-icon {
/* Icon charging animation */
{{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.rhys_phone_is_charging', 'on') }}
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { 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% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { 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% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { 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% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: conditional
conditions:
- entity: sensor.fede_l_16_connection_type_3
state_not: <not connected>
card:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.fede_l_16_connection_type_3'') }}'
secondary: >-
{% set signal_level = states(entity) | int %} {% if
signal_level != -1 %}
{{ signal_level }} dBm
{% endif %}
icon: >-
{% set signal_level = states(entity) | int | abs %} {%
if signal_level > 90 %}
mdi:wifi-strength-outline
{% elif signal_level > 80 %}
mdi:wifi-strength-1
{% elif signal_level > 70 %}
mdi:wifi-strength-2
{% elif signal_level > 60 %}
mdi:wifi-strength-3
{% elif signal_level > 1 %}
mdi:wifi-strength-4
{% else %}
mdi:wifi-strength-off
{% endif %}
entity: sensor.fede_l_16_connection_type
layout: vertical
fill_container: false
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none;
hold_action:
action: call-service
service: notify.mobile_app_fede_l_16
data:
message: Ringing phone...
title: Find Phone
data:
ttl: 0
importance: high
priority: high
tag: Find
channel: alarm_stream
icon: mdi:target
icon_color: red
content: Find Phone
alignment: center
card_mod:
style: |
ha-card {
/* Style Chip like Mushroom button */
--chip-background: rgba(var(--rgb-red), 0.2);
--chip-border-radius: var(--mush-control-border-radius, 12px);
--chip-height: var(--mush-control-height, 42px);
--chip-box-shadow: none;
user-select: none;
}
ha-card:active {
/* Add effect to give feedback on button press */
--chip-background: rgba(var(--rgb-red), 0.4);
}
- type: map
entities:
- entity: person.pupetti
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);
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 */
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 12px 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;
/* Adjust spacing for border */
bottom: calc(2 * var(--ha-card-border-width, 1px) + 56px);
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.leaflet-container:after {
/* Fade out map at top */
content: "";
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to top, transparent 65%, var(--card-background-color));
}
ha-icon-button $ mwc-icon-button $: |
button {
/* Size center button to match Chip */
height: var(--mush-chip-height, 36px) !important;
width: var(--mush-chip-height, 36px) !important;
--mdc-icon-size: 22px;
}
.: |
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: 12px;
left: 12px !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: |
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
}
.content {
/* Remove extra bottom border */
margin: -18px -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;
}
sorry i did not understand before, anyway remember to click on the card so you can see my modify…
1 Like
@hiddevanbrussel in the meantime, set the location sensor manually to state: city
then at 4 AM it will refresh again.
Okay, I tried numerous configs of code.
But I cant get this: 
To be transparent like this:
I used this code… It works for the weather, but not for the chips. What am I doing wrong?
- type: custom:weather-card
style: |
ha-card {background: transparent;
border-style: none;
border: 0px;
box-shadow: none;
background: rgba(50,50,50,0.3);}
entity: weather.forecast_home
- type: horizontal-stack
entity: person.amy
cards:
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.living_room_2
use_light_color: true
name: Living
content_info: name
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
Thank for the tip. It works.
have a look at the guide in my profile. but essentially you need to target each chip. each chip is basically its own card.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_temperature_humidity_temperature
icon_color: |-
{% if is_state('climate.master_bedroom', 'heat') %}
orange
{% else %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
- type: template
icon: mdi:thermometer
card_mod:
style: |
ha-card {
background: none !important;
}
you can also do it globally for the chip card by changing the variable color instead:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_temperature_humidity_temperature
icon_color: |-
{% if is_state('climate.master_bedroom', 'heat') %}
orange
{% else %}
blue
{% endif %}
- type: template
icon: mdi:thermometer
card_mod:
style: |
ha-card {
--chip-background: none !important;
}
Please do learn how to format your code. When you have blocks of code like i have above, put it on its own line and only then press the code block button. That is different from inline code which you have used. 
Difference between using:
code
And code
1 Like
maybe a better question for the main card mod topic as you arent modifying the mushroom card, but are trying to make the more info dialog look like mushroom using card mod.
but my 2 cents. i wouldnt bother trying to modify the more-info dialog unless you absolutely have no other option. i would just make a new card with mushroom elements and maybe a mini graph or apex graph and put them in a browser mod popup instead.
1 Like
could be that their z-index is not correct? so try and maybe set their z-index to 1 like this and maybe you can then press them?
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
z-index: 1;
}
1 Like