Faecon
July 12, 2024, 4:56am
823
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 21px;
--icon-size: 100px;
--shape-color: {{ states("input_text.kleur_iconen")}} !important;
mushroom-state-info$: |
.container {
--card-primary-font-size: 45px;
}
.: |
ha-card {
justify-content: center;
}
What am I doing wrong ? none of these modifcations are working for meâŚ
bjaurelio
July 12, 2024, 4:58am
824
I am able to modify the icon, but I am having trouble modifying the slider. Itâs not working. Is this still the correct code for the sliders?
My code is below.
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room
icon_color: amber
show_brightness_control: true
show_color_temp_control: true
fill_container: true
icon: mdi:lightbulb-group
card_mod:
style: |
ha-state-icon {
--card-mod-icon: {% if is_state('light.master_bedroom', 'on') %} mdi:lightbulb-group {% else %} mdi:lightbulb-group-off {% endif %};
}
mushroom-light-brightness-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, amber 0%, white 100%) !important;
}
Frosty
July 12, 2024, 5:04pm
826
put ha-state-icon { at the bottom
and you need .: |
like this
.: |
ha-state-icon
and like the above post remove | after style:
bjaurelio
July 13, 2024, 3:08am
827
Thank you for the help. I also realized I accidentally was using the wrong slider as I wanted to change the temp control rather than brightness slider to match the color. Once it worked, I found out that âamberâ doesnât work here as I ended up with a black bar. After using an eyedropper extension, I replaced it with the Hex code for the color, and it works. I also ended up creating what I think is a cool gradient for color temp using the blue from what appears to be the old style thatâs on the github image showing the feature.
card_mod:
style:
mushroom-light-color-temp-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(right, #FFC107 0%, white 75%, #ABD3FB 100%) !important;
}
.: |
ha-state-icon {
--card-mod-icon: {% if is_state('light.living_room', 'on') %} mdi:lightbulb-group {% else %} mdi:lightbulb-group-off {% endif %};
}
2 Likes
Faecon
July 13, 2024, 6:08am
828
Thanks!
i tried to add color to the text, but that does not workâŚ
ha-card {
justify-content: center;
--primary-text-color: {{ states("input_text.kleur_iconen")}};
}
edit:
this is the right syntax
rgb({{ states(âinput_text.kleur_iconenâ)}});
1 Like
Faecon
July 13, 2024, 6:47am
829
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 40px;
--icon-size: 50px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
mushroom-state-info$: |
.container {
--card-primary-font-size: 25px;
--card-primary-color: rgb({{ states("input_text.kleur_iconen")}});
align-items: center;
}
.: |
ha-state-icon {
color: rgb({{ states("input_text.kleur_iconen")}});
ha-card {
font-family: "brandon-grotesque";
}
How can I get the icon also centered ?edit:
mushroom-shape-icon$: |
.shape {
left: 105px;
}
itâs not really centered, but at least you can change the positionâŚ
How do I know that the font-family exist ? where can I find this ?
edit:
I am using DM Sans, which I personally think is a pretty cool font for HA! Screenshot below:
[image]
How to install and use (can apply to any font from Google by changing the name to match Google Fonts name, or adding extra lines to resources):
Add to your resources.yaml file the below. I have added a few myself, like the below:
- url: 'https://fonts.googleapis.com/css?family=DM Sans'
type: css
- url: 'https://fonts.googleapis.com/css?family=Poppins'
type: css
- url: 'https:/âŚ
I am trying to create a custom mushroom card in the style of the âmushroom cover-cardâ just with custom buttons.
I got this far:
CODE:
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: input_button.pc_switch_office_pc1
fill_container: false
name: Office
layout: horizontal
icon: mdi:account-group
card_mod:
style: |
ha-card {
border: 0px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.denny_moritz
content_info: none
card_mod:
style: |
ha-card {
border: 0px !important;
--card-mod-icon: mdi:microsoft-windows;
}
- type: entity
entity: person.denny_moritz
content_info: none
card_mod:
style: |
ha-card {
border: 0px !important;
--card-mod-icon: mdi:apple;
}
- type: entity
entity: person.denny_moritz
content_info: none
card_mod:
style: |
ha-card {
border: 0px !important;
--card-mod-icon: mdi:set-top-box;
}
alignment: center
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
rotate: 0deg;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
rotate: 0deg;
}
mushroom-entity-chip:nth-child(3)$: |
ha-state-icon {
rotate: 0deg;
}
.: |
ha-card {
justify-content: center;
--chip-height: 40px;
--chip-border-radius: 10%;
--chip-icon-size: 20px;
--chip-border-radius: 10%;
--chip-background: #262626;
}
card_mod:
style: |
ha-card {
padding-bottom: 10px;
}
Now the only question how do I achieve an even (percentage-based) spacing so in the end it looks like this:
I did solve that for now using normal buttons:
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: input_button.pc_switch_office_pc1
fill_container: false
name: Office
layout: horizontal
icon: mdi:account-group
card_mod:
style: |
ha-card {
border: 0px !important;
}
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.wol_workstation
icon_height: 40px
icon: mdi:microsoft-windows
card_mod:
style: |
ha-card {
border: 0px !important;
background: #262626 !important;
border-radius: 10px !important;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.wol_workstation
icon_height: 40px
icon: mdi:apple
card_mod:
style: |
ha-card {
border: 0px !important;
background: #262626 !important;
border-radius: 10px !important;
}
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.wol_workstation
icon_height: 40px
icon: mdi:set-top-box
card_mod:
style: |
ha-card {
border: 0px !important;
background: #262626 !important;
border-radius: 10px!important;
}
card_mod:
style: |
ha-card {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
2 Likes
Faecon
July 16, 2024, 9:45am
832
I have a template card with an icon and text
I want the text centered, but when I add the icon, it just moves a little to the right. so it is not in the middle⌠How do I change that ?
card_mod:
style:
mushroom-state-info$: |
.container {
text-align: center;
}
.: |
ha-card {
--card-primary-font-size: 18px;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
width: 300px;
margin-left: 40px;
}
Frosty
July 16, 2024, 1:51pm
833
simple solution would be to add a margin to the size of you icon, so you cancel out the icon.
mushroom-state-info$: |
.container{
text-align: center;
margin-left: -40px;
thatâs if your icon is 40px in size
1 Like
sanket
July 17, 2024, 10:36am
834
Mushroom Light Card, how can I display both color temperature and brightness slider in one mashroom card.
You could do something like this?
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.office_main_light
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:mushroom-light-card
entity: light.office_main_light
use_light_color: true
show_color_temp_control: true
card_mod:
style: |
mushroom-state-item {
display: none !important;
}
ha-card {
padding-top: 0px !important;
}
1 Like
Here is a version for light cards
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
{% if state_attr(config.entity,'rgb_color') != none %}
background: linear-gradient(0deg, rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.3,)}} calc( {{state_attr(config.entity,'brightness') | float / 2.55}}%), rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.12,)}} 0.1%) !important;
{% else %}
background: linear-gradient(0deg, rgba(255, 152, 0, 0.3) {{state_attr(config.entity,'brightness') | float / 2.55}}%, rgba(255, 152, 0, 0.12) 0.1%) !important;
{% endif %}
{% endif %}
}
4 Likes
Faecon
July 19, 2024, 5:35am
837
I have a mushroom template card. On mobile when i press it I get a dark square around it. How can I avoid this ?
You can do something like this with chips:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fan-clock
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
.content {
flex-direction: column !important;
}
- type: template
icon: mdi:fan-clock
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
.content {
flex-direction: column !important;
}
- type: template
icon: mdi:fan-clock
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
.content {
flex-direction: column !important;
}
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 8px 12px;
--chip-spacing: 8px !important;
}
3 Likes
colinnz
July 21, 2024, 7:56am
839
This is absolutely priceless. Helped me immensely and saved me a ton of time. Thank you so much for the time and effort you put into this.
1 Like
Hello,
I would like to ask if there is a way to display additional information on this card?
Entity: timer.climate_off_timer
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if not is_state('climate.nappali_klima', 'off') %}
position: relative;
}
.shape:after {
content: ' ';
position: absolute;
width: inherit;
height: inherit;
border-radius: 500px;
border: 2px solid #ADFF2F;
border-left-color: transparent;
animation: spin 1s linear infinite;
{% endif %}
}
.: |
:host {
{% set sensor_dws_state =
(is_state('binary_sensor.dws_nappali_bal_contact', 'on') or is_state('binary_sensor.dws_nappali_jobb_contact', 'on')) %}
{% set sensor_zone_state =
(is_state('binary_sensor.zone_nappali_bal_abl_open', 'on') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'on')) %}
{% if sensor_dws_state and sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px red;
{% elif not sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: none;
{% elif sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px orange;
{% else %}
--ha-card-box-shadow: 0 0 10px grey;
{% endif %}
}
ha-card {
{% if is_state('binary_sensor.zone_nappali_pir_open', 'on') %}
--card-primary-color: red;
{% else %}
--card-primary-color: inherit;
{% endif %}
height:70px !important;
}
secondary: >-
{{states('sensor.nappali_e6b0_temperature') | float(default=0) |
round(1)}} °C
{{states('sensor.nappali_e6b0_humidity') | float(default=0) |
round(1)}} %
icon: mdi:sofa
entity: light.led_driver_nappali_padlo
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/nappali
hold_action:
action: toggle
icon_color: |-
{% if is_state('light.led_driver_nappali_padlo','on') %}
orange
{% endif %}
multiline_secondary: true
badge_color: >-
{% set cover_position = state_attr('cover.redony_nappali',
'current_position') %}
{% if cover_position is defined %}
{% if cover_position == 0 %}
red
{% elif cover_position == 100 %}
green
{% else %}
yellow
{% endif %}
{% else %}
grey
{% endif %}
badge_icon: >-
{% set cover_position = state_attr('cover.redony_nappali',
'current_position') %}
{% if cover_position is defined %}
{% if cover_position == 0 %}
mdi:window-shutter
{% elif cover_position == 100 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
{% else %}
mdi:window-shutter-cog
{% endif %}
primary: Nappali
Frosty
July 22, 2024, 6:11pm
841
Thomas-Webster:
timer.climate_off_timer
you can play around with a few options like this
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: '{{states('timer.climate_off_timer')}}';
display: flex;
}
mushroom-shape-icon$: |
.shape {
{% if not is_state('climate.nappali_klima', 'off') %}
position: relative;
}
.shape:after {
content: ' ';
position: absolute;
width: inherit;
height: inherit;
border-radius: 500px;
border: 2px solid #ADFF2F;
border-left-color: transparent;
animation: spin 1s linear infinite;
{% endif %}
}
.: |
:host {
{% set sensor_dws_state =
(is_state('binary_sensor.dws_nappali_bal_contact', 'on') or is_state('binary_sensor.dws_nappali_jobb_contact', 'on')) %}
{% set sensor_zone_state =
(is_state('binary_sensor.zone_nappali_bal_abl_open', 'on') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'on')) %}
{% if sensor_dws_state and sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px red;
{% elif not sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: none;
{% elif sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px orange;
{% else %}
--ha-card-box-shadow: 0 0 10px grey;
{% endif %}
}
ha-card {
{% if is_state('binary_sensor.zone_nappali_pir_open', 'on') %}
--card-primary-color: red;
{% else %}
--card-primary-color: inherit;
{% endif %}
height:70px !important;
}
secondary: >-
{{states('sensor.nappali_e6b0_temperature') | float(default=0) |
round(1)}} °C
{{states('sensor.nappali_e6b0_humidity') | float(default=0) | round(1)}} %
icon: mdi:sofa
entity: light.led_driver_nappali_padlo
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/nappali
hold_action:
action: toggle
icon_color: |-
{% if is_state('light.led_driver_nappali_padlo','on') %}
orange
{% endif %}
multiline_secondary: true
badge_color: >-
{% set cover_position = state_attr('cover.redony_nappali',
'current_position') %}
{% if cover_position is defined %}
{% if cover_position == 0 %}
red
{% elif cover_position == 100 %}
green
{% else %}
yellow
{% endif %}
{% else %}
grey
{% endif %}
badge_icon: >-
{% set cover_position = state_attr('cover.redony_nappali',
'current_position') %}
{% if cover_position is defined %}
{% if cover_position == 0 %}
mdi:window-shutter
{% elif cover_position == 100 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
{% else %}
mdi:window-shutter-cog
{% endif %}
primary: Nappali
Faecon
July 25, 2024, 3:44pm
843
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_number.aline_airco
icon: " "
How do I center the state of the input_number ?
