Dakononov
March 26, 2024, 5:08pm
599
Thank you! I think this is correct for several switch
icon_color: |-
{% set s = state_attr('fan.airfresh_kitchen_150', 'percentage') %}
{% if (s <= 1 ) %}
green
{% else %}
grey
{% endif %}
icon_color: |-
{% set s = state_attr('fan.airfresh_kitchen_150', 'percentage') %}
{% if (s >= 67 ) %}
green
{% else %}
grey
{% endif %}
but if I add 3d switch (State Attribute- percentage: 89)? 2 positions are highlighted…
You only shared a portion of your card so the code was written for speed 1 as you requested. You’ll have to adjust the code to fit the entire card or post the rest of the code.
You can use == instead of >= as well.
% set s = state_attr('fan.airfresh_kitchen_150', 'percentage') |int(0) %}
{% if (s == 89 ) %} green
{% else %} grey
{% endif %}
Dakononov
March 26, 2024, 5:31pm
601
Thanks a lot! Now it works exactly as it should work. Sorry for not posting all the code… my fault!
Frosty
March 27, 2024, 5:00pm
602
I have this basic card I made, but I lack some creativity. can anyone give me some inspiration.
personally it’s not a case of me needing this card more of a learning curve to get to this point.
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
ha-card-border-width: 0px;
width: 200px;
}
primary: >-
{{state_attr('sensor.backup_state', 'backups_in_google_drive') }}
Google Drive Backup
secondary: >-
{% set s = state_attr('sensor.backup_state', 'last_backup') %}
{% set dt = s | as_datetime %}
{{ dt.strftime('%A %d %B') }}
Total Size: {{state_attr('sensor.backup_state',
'size_in_google_drive') }}
Free Space: {{state_attr('sensor.backup_state',
'free_space_in_google_drive') }}
icon: mdi:google-drive
multiline_secondary: true
icon_color: blue
fill_container: true
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
margin-left: 60px;
width: 180px;
}
primary: Last Backup
secondary: |-
{{state_attr('sensor.backup_state', 'backups')[0].name }}
{{state_attr('sensor.backup_state', 'backups')[2].state }}
size: {{state_attr('sensor.backup_state', 'backups')[2].size }}
multiline_secondary: true
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
ha-card-border-width: 0px;
margin-top: -7px;
padding-left: 20px;
--chip-background: none;
--chip-box-shadow: none;
--chip-border: none;
--chip-border-width: 0px;
--ha-card-box-shadow: none !important ;
}
chips:
- type: entity
entity: sensor.backup_state
icon: mdi:backup-restore
icon_color: green
content_info: last-changed
1 Like
Can someone help how to change TITLE CARD Color? the code i use doesn’t work…
Please do not post screenshots of your code. Follow the instructions for post #11
This will change the color.
type: custom:mushroom-title-card
title: Title
subtitle: subtitle
card_mod:
style: |
ha-card {
--title-color: yellow !important;
--subtitle-color: lime !important;
Hello, I would like to make a mushroom fan card with a time bar. I added the “custom: timer-bar-card” card to the entities card. “custom:mushroom-fan-card” failed. Is there some way to make this timer bar appear?
Thanks in advance for your help.
Here is a picture of what I want to achieve.
Thomas-Webster:
custom: timer-bar-card
It’s achievable, but can you post your initial code or where your source came from?
Hey, I am trying to style some chip conditional cards and i see some strange behaviour while styling the chip card icon (just in case with conditional):
This is what i receive from the code belove (an unnecessary margin/space on top of conditional chips, 1. is entity-chip, 2. und 3. are conditional chips):
This is the YAML:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.homea
- type: conditional
conditions:
- condition: state
entity: switch.00003df29a61d81_internet_access
state: 'on'
chip:
type: template
entity: switch.00003df29a62082_internet_access
icon: mdi:printer-outline
- type: conditional
conditions:
- condition: state
entity: switch.00003df29a61d81_internet_access
state: 'on'
chip:
type: entity
entity: person.homea
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
--color: rgb(249, 54, 63);
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-state-icon {
--color: rgb(249, 54, 63);
}
mushroom-conditional-chip:nth-child(3):
mushroom-entity-chip$: |
ha-state-icon {
--color: rgb(249, 54, 63);
}
As you can see, although i custom style all the icons, just the ones within a conditional takes up this space above. Is this a bug?
And i somehow cannot remove it… i tried sth. like this:
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
mushroom-template-chip {
height: 0 !important;
margin: 0 !important;
}
ha-state-icon {
--color: rgb(249, 54, 63);
}
This is the basic code into which I tried to integrate a timer bar section in several ways without success.
- type: custom:mushroom-fan-card
entity: fan.paraelszivo_zuhanyzo_switch_0
name: Páraelszívó
icon_animation: true
fill_container: false
collapsible_controls: true
tap_action:
action: toggle
This is a successful attempt on an entities card.
- type: entities
entities:
- entity: switch.szivattyu_switch_0
type: custom:timer-bar-card
card_mod:
style: |
ha-card {
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75)
icon: mdi:pump
duration:
fixed: '00:60:00'
invert: true
bar_direction: ltl
bar_width: 60%
tap_action:
action: toggle
bar_foreground: turquoise
mushroom:
layout: null
color: blue
secondary_info: none
name: Szivattyú
- entity: sensor.szivattyu_switch_0_energy
name: Fogyasztás
secondary_info: none
- entity: sensor.szivattyu_switch_0_power
name: Teljesítmény
secondary_info: none
What version of Mushroom are you on?
Your code produced this for me…
strange… Mushroom is v3.5.2. Card-mod v3.4.2
I’m on Mushroom 3.5.4 and Card-mod v3.4.3
Strange… I updated both, it did not change anything …
This is one way to combine the cards. I’ll work on the kinks. Swap my entities for yours…
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: fan.bedroom_fan
icon_color: cyan
icon: mdi:fan
card_mod:
style: |
ha-card {
border: none;
height: 50px;
}
- type: custom:timer-bar-card
entity: switch.kitchen_lights
name: Test Switch
duration:
fixed: '00:10:00'
invert: true
bar_direction: rtl
bar_width: 60%
mushroom:
color: cyan
icon_type: none
card_mod:
style: |
ha-card {
border: none;
height: 64px !important;
left: -70px;
}
- type: custom:mushroom-fan-card
entity: fan.bedroom_fan
icon_color: cyan
icon: mdi:fan
card_mod:
style: |
ha-card {
border: none;
width: 210px;
left: -70px
}
1 Like
Are you using any themes?
I have installed “Mushroom Themes” and am using “Mushroom Shadow” overall, it is set on my profile.
Try switching to the default theme and see if you have the same issue. Worth eliminating theme issues.
