Sorry! But thanks @dimitri.landerloos 
But, to learn from it: what is it , what makes the icon centered?
So I can reuse it?
For the same card i already provided you, or for an entirely new card?
Current Card
type: custom:mushroom-template-card
primary: Test
icon: mdi:fountain
icon_color: amber
entity: light.lounge_corner_lamp
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {% if states('sensor.washing_machine_washer_job_state') != 'none' %} {{(((((as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) - (as_timestamp(now()) - (as_timestamp(states('input_datetime.washing_machine_start_time'))))) / (as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) * 100) | round(0)}}% {% else %} 100% {% endif %} 0%, var(--card-background-color) 0% 100%);
}
.: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
mushroom-shape-icon:after {
content: '24';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
background-color: rgba(var(--rgb-amber), 0.5);
border-radius: 50%;
}
@keyframes fountain {
0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
New Card
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:fountain
entity: light.lounge_corner_lamp
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
@keyframes fountain {
0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
Its just using layout: vertical in the template cards. But things needed moving around after that. Its just playing around with the values in these sections until it looks the way it should:
.: |
ha-card {
top: -118px;
background: none !important;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
top: -183px;
right: 10px;
Its never easy to overlap cards, so its always a bit of playing around until it looks right.
Thank you. And yes, I already tried the vertical layout of course, and next to that ā¦ I already concluded that it is about playing with the values, but I couldnāt find which one(s) 
Thanks for pointing out, Iāll go and play 
How did you clear the text? What did you write In the script to do so?
@image969 I will answer here but see below note. This is two step process because what needs to be done is:
- Erase the data on the Vizio TV search screen
- Erase the content in the Home Assistant search box
For step (1), I send the ābackspaceā command via REST for every character that is in the Home Assistant search box. āBackspaceā is codeset 0, code 8. For step (2) I set the Home Assistant search box to a blank.
clear_vizio_search:
alias: Clear Vizio Search
sequence:
- repeat:
count: '{{ states(''input_text.vizio_search'') | length }}'
sequence:
- service: rest_command.vizio_processkey
data:
ip: 192.168.1.232
port: '7345'
auth: XXXXXXXX
codeset: '0'
code: 8
- service: input_text.set_value
data:
value: ' '
target:
entity_id: input_text.vizio_search
mode: single
icon: mdi:trash-can
NOTE: Getting a bit off topic for Mushroom. If you have future questions perhaps post here:
I appreciate the help, and I feel like I may have over complicated my last question. I didnāt realize your coding was specific to Vizio.
My goal is specifically having a visible text input on a mushroom card which you gave me and it works great for playing music on different Alexa devices in my house.
All I wanted to do as far as clearing when I click on the text box to type in a new song I donāt want to have to backspace the previous letters I typed in. I just want to click one button and it clears the text from the box. So I can start typing something new
Then the second part of the script works. Add a delete button and call:
- service: input_text.set_value
data:
value: ' '
target:
entity_id: input_text.vizio_search
Of course using your entity input_text. Note that using āā and not ā ā will not work, it also has been reported but you need a space which will clear the text field.
Awesome, thanks again for the help
I read your post, before you took it down. Def sounds cool. IF and when Im ready for that I might reach out.
I think Iād be more interested in something like that for my PLex library. But thats a project for another day. Im using PlexMeetsHomeassistant right now and its garbage.
And Im way off the Mushroom topic here. So thanks again
Does anyone have a solution for me? I do apriciatate any help?. I got it somewhat to work when off but it only shows an icon. How can i make it take up the whole space like a cover? The full layout is a few post up.
Code
type: custom:mushroom-template-card
entity: input_boolean.crucial_velocity_helper
layout: vertical
picture: '{{''/local/images/CrucialVelocityRadio.jpg'' if not is_state(entity, ''on'') }}'
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.crucial_velocity_helper
double_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.crucial_velocity_helper
card_mod:
style:
.: |
ha-card {
{{ 'background: center / cover no-repeat url("/local/images/Music1.gif");' if is_state(config.entity, 'on') }}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
--icon-size: 100px;
}
Hello,
I have edited this card with many if that I have used to change states and colors, when windows open and closed, etcā¦
My question is it possible to simply, or the way I made is correct
Thanks a lot
style: |
ha-card {
width: 360px;
border: none;
background-color: #E2E2E2;
box-shadow: 2px 2px 4px 0px rgba(89,89,89,1);
}
cards:
- type: custom:mushroom-cover-card
entity: cover.velux_internal_cover_blinds_2
show_buttons_control: true
show_position_control: true
name: CortinaVelux
card_mod:
style:
mushroom-cover-position-control$: >
mushroom-slider { {% if states('cover.velux_internal_cover_blinds_2')
== 'open'%}
--slider-bg-color: #89DF83!important;
{% else %}
--slider-bg-color: #FF483F!important;
{% endif %} {% if states('cover.velux_internal_cover_blinds_2') ==
'opening'%}
--slider-bg-color: #89DF83!important;
{% endif%} {% if state_attr ('cover.velux_internal_cover_blinds_2',
'current_position') == 100 %}
--slider-color: #89DF83!important;
{% else %}
--slider-color: #B9B7B7!important;
{% endif %} }
mushroom-shape-icon$: >
.shape { {% if states ('cover.velux_internal_cover_blinds_2') ==
'open'%}
--icon-color: #008B19!important;
{% else %}
--icon-color: white!important;
{% endif %} {% if states ('cover.velux_internal_cover_blinds_2') ==
'open'%}
--shape-color: #89DF83!important;
{% else %}
--shape-color: #FF483F!important;
{% endif %} {% if states ('cover.velux_internal_cover_blinds_2') ==
'opening'%}
--shape-color: #89DF83!important;
{% endif %} }
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1):
$: |
.button {
background: white!important;
}
ha-icon {
--card-mod-icon-color: #FF9800;
}
mushroom-button:nth-child(2):
$: |
.button {
background: white!important;
}
ha-icon {
--card-mod-icon-color: #FF9800;
}
mushroom-button$: |
.button {
background: white!important;
}
ha-icon {
--card-mod-icon-color: #FF9800;
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 15px;
--card-secondary-font-size: 15px;
--primary-text-color: #FF9800;
--secondary-text-color: #008CB6;
font-family: Copperplate;
}
style: |
ha-card {
border: none;
}
type: custom:mushroom-template-card
primary: ''
icon: mdi:fountain
icon_color: amber
entity: switch.fountain
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{ (states("counter.fountain_timer"))|int*100 }}% 0%, var(--card-background-color) 0% 100%);
}
.: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
mushroom-shape-icon:after {
content: '24';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
background-color: rgba(var(--rgb-amber), 0.5);
border-radius: 50%;
}
@keyframes fountain {
0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
please check the code, what am I doing wrong, The icon background colour is not showing like below icon
Nothing wrong. Thats what i showed you would happen.
You can get it back if you set a color like this:
--card-background-color: rgba(87, 72, 30, 1);
But you have to set a static color. Otherwise it will not work. The color also has to have 100% opacity (hence the 1 at the end).
type: custom:mushroom-template-card
primary: ''
icon: mdi:fountain
icon_color: amber
entity: switch.fountain
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--card-background-color: rgba(255, 255, 30, 0.5);
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{ (states("counter.fountain_timer"))|int*100 }}% 0%, var(--card-background-color) 0% 100%);
}
.: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
mushroom-shape-icon:after {
content: '24';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
background-color: rgba(var(--rgb-amber), 0.5);
border-radius: 50%;
}
@keyframes fountain {
0%, 100% { clip-path: polygon(0 100%,0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
Hello,
Iām not getting the icon shape color changed. I used the code form the mushroom style guide thread:
Any idea?
Thank you, a lot, for helping.
Kind regards
Benedikt
Can I see the code for the house temp card please? Thanks.
1 Like
Found it and put celcius/percentage in it as well.
Thanks for the initial config @PskNorz !
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kantoor
secondary: >-
{{ states('sensor.office_temperature') | round(1) }}Ā°C | {{
states('sensor.office_humidity') }} %
icon: mdi:thermometer-water
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.office_temperature
name: Temperature
color: green
- entity: sensor.office_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
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);
}
1 Like
Hopefully this should clear it up
This was the solution Thank you! Didnāt see this post berforeā¦ Once weāre in touch: Is it possible to have a shadow for the icon itself (not the shape)?
Thank you so very much.
How can i achieve the same thing if i use mushroom chip?
Can you plz share the code.
Regards