Mosher
December 11, 2022, 1:44pm
4410
I have modified it a little bit to make a tree green .
OFF
@rhysb Thanks a lot again
Here is card-yaml:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.christmas_lights
icon: mdi:pine-tree
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -120px;
}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -186px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -252px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: light.christmas_lights
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -318px;
}
card_mod:
style: |
ha-card {
{{ 'height: 120px;' if is_state('light.christmas_lights', 'on') else 'height: 66px;' }}
{% set r = state_attr('light.christmas_tree', 'rgb_color')[0] %}
{% set g = state_attr('light.christmas_tree', 'rgb_color')[1] %}
{% set b = state_attr('light.christmas_tree', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
4 Likes
hello, can you show your code? thank you
rhysb
December 11, 2022, 8:36pm
4412
That is because you are trying to animate mushroom-shape-icon which includes the Icon Shape (shaded circle around the icon). You will need to animate just the ha-icon. At the moment you are trying to change the Icon in two places, with a template in icon: and then with --card-mod-icon: in the CSS. Change the icon with icon: and icon_color: and then do just the animation with card_mod.
rhysb
December 11, 2022, 8:58pm
4413
That is because Noctis only has a ‘light’ mode. You could try changing the following line.
From this:
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
To this:
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, var(--ha-card-background) 50%);
1 Like
I really like the chips, if that’s the right word for it, on the future concept. Has anyone done anything similar?
rhysb
December 12, 2022, 3:31am
4415
Do you mean like this?
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.office_air_conditioner
icon: mdi:thermometer
icon_color: red
content: |-
Climate
{{ state_attr(entity, 'temperature') | round(1) }} °C
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
- type: template
icon: mdi:lightbulb
content: |-
Lights
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }} On
entity: group.all_lights
icon_color: yellow
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
{{ '--chip-background: rgba(var(--rgb-yellow), 0.2);' if is_state(config.entity, 'on') }}
}
.content {
white-space: pre-wrap;
}
- type: template
icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
content: |-
Security
{{ expand(states.group.all_locks) | selectattr( 'state', 'eq', 'unlocked') | list | count }} Unlocked
entity: group.all_locks
icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
13 Likes
burg93
December 12, 2022, 1:33pm
4418
@rhysb I don’t suppose you have your dashboard or any of your designs/cards here on Github? Big fan of the layouts and designs you post but it’s simply too much of a pain to keep searching through the questions on here to find any recent updates that I might want to pinch haha. Great work though!
1 Like
Abeksis
December 12, 2022, 2:38pm
4419
Would appreciate help
I try to combine daily consumption and monthly consumption but in terms of display it doesn’t look good (especially at the top), can anyone help the code?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.switcher_boiler_cost_curr_month
primary: חודש נוכחי
secondary: |
{{ states('sensor.switcher_boiler_cost_curr_month') }} ₪
icon: mdi:water-boiler
icon_color: green
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
top: 5px;
left: 0px;
direction: rtl
}
- type: custom:mushroom-template-card
entity: sensor.switcher_boiler_cost_prev_month
primary: חודש לפני
secondary: |
{{ states('sensor.switcher_boiler_cost_prev_month') }} ₪
icon: mdi:water-boiler
icon_color: green
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
top: -60px;
left: 15px;
}
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 10px
card_margin: var(--masonry-view-card-margin, -10px 0px 15px)
cards:
- type: custom:mini-graph-card
group: true
entities:
- entity: sensor.switcher_boiler_daily_energy
name: Daily Energy (kWh)
show_state: false
color: orange
- entity: sensor.switcher_boiler_cost_today
name: Day Cost (₪)
show_state: true
color: green
show:
name: false
icon: false
legend: true
labels: false
graph: bar
fill: true
extrema: false
average: false
hours_to_show: 168
group_by: date
aggregate_func: max
tap_action:
action: more-info
card_mod: null
3 Likes
Tyfoon
December 12, 2022, 2:54pm
4420
@Abeksis not 100% sure what you are looking for but I have posted something like that here .
Abeksis
December 12, 2022, 3:01pm
4421
Thanks but that’s not exactly what I need.
rak
December 12, 2022, 4:03pm
4422
Awesome. Would you mind sharing the code for the weather and Energy portion for your dashboard?
Graves01
December 12, 2022, 8:14pm
4423
Needing help. What I’m trying to do is when state is off it would look like a normal card like the bottom 4 cards. But when state is on the background changes to the candle.gif.
Here is the code.
type: custom:mushroom-template-card
primary: Candles
entity: input_boolean.candles_helper
icon: null
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
mushroom-shape-icon {
display: ;
margin-left: auto;
width: 86px;
}
mushroom-state-info {
text-align:;
}
ha-card {
{% if is_state('input_boolean.candles_helper', 'on') %}
background: center / cover no-repeat
url("/local/images/Candle.gif");
{%- else -%}
{% endif %}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
Graves01
December 12, 2022, 8:15pm
4424
Here is the gif working when state is on
Tehlo
December 12, 2022, 8:35pm
4425
Question, I’ve got some issues with the pop lights on card. I’ve copied the code, filled in my own all light groups and the chip works, is populated and shows the # of lights I have on. However, when I press the chip, nothing happens.
I’m pretty sure I have all the extras like browser mod, auto entities and layout card etc. Could you help me out?
cloudbr34k
December 12, 2022, 11:58pm
4426
@rhysb hey mate
i tried to use the same code to change the card height, but not working nor do i understand when to use certain css elements. Any help is always appreciated
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dining_room_pendant_light_switch
icon_color: |-
{% set state=states('light.dining_room_pendant_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: mdi:chandelier
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.dining_room_light_switch
icon_color: |-
{% set state=states('light.dining_room_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: hue:bulb-group-recessed-ceiling
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: cover.dining_room_sliding_door_curtain
icon_color: |-
{% set state=states('cover.dining_room_sliding_door_curtain') %}
{% if state=='open' %}
orange
{% elif state=='closed' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:curtains
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.dining_room_ceiling_motion_sensor
icon_color: >-
{% set state=states('binary_sensor.dining_room_ceiling_motion_sensor')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:motion-sensor
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.dining_room_sliding_door_sensor_contact
icon_color: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor_contact')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:door-sliding
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: cover.ducted_ac_kitchen_zone
icon_color: |-
{% set state=states('cover.ducted_ac_kitchen_zone') %}
{% if state=='open' %}
blue
{% elif state=='closed' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:air-conditioner
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
alignment: center
card_mod:
style:
ha-card {
height: 120px !important;
}
Mosher
December 13, 2022, 7:36am
4427
Hi,
IOS APP
EDIT:
When I resize browser window on Desktop bottom card also moves
Here is my card-yaml. I have tried to trim card height.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Washer
secondary: '{{ states(''input_select.washing_machine_state_machine'') }}'
entity: input_select.washing_machine_state_machine
icon_color: |-
{% if is_state('input_boolean.washing_machine_job_cycle', 'on') %}
#F49D1E
{% elif is_state('input_boolean.washing_machine_job_cycle', 'off') %}
#27A28A
{% endif %}
icon: |-
{% if is_state('input_boolean.washing_machine_job_cycle', 'on') %}
mdi:washing-machine
{% elif is_state('input_boolean.washing_machine_job_cycle', 'off') %}
mdi:washing-machine-off
{% endif %}
fill_container: false
- type: custom:mini-graph-card
entities:
- sensor.plug_washingmachine_power
points_per_hour: 4
show:
labels: false
name: false
graph: bar
icon: false
hour24: true
align_state: right
font_size: 80
height: 100
hours_to_show: 6
color_thresholds:
- value: 1
color: '#27A28A'
- value: 2
color: '#F49D1E'
card_mod:
style: |
ha-card {
top: -70px;
}
card_mod:
style: |
ha-card {
height: 158px !important;
}
2 Likes
rhysb
December 13, 2022, 8:33am
4428
Share your code and we can try and help.
rhysb
December 13, 2022, 8:54am
4429
I presume you are trying to add some space below the Chips? The correct way to do that would be like this:
alignment: center
card_mod:
style: |
ha-card {
margin-bottom: 100px;
}
1 Like
