Sebwirtz
February 20, 2023, 8:18pm
5646
hi.
- type: conditional
conditions:
- entity: cover.shellyswitch25_10521c072531
state: closed
chip:
type: template
icon_color: amber
icon: mdi:window-shutter
content: >-
{{ expand(states.cover.shellyswitch25_10521c072531) |
selectattr( 'state', 'eq', 'closed') | list | count }}
tap_action:
action: navigate
navigation_path: /dashboard-mobile/wohnzimmer
entity: cover.shellyswitch25_10521c072531
card_mod: null
style: "ha-card {\nborder: none;\n --icon-size: 30px;\n}\t\t\n"
good be a good idea to do
2 Likes
Eoin
February 20, 2023, 9:24pm
5649
Unfortunately, the exact same, displays correctly when on a dashboard but the bottom half of the card is hidden when in a popup.
AINER
February 20, 2023, 9:32pm
5650
Can someone help me canter text in title card? Blank symbol at the end breaks it
Code
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: '{{states("sensor.time")}}'
alignment: center
subtitle: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Добрый вечер, {{user}}!
{% elif (time >= 12) %}
Добрый день, {{user}}!
{% elif (time >= 5) %}
Доброе утро, {{user}}!
{% else %}
Доброй ночи, {{user}}!
{% endif %}
card_mod:
style:
mushroom-title-card$: |
h1 {
--title-font-size: 49px;
}
.header {
--title-padding: 0px 0px 10px 0px;
}
Eoin
February 20, 2023, 10:44pm
5651
rhysb:
custom:stack-in-card
My mistake, that did work. Thank you!
1 Like
rhysb
February 21, 2023, 12:05am
5652
Your code works ok for me, but you could try {{ states("sensor.time") | trim }}
benm7
February 21, 2023, 1:22am
5653
It’s mostly minimalist off memory, its been a while since I have looked at it
1 Like
benm7
February 21, 2023, 4:15am
5654
Looking for advice on the best way to build this mock-up card below. I essentially want to build room cards for my tablet layout that will be within a slider card, so I can slide between them. I want to be able to either click on the title or the main picture as I would a button card to go to the next screen. Not sure whether to build it as one entire button card or as a stack?
3 Likes
rhysb
February 21, 2023, 9:01am
5656
Something like this perhaps?
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Lounge Room
icon: mdi:sofa
icon_color: blue
card_mod:
style: |
ha-card {
--ha-card-background: none;
padding: 0px !important;
margin-left: -2px !important;
--ha-card-box-shadow: none;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
height: 200px !important;
background: url('/local/lounge_room.jpg') center / cover no-repeat !important;
--ha-card-border-radius: 12px;
margin: -4px;
transition: all 0s;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.lounge_sensor_temperature
icon_color: red
- type: entity
entity: sensor.lounge_sensor_humidity
icon_color: indigo
- type: entity
entity: sensor.dryer_energy
icon_color: orange
card_mod:
style: |
.chip-container {
flex-flow: column !important;
--chip-spacing: 0px;
--chip-background: none;
--chip-box-shadow: none;
transition: all 0s;
}
card_mod:
style: |
ha-card {
position: absolute;
right: 8px;
top: 8px;
background: rgba(var(--rgb-card-background-color), 0.7);
box-shadow: none;
border-radius: 12px;
transition: all 0s;
}
card_mod:
style: |
ha-card {
border-radius: 12px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-group-outline
icon_color: amber
layout: vertical
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
icon: mdi:door-closed
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
icon: mdi:blinds-open
icon_color: grey
layout: vertical
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
icon: mdi:hvac
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
icon: mdi:speaker
icon_color: grey
layout: vertical
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
}
3 Likes
benm7
February 21, 2023, 9:13am
5657
No code yet, all done in Powerpoint
AINER
February 21, 2023, 10:27am
5658
That’s doesn’t work.
I don’t know what can affect.
injectx
February 21, 2023, 12:08pm
5659
This is cool. Would be even cooler if it would work on light mode in reverse.
injectx
February 21, 2023, 12:38pm
5660
How did you get that bottom navigation bar?
cloudbr34k
February 21, 2023, 12:56pm
5661
@rhysb how do make it so the white card is smaller, as i want to then apply this to the other cards to the right?
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Common Devices
subtitle: null
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Garage Door
icon: >-
{% set
state=states('binary_sensor.garage_door_garage_door_contact') %}
{% if state=='on' %}
mdi:garage-open
{% elif state=='off' %}
mdi:garage-variant-lock
{% endif %}
entity: cover.garage_door_trigger
icon_color: >-
{% set
state=states('binary_sensor.garage_door_garage_door_contact') %}
{% if state=='on' %}
red
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
multiline_secondary: true
badge_icon: ''
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
mush-chip-background: rgba(159, 212, 166, 0.3);
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Brads Lamp
icon: |-
{% set state=states('light.master_bedroom_bedside_lamp_brads') %}
{% if state=='on' %}
mdi:lamp
{% elif state=='off' %}
mdi:lamp
{% endif %}
entity: climate.master
icon_color: |-
{% set state=states('light.master_bedroom_bedside_lamp_brads') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: call-service
service: light.toggle
data:
color_temp: 500
brightness_pct: 25
target:
entity_id: light.master_bedroom_bedside_lamp_brads
layout: vertical
hold_action:
action: more-info
badge_icon: mdi:face-man-profile
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Laurens Lamp
icon: >-
{% set state=states('light.master_bedroom_bedside_lamp_laurens')
%}
{% if state=='on' %}
mdi:lamp
{% elif state=='off' %}
mdi:lamp
{% endif %}
entity: light.master_bedroom_bedside_lamp_laurens
icon_color: >-
{% set state=states('light.master_bedroom_bedside_lamp_laurens')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: call-service
service: light.toggle
data:
color_temp: 500
brightness_pct: 23
target:
entity_id: light.master_bedroom_bedside_lamp_laurens
layout: vertical
hold_action:
action: more-info
badge_icon: mdi:face-woman-shimmer
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Master Zone
icon: |-
{% set state=states('climate.master') %}
{% if state=='heat_cool' %}
mdi:air-conditioner
{% elif state=='off' %}
mdi:air-conditioner
{% endif %}
entity: climate.master
icon_color: |-
{% set state=states('climate.master') %}
{% if state=='heat_cool' %}
blue
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
badge_icon: mdi:chess-king
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Master Fan
icon: |-
{% set state=states('fan.master_bedrom_ceiling_fan') %}
{% if state=='on' %}
mdi:ceiling-fan
{% elif state=='off' %}
mdi:ceiling-fan
{% endif %}
entity: fan.master_bedrom_ceiling_fan
icon_color: |-
{% set state=states('fan.master_bedrom_ceiling_fan') %}
{% if state=='open' %}
green
{% elif state=='closed' %}
disabled
{% endif %}
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 66
target:
entity_id: fan.master_bedrom_ceiling_fan
layout: vertical
badge_icon: mdi:chess-king
badge_color: ''
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Frontyard Tap
layout: vertical
icon: |-
{% set state=states('switch.frontyard_tap_state') %}
{% if state=='on' %}
mdi:sprinkler
{% elif state=='off' %}
mdi:sprinkler
{% endif %}
entity: switch.frontyard_tap_state
icon_color: |-
{% set state=states('switch.frontyard_tap_state') %}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: true
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace/pool-and-garden
double_tap_action:
action: more-info
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: iZone Hub
icon: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
mdi:hvac
{% elif state=='dry' %}
mdi:hvac
{% elif state=='off' %}
mdi:hvac
{% endif %}
entity: climate.izone_controller
icon_color: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
blue
{% elif state=='dry' %}
green
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
badge_icon: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
mdi:snowflake
{% elif state=='dry' %}
mdi:water-percent
{% elif state=='off' %}
mdi:hvac
{% endif %}
badge_color: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
blue
{% elif state=='dry' %}
green
{% elif state=='off' %}
disabled
{% endif %}
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Pool Heater
icon: |-
{% set state=states('switch.pool_heater_switch') %}
{% if state=='on' %}
mdi:pool-thermometer
{% elif state=='off' %}
mdi:pool-thermometer
{% endif %}
entity: climate.pool_heater
icon_color: |-
{% set state=states('switch.pool_heater_switch') %}
{% if state=='heat' %}
amber
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
badge_icon: |-
{% set state=states('binary_sensor.zodiac_exo_pool_pump') %}
{% if state=='on' %}
mdi:pump
{% elif state=='off' %}
mdi:pump
{% endif %}
badge_color: |-
{% set state=states('binary_sensor.zodiac_exo_pool_pump') %}
{% if state=='on' %}
green
{% elif state=='off' %}
disabled
{% endif %}
hold_action:
action: navigate
navigation_path: /lovelace/pool-and-garden
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
background-size: cover;
background-color: rgba(159, 212, 166, 0.3);
}
leonkunst88
February 21, 2023, 4:14pm
5662
Is it me, or is it impossible to have icon_color working with a template value?
benchr
February 21, 2023, 9:44pm
5664
what doesn’t work? pretty straight forward to define icon_colour within various cards. there are plenty of examples in this topic. like this.
type: custom:mushroom-template-card
primary: Lights
secondary: |-
{%set lights = states.light
| selectattr('state', 'eq', 'on')
| list | count %}
{% set d1 = '' if lights == 1 else 's' %}
{{lights}} Light{{d1}} on
icon: mdi:lightbulb
icon_color: |-
{% set icon = states.light
| selectattr('state', 'eq', 'on')
| list | count %}
{% if icon==0 %}
grey
{% else %}
yellow
{% endif %}
hold_action:
action: call-service
service: script.turn_of_all_lights
service_data: {}
target: {}
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: lights
fill_container: true
leonkunst88
February 22, 2023, 7:18am
5665
Forgot to mention, but i’m using a Chips Action card. Maybe it’s that?
When i use your code (or mine), and i’ll inspect it’s just echoeing the template code in Chrome Inspector instead of parsing it.
results in:
rak
February 22, 2023, 7:45am
5666
I do not have the picture element in my setup, nor the swiping. You might want to use this code as a starting point.
One of those room cards is represented by this code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.kuche
primary: Küche
tap_action:
action: toggle
icon_color: |-
{% if states.light.kuche.state == 'on' %}
orange
{% else %}
grey
{% endif %}
secondary: >-
{{ '%0.1f°C' | format(state_attr('climate.temperatur_kuche',
'current_temperature')) }} ({{ '%0.0f%%' |
format(states.sensor.heizen_kuche.state | int ) }})
{{ state_attr('climate.temperatur_kuche', 'preset_mode')
| replace('away', 'Reduziert')
| replace('eco', 'Frostschutz')
| replace('sleep', 'Schlafen')
| replace('comfort', 'Komfort') }} - {{ '%0.0f°C' |
format(state_attr('climate.temperatur_kuche', 'temperature')) }}
multiline_secondary: true
icon: mdi:stove
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 80px;
top: -60px;
left: -30px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: light
entity: light.kuchenschrank
content_info: none
use_light_color: false
- type: entity
entity: sensor.window_kueche
content_info: none
icon_color: grey
- type: action
icon: mdi:dots-horizontal
tap_action:
action: navigate
navigation_path: /lovelace-details/kuche
3 Likes
I’ll update my code and share in the next few days so you can take a look!
