How to integrate this into yaml THEME in order to be applied to each card
mushroom-shape-icon$: |
.shape {
background-color: transparent !important;
}
?
This:
ha-card.type-custom-mushroom-light-card
{
mushroom-shape-icon$: |
.shape {
background-color: transparent !important;
}
}
doesn’t work
I am currently trying to integrate an image into a mushroom template card instead of an icon. Nevertheless, I would like to ‘configure’ the template card similar to an icon, so I would like to have a circular background behind my image which I can colour according to the status. I would also like to change the size of the image (is truncated) (and the background). Does anyone have a tip on how I can get a background behind the image without the primary and secondary text being on this background? Possibly also how I can increase the distance between the image (or icon) and a badge icon or how I can move the badge icon?
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: ''
picture: /local/floorplan/Buttons/Haus.svg
entity: input_select.haus
badge_icon: mdi:home
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
- type: custom:mushroom-template-card
entity: input_select.haus
style:
top: 16%
left: 90%
layout: vertical
primary: Haus Status
picture: /local/floorplan/Buttons/Haus.svg
#icon: mdi:home-outline
#badge_icon: >-
# {% if is_state('input_select.haus', 'Schlafend') %}
# kuf:scene_sleeping_alternat
# {% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
background-color: white;
border-radius: 45px;
}
hui-image:
$: |
#image {
height: 40px;
}
The template card itself should be displayed on a Picture Elements Card Floorplan.
I have made some progress: I now have a round background behind my picture, but I can’t manage to enlarge my picture (it is still cut off at the bottom corners).
type: custom:mushroom-template-card
icon: ''
picture: /local/floorplan/Buttons/Haus.svg
badge_icon: mdi:home
layout: vertical
fill_container: false
card_mod:
style: |
ha-card {
justify-content: center;
background: green !important;
border-radius: 50px;
height: 100px !important;
width: 100px;
border: 1px solid white !important;
}
I think I have to do this somehow with ‘mushroom-shape-avatar’ but how?
I don’t think this is correct any longer… - looks like it’s
--title-color: red;
instead
Hi @all,
im searching for more than 1 hour, I didn’t find it.
It must be easy but I have no idea how …
I use Mushroom-light-card
When on button and slider get orange.
When off grey. But I want it when off Steelblue.
How?
thx
Andreas
EDIT: Or make the Background of the Button Transparent?
I think that’s better …
it’s in the guide first post.
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
mushroom-light-color-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, red 0%, orange 10%, yellow 20%, lightgreen 30%, green 40%, lightblue 50%, blue 60%, purple 70%, fuchsia 80%, red 100%) !important;
}
mushroom-light-color-temp-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, teal 0%, white 100%) !important;
}
Hi Frosty,
I found that already, but I want the Button (behind the Bulp) transparent. so you only can see the Bulp.
With your code I can color the on status.
Thx
Andreas
EDIT: No one?
good evening, can you tell me how I can enlarge or eliminate the transparent border because it cuts my icon. Thanks
type: custom:mushroom-template-card
entity: input_boolean.test_pulsante
tap_action:
action: toggle
custom_fields: null
secondary: |-
{% if is_state(entity, 'on') %}
Sicurezza Accesa
{% else %}
Sicurezza Spenta
{% endif %}
primary: Casa
layout: vertical
fill_container: true
picture: |-
{% if is_state(entity, 'on') %}
/local/security-camera.gif
{% else %}
/local/security-camera off.gif
{% endif %}
card_mod:
style:
mushroom-shape-avatar$: |
.container {
--icon-size: 90px;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 16px;
--card-primary-font-size: 18px;
}
.: |
ha-card {
height: 175px !important;
border-radius: 100px;
box-shadow: 2px 2px #FFAEBC, -0.1em -0.2em 0em 0em #B4F8C8 ;
--card-primary-font-size: var(--mush-card-primary-font-size, 10px);
--card-secondary-font-size: var(--mush-card-secondary-font-size, 10px);
{% if states('input_boolean.test_pulsante') == 'on' %}
box-shadow: 2px 2px #A16AE8, -0.1em -0.2em 0em 0em #FFFF00 ; !important
{% elif states('input_boolean.test_pulsante') == 'off' %}
background-color: var(--card-background-color); /* Default */
{% endif %}
}
Hello, I’m having an issue with my template cards, and I hope someone can help me. I’ve tried making some adjustments, but I can’t get my icons to look like the default ones. The icons appear black instead of grey, and they don’t have the circular backgrounds like the default template icons.
type: custom:mushroom-template-card
entity: switch.waschmaschine
primary: Waschmaschine
secondary: >
{% if is_state('switch.waschmaschine', 'on') and
states('sensor.waschmaschine') in ['arbeitet', 'fertig'] %}
🕒 {{ states('sensor.waschmaschine') | capitalize }} - Seit:
{% set time = as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine.last_changed) %}
{% set hours = (time // 3600) | int %}
{% set minutes = ((time % 3600) // 60) | int %}
{% if hours > 0 %}
{{ hours }} Std. {{ minutes }} Min.
{% else %}
{{ minutes }} Min.
{% endif %}
{% elif is_state('switch.waschmaschine', 'on') %}
{{ states('sensor.waschmaschine') | capitalize }}
{% else %}
{% set no_status = '' %}
{{ no_status }}
{% endif %}
icon: mdi:washing-machine
icon_color: |
{% if is_state('switch.waschmaschine', 'on') %}
blue
{% else %}
gray
{% endif %}
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-icon {
background-color: var(--card-background-color, #f0f0f0);
border-radius: 50%;
padding: 8px;
--mdc-icon-size: 24px;
}
Not really related to the thread, but Its just grey instead of gray
i‘m so stupid
Thank you so much, I don’t have seen this mistake
How can I make the icon background invisible?
Example:
In the light icon I only want to see the bulb.
Make the Circle Invisible .
Pls some one?
Thx Andreas
which are you use mushroom card.
like this ?
type: custom:mushroom-light-card
entity: light.lights_off
icon: mdi:lightbulb
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: !important;
}
just don’t put a color or transparent
--shape-color: rgba(0,0,0,0) !important;
If that screen shot is accurate, check indentation of the line that starts mushroom-shape-icon - it needs to be indented 2 further spaces (as will as everything underneath it).
It took me ages to find it, I am using picture as well
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
border-radius: 0px !important;
}
Yeh check mine with yours. indentation is important
Hey guys,
i got a maybe dump question:
If I use a mushroom:cover-card is it possible to change the secondary information and the Icon in one specific position? This code doesnt work, but I cant figured out why. Maybe someone could help. Maybe template-card? 
card_mod:
style: |
ha-state-icon {
--card-mod-icon: >
{% if state_attr(entity, "current_position") == 50 %}
mdi:weather-sunny-alert
{% else %}
{% endif %}
}
