Frosty
August 17, 2024, 9:54am
1128
that looks good. I like it.
there’s not much you can do imo with the standard gauge card but something like this.
type: custom:stack-in-card
cards:
- type: gauge
entity: sensor.lounge_temperature
name: ''
min: 0
max: 35
needle: false
severity:
green: 0
yellow: 20
red: 30
card_mod:
style:
ha-gauge:
$: |
svg.text > .value-text {
fill: none !important;
}
svg.gauge > .needle {
fill: black !important;
}
.: |
ha-card {
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: |
{{ states('sensor.lounge_temperature') }}°C
secondary: Temperature
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
position: absolute;
top: 40%;
left: 41%;
}
1 Like
I’m using the Mushroom Template Badge for badges & icons which works great in the browser on a desktop, but doesn’t work when using the iOS app. What is causing this?
Frosty
August 19, 2024, 2:55pm
1130
I would say clear the cache in the app. I don’t have an iPhone so I can’t help past this point
ciddi89
August 19, 2024, 9:01pm
1131
Would also clear the cache under settings → companion app → debug → clear frontend cache or something like that. Then reload the dashboard. Maybe this helps you.
Sjees, that was easy. Thanks!
1 Like
Anytime updating a custom card, theme or the like, or even updating Homeassistant itself you should clear the cache.
The update for cards even tell you in the update notification that you need to do it
skank
August 20, 2024, 6:26pm
1136
Sorry for the questions but i got another one concerning mushroom update card.
Very curious
Alessjo99
August 22, 2024, 8:41pm
1137
Good evening, I updated my home assistant and I can no longer view the chips, I need your help.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ingresso
secondary: >-
{{ states('sensor.ingresso_temperatura_e_umidita_temperatura') }} °C | {{
states('sensor.ingresso_temperatura_e_umidita_umidita') | int(0) }} %
icon: mdi:door-open
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/ingresso
icon_color: '#ffb52b'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 50px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('binary_sensor.porta_ingresso_apertura', 'on') %}
mdi:door-open
{% else %}
mdi:door
{% endif %}
icon_color: |
{% if is_state('binary_sensor.porta_ingresso_apertura', 'on') %}
red
{% else %}
grey
{% endif %}
entity: binary_sensor.porta_ingresso_apertura
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
icon: |
{% if is_state('light.luce_ingresso', 'on') %}
mdi:lightbulb
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |
{% if is_state('light.luce_ingresso', 'on') %}
amber
{% else %}
grey
{% endif %}
entity: light.luce_ingresso
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-size: 15px;
--chip-spacing: -15px;
}
card_mod:
style: |
ha-card {
height: 102px;
}
Hello, please help me, how can I change the font color so that it is not white? how to change font size and style? I tried to do color: ‘#00bcd4 ’ in the styles section, but it doesn’t work… I’m probably doing something wrong.
- type: custom:stack-in-card
cards:
- type: gauge
entity: sensor.datchik_temperatury_i_vlazhnosti_zal_humidity
name: humidity
min: 0
max: 100
needle: false
severity:
green: 40
yellow: 55
red: 60
card_mod:
style:
ha-gauge:
$: |
svg.text > .value-text {
fill: none !important;
}
svg.gauge > .needle {
fill: black !important;
}
.: |
ha-card {
border: none;
background: none !important;
}
style:
color: '#00bcd4'
top: 77%
left: 75%
width: 40%
1 Like
Frosty
August 22, 2024, 10:23pm
1139
you will have to ask in the card_mod thread as this is the mushroom thread, will get more help there.
card_mod:
style:
ha-gauge:
$: |
svg.text > .value-text {
fill: green !important;
}
Thanks for the example of this map. I’m happy to use it. But the problem with the color was not solved, your method for changing the color does not want to work on my card…
hi lads tiny question just to clean my stuff up,
type: custom:mushroom-template-card
primary: Wachtzaal
secondary: ''
icon: ''
entity: light.wachtz
layout_options:
grid_columns: 1
grid_rows: 1
layout: vertical
card_mod:
style: |
{% if is_state('light.wachtz','on') %}
:host {
--ha-card-background: var(--blue-grey-color);
}
{% endif %}
I use this verry simple card but I use it allot, is there a way to reference the entity directly in the style? so I don’t have to go out of visual editor and change that one too, when the entity gets updated?
{% if is_state(config.entity,'on') %}
1 Like
thx i tried every AI
If some1 ever encounters this specific issue, here’s my solution.
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 25% 25% 25% 25%
grid-template-rows: auto
grid-template-areas: |
"A1 A2 A3 A4"
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: ' '
entity: input_select.denon
show_state: false
show_entity_picture: true
entity_picture: /local/EMBY.png
styles:
card:
- font-size: 4em
- font-weight: bold
icon:
- height: 6rem
- width: 6rem
visibility:
- condition: state
entity: input_select.denon
state: InputGame
view_layout:
grid-area: A1
- type: custom:button-card
name: ' '
entity: input_select.denon
show_state: false
show_entity_picture: true
entity_picture: /local/SkyTVd02.png
styles:
card:
- font-size: 4rem
- font-weight: bold
icon:
- height: 6rem
- width: 6rem
visibility:
- condition: state
entity: input_select.denon
state: InputCbl/Sat
view_layout:
grid-area: A1
- type: custom:button-card
name: ' '
entity: input_select.denon
show_state: false
show_entity_picture: true
entity_picture: /local/appletv_button.png
styles:
card:
- font-size: 4rem
- font-weight: bold
icon:
- height: 6rem
- width: 6rem
visibility:
- condition: state
entity: input_select.denon
state: InputMediaPlayer
view_layout:
grid-area: A1
- type: horizontal-stack
cards:
- type: custom:mushroom-select-card
entity: input_select.denon
secondary_info: none
icon_type: none
fill_container: true
name: ' '
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: none !important;
border-radius: 50px !important;
}
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
.mdc-line-ripple::after {
border-bottom-width: 0px !important;5
}
.mdc-select__selected-text {
color: transparent !important;
}
.mdc-select__dropdown-icon {
fill: transparent !important;
}
.mdc-select {
width: 100% !important;
--select-height: 70px;
top: 0%;
right: 0%;
}
.: |
ha-card {
background: transparent !important;
}
ha-card {
--ha-card-background: transparent;
border-radius: 15px;
box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;important
}
view_layout:
grid-area: A1
- type: markdown
content: ' '
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
border-radius: 15px;
box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;important
}
view_layout:
grid-area: A2
- type: markdown
content: ' '
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
border-radius: 15px;
box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;important
}
view_layout:
grid-area: A3
- type: markdown
content: ' '
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
border-radius: 15px;
box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;important
}
view_layout:
grid-area: A4
layout_options:
grid_columns: 4
grid_rows: 2
Needs an additional input_select.helper.
Adding entity works in the templates in the mushroom template card itself just fine. But card mod requires config. but it also means you can reference for example the icon_color by saying config.icon_color
1 Like
Hello Everybody,
I can’t change the size and the color of the title…
cards:
- type: custom:mushroom-title-card
title: Quarto
card_mod:
style:
mushroom-title-card$:
.header: |
.title {
--title-font-size: 10px;
Thanks
nappyjim
August 24, 2024, 3:37am
1147
Where do I include an IF statement in the below animation? I tried to follow the example in the other thread but couldent get it working. For example, I only want the animation if input_boolean.test1 is on.
type: custom:mushroom-template-card
primary: Alert!
icon: mdi:fire
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 0;}
}
ciddi89
August 24, 2024, 7:57am
1148
Try this:
card_mod:
style: |
ha-card {
--title-font-size: 10px;
--title-color: orange;
}
Frosty
August 24, 2024, 8:22am
1149
you want to put your statement like bellow. change the entity and animation to suit your needs.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('sensor.xxxx','on') %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
1 Like
and they all said just type entity → adding config = works like a charm!
