The following will need to be added to your mod code.
--card-primary-line-height: 20px !important ;
--card-secondary-line-height: 20px !important ;
type: custom:mushroom-template-card
primary: Hall
secondary: Night
icon: hue:bulb-filament
entity: scene.hallway_night_dim
icon_color: '{{ ''light-green'' if states(''light.hallway'') == ''on'' else ''dark-grey'' }}'
card_mod:
style: |
ha-card {
height: 80px !important;
padding-bottom: 10px !important;
padding-top: 10px !important;
--card-primary-font-size: 20px;
--card-secondary-font-size: 18px;
--card-primary-line-height: 20px !important ;
--card-secondary-line-height: 20px !important ;
}
badge_icon: ''
badge_color: ''
Dakononov
March 26, 2024, 1:04pm
596
Please, help! I need the icon to be highlighted in green when fan.airfresh_kitchen_150- State Attribute- percentage: 1. But for some reason it remains gray. What am I doing wrong?
- type: template
double_tap_action:
action: none
icon: mdi:weather-night
icon_color: |-
{% if is_state_attr('fan.airfresh_kitchen_150', 'percentage', '1')%}
green
{% else %}
grey
{% endif %}
hold_action:
action: none
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 1
target:
entity_id: fan.airfresh_kitchen_150
This is one wayâŠ
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:weather-night
icon_color: |-
{% set s = state_attr('fan.airfresh_kitchen_150', 'percentage') | int (0) %}
{% if (s >= 1 ) %}
green
{% else %}
grey
{% endif %}
hold_action:
action: none
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 1
target:
entity_id: fan.airfresh_kitchen_150
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
