Is it possible to have this display as a card and not show just as text on the background?
add:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
to your internal stack in card before the apex chart and mushroom template card.
Any context please? what code do you have? what card is this?
an image is not much to go by…
What code do you have right now?
type: custom:mushroom-title-card
title: 3D Printer
alignment: center
title_tap_action:
action: url
url_path: http://192.168.3.11:4408
subtitle: |
{{ states('sensor.creality_current_print_state') | title }}
Edit: The desired look is the below. The below image is a different card though, I like mushroom-title-card as I can make the title have a clickable action. Is it possible to have it look similar to below?
Just stick it in a stack in card 
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: 3D Printer
alignment: center
title_tap_action:
action: url
url_path: http://192.168.3.11:4408
subtitle: |
{{ states('sensor.creality_current_print_state') | title }}
That’s amazing! thanks so much!!
Thank you!
you could also use this card for 3D-printers:
ha-threedy-card
here is how it looks like:
and my code:
type: custom:vertical-stack-in-card
cards:
- type: custom:threedy-card
base_entity: sensor.octoprint
use_mqtt: true
camera_entity: camera.octoprint_camera
monitored:
- Status
- FileName
- ETA
- Elapsed
- Hotend
- Bed
- Remaining
sensors:
FileName:
name: FileName
entity: sensor.octoprint_print_file
light_entity: switch.octoprint_led_switch
printer_type: I3
name: Neptune 3 Pro
scale: 0.5
round_time: false
round_temperature: false
temperature_unit: C
power_entity: switch.shellyplug_s_7c87ceb4a957
use_24hr: true
always_show: false
theme: Neumorphic
- type: conditional
condition: or
conditions:
- entity: sensor.octoprint_print_status
state_not: Offline after error
- entity: sensor.octoprint_print_status
state_not: Operational
- entity: sensor.octoprint_print_status
state_not: unavailable
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Pause
secondary: null
entity: switch.octoprint_pause_print
icon: mdi:play-pause
icon_color: null
tap_action:
action: toggle
fill_container: true
card_mod:
style: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
:host {
--mush-icon-border-radius: 12px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-template-card
primary: Stop
secondary: null
entity: button.octoprint_emergency_stop
tap_action:
action: button
icon: mdi:stop
icon_color: orange
fill_container: true
card_mod:
style: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
:host {
--mush-icon-border-radius: 12px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
- type: custom:mushroom-template-card
primary: Cancel
secondary: null
entity: button.octoprint_cancel_print
tap_action:
action: button
icon: mdi:cancel
icon_color: orange
name: Cancel
fill_container: true
card_mod:
style: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
:host {
--mush-icon-border-radius: 12px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
1 Like
I’d love to see the code for this card. It looks very neat.
1 Like
Yes of course, i add and a chip card also for ‘More Info’ dialog window.
Any intervention to make the card better is welcome.
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Arch Lamp
secondary: '{{states(''light.your_light'') |capitalize }}'
icon: mdi:lamp
entity: light.your_light'
icon_color: '{{ state_attr(''light.your_light'', ''rgb_color'') }}'
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: start;
padding-bottom: 10px;
}
.secondary {
font-weight: 400 !important;
mushroom-shape-icon$: |
.shape {
margin-right: 140px;
margin-top: 20px;
--shape-color: none !important;
--icon-size: 30px;
}
.: |
ha-card {
height: 110px !important;
width: 200px;
--card-secondary-font-size: 13px;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: light.your_light
state: 'on'
card:
type: custom:mushroom-template-card
icon: none
entity: light.your_light
layout: vertical
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
primary: ''
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 35px;
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ (state_attr(config.entity,'brightness') | int / 255 * 100)| round(0) }}% 0%,
var(--card-background-color) 0% 100%);
--icon-symbol-size: 21px;
--shape-color: none !important;
}
.shape:after {
/* Add back icon shape */
content: "";
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
content: "{{ (state_attr('light.your_light', 'brightness') | int / 255 * 100)| round(0) }}%";
font-weight: light;
font-size: 10px;
}
.: |
ha-card {
/* Center card on row */
width: fit-content;
left: 40px;
top: 5px;
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: conditional
conditions:
- entity: light.your_light
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.your_light
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
icon: mdi:dots-vertical
content_info: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
margin: 5px 0px 0px 50px;
width: 44px;
border-radius: 100px !important;
--chip-border-width: 0px;
}
card_mod:
style: |
ha-card {
/* Center card on row */
width: 200px;
}
6 Likes
Very, very nice, I am also interested in your finished code, please post 
Thanks for the reminder!
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Next Rubbish Collection
secondary: '{{ states("input_select.next_rubbish_collection_type") }} this Friday'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
#margin-top: -5px;
#margin-bottom: -5px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:trash-can
icon_color: >-
{% if is_state('input_select.next_rubbish_collection_type',
'Rubbish & Garden') %}
red
{% elif is_state('input_select.next_rubbish_collection_type',
'Recycling & Glass') %}
grey
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}red{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}), 0.2) !important;
border: none;
box-shadow: none;
top:5px;
}
ha-card:after {
content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}done{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}close{% endif %}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}red{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:trash-can
icon_color: >-
{% if is_state('input_select.next_rubbish_collection_type',
'Rubbish & Garden') %}
green
{% elif is_state('input_select.next_rubbish_collection_type',
'Recycling & Glass') %}
grey
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}green{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}), 0.2) !important;
border: none;
box-shadow: none;
top:5px;
}
ha-card:after {
content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}done{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}close{% endif %}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}green{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:trash-can
icon_color: >-
{% if is_state('input_select.next_rubbish_collection_type',
'Rubbish & Garden') %}
grey
{% elif is_state('input_select.next_rubbish_collection_type',
'Recycling & Glass') %}
yellow
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}yellow{% endif %}), 0.2) !important;
border: none;
box-shadow: none;
top:5px;
}
ha-card:after {
content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}close{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}done{% endif %}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}yellow{% endif %}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
- type: template
content: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:bottle-wine
icon_color: >-
{% if is_state('input_select.next_rubbish_collection_type',
'Rubbish & Garden') %}
grey
{% elif is_state('input_select.next_rubbish_collection_type',
'Recycling & Glass') %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}blue{% endif %}), 0.2) !important;
border: none;
box-shadow: none;
top:5px;
}
ha-card:after {
content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}close{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}done{% endif %}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}blue{% endif %}));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
font-family: 'Material Icons';
}
alignment: end
card_mod:
style: |
ha-card {
top: 10px;
right: 10px;
}
12 Likes
thankyou, and will do. I’ll test this out later today. Can you explain the difference between the two methods, i have not seen the host function before?
With the help of you and my son, I’ve been introduced to coding/yaml behind HA and I’ve now got a light counter and date displayed on my Mushroom card 
2 Likes
Very happy to hear it! if you need any help feel free to message me directly. and if you want, check out my guide on css modifications with card mod on Mushroom Cards here:
Thanks for this, this is handy! I’ll keep this card in mind.
Here is where I landed with the mushroom cards
2 Likes
hey can you share tis code or media card ?