Did you try setting a blank character as secondary info (other than space, just google and copy)?
1 Like
I would like to reduce this distance, can someone help me do this?
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: false
outer_padding: false
background: true
cards:
- type: custom:mushroom-template-card
entity: weather.buienradar
icon: mdi:weather-night
icon_color: '#03A9F4'
layout: vertical
card_mod:
style: |
:host {
--mush-icon-size: 90px;
}
- type: custom:mushroom-title-card
title: '{{ states.weather.buienradar.attributes["temperature"] }} Ā°C'
subtitle: '{{ states.weather.buienradar.attributes["humidity"] }} %'
alignment: center
I am looking for mushroom card examples where people are using it to represent a room with inset buttons for multiple devices.
Iāve seen a few like these, but they are good for only maybe 2 buttons while maintaining proper spacing:
So would love to see example cards others have created for this purpose as I think this could help me avoid making different dashboards per room when most of my rooms have <=4 device toggles.
1 Like
Try like this:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: custom:mushroom-entity-card
entity: group.nuvole_giorno
name: NuvolositĆ Giorno
icon: mdi:script-outline
icon_color: light-blue
padding: 0
entities:
- type: custom:auto-entities
filter:
include:
- group: group.nuvole_giorno
options:
type: custom:mushroom-entity-card
icon_color: light-blue
tap_action: null
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: first
card_mod:
style: |
:host {
--masonry-view-card-margin: -12px 8px 0px 8px;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
}
card_mod:
style:
fold-entity-row$: |
ha-icon {
background: none !important;
margin-right: 24px !important;
--toggle-icon-width: 21px !important;
color: rgb(var(--rgb-disabled-color));
}
.: |
.card-content {
padding: 0;
}
* {
margin: 0 !important;
}
You can do away with the stack-in-card and achieve the same look like this:
type: custom:mushroom-template-card
entity: weather.buienradar
icon: mdi:weather-night
icon_color: '#03A9F4'
layout: vertical
primary: >-
{{ state_attr(entity, "temperature")
}} Ā°C
secondary: >-
{{ state_attr(entity, "humidity") }}
%
card_mod:
style: |
:host {
--mush-icon-size: 90px;
--mush-card-primary-font-size: 24px;
--mush-card-primary-font-weight: normal;
--mush-card-secondary-font-size: 16px;
--mush-card-secondary-font-weight: normal;
}
1 Like
Please would you share your code for these room cards?
They arenāt room cards per se, but here is my room light card, hot tub, and vacuum card. They have multiple buttons. I pretty much only use mobile so to have multiple pieces of info and still be readable I had to go full width of a card.
8 Likes
When i change the temperature it will change to āheatingā. I need this button to put it back to the automatic scheme again.
Would you mind sharing your code? It looks really nice.
Thank you!
A quick question. How do I remove the background ādiscā behind the icon?
I like this shows the entire artwork. I copied it and tested but though I see no errors I am only seeing this -
Not sure what I am missing.
Hello!!! Very simple for some I wold guess. How can I make a widther room for the left card and reduce the space for the right one?
Instead of 50%-50% something like 60%-40%.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Ventilador Techo
secondary: >-
{% if is_state('fan.fan_1', 'on') %}
{{state_attr('fan.fan_1','percentage')}}% - Timer:
{% set timer = 'timer.fan_1_runing_timer' %}
{% set ct =
((as_timestamp(state_attr(timer,'finishes_at'))-as_timestamp(now()))/60)|int|round(0)%}
{% if ct > 60 %}{{ ct // 60 }}:{{ '{:0>2d}'.format(ct%60) }}{% else %}
{{ct}}{% endif %} min.
{% else %}
Apagado
{% endif %}
icon: mdi:fan
entity: fan.fan_1
icon_color: |-
{% if is_state('fan.fan_1', 'on') %}
green
{% else %}
grey
{% endif %}
fill_container: true
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% if is_state('fan.fan_1', 'on') %}
mdi:sun-thermometer
{% endif %}
entity: input_select.fan_1_direction
icon_color: |-
{% if is_state('input_select.fan_1_direction', 'forward') %}
orange
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: call-service
service: fan.set_direction
data:
direction: forward
target:
entity_id: fan.fan_1
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% if is_state('fan.fan_1', 'on') %}
mdi:snowflake-thermometer
{% endif %}
entity: input_select.fan_1_direction
icon_color: |-
{% if is_state('input_select.fan_1_direction', 'reverse') %}
blue
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: call-service
service: fan.set_direction
data:
direction: reverse
target:
entity_id: fan.fan_1
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-border-width: 1;
}
Well, fixed the cover art issue. Was missing the setting for the mini media player.
I followed your changings but nothing changedā¦ i still have the icons outside the margins of the card, just like the screenshot i quotedā¦
Awsome!
Could i request i animation for a car when in use.
Perhaps: mdi:car-hatchback, so its in profile.
How do you develop theses animations?
1 Like
For my cards that I want 60%/40% I use the custom layout card:
Basic:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 60% 40%
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
stuff...
- type: custom:mushroom-template-card
stuff...
Here is my complete card that has a 60/40 split and then has inside the second one more stuff. I wrap everything in a vertical stack in card so the background and border goes around everything
Example Card 2
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 60% 40%
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
primary: Garage
fill_container: true
entity: group.all_garage_doors
icon: mdi:garage
icon_color: grey
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
secondary: ''
card_mod:
style:
.: |
ha-card {
border:0px;
box-shadow: none;
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
entity: cover.garage1_door
tap_action:
action: call-service
service: cover.toggle
data: {}
target:
entity_id: cover.garage1_door
icon: |
{% if is_state(config.entity, "open") -%}
mdi:garage-open
{%- else -%}
mdi:garage
{%- endif %}
icon_color: |
{% if is_state(config.entity, "open") -%}
deep-orange
{%- else -%}
grey
{%- endif %}
content: Garage 1
card_mod:
style:
.: |
ha-card {
{% if is_state(config.entity,'open') %}
--text-color: rgb(var(--rgb-white));
--icon-color: rgb(var(--rgb-white));
background-color: rgba(var(--rgb-red), 0.2) !important;
{% else %}
--text-color: rgb(var(--rgb-grey));
--icon-color: rgb(var(--rgb-grey));
background-color: rgba(var(--rgb-disabled),0.10) !important;
{% endif %}
border: 0px;
}
- type: template
entity: cover.garage2_door
tap_action:
action: call-service
service: cover.toggle
data: {}
target:
entity_id: cover.garage2_door
icon: |
{% if is_state(config.entity, "open") -%}
mdi:garage-open
{%- else -%}
mdi:garage
{%- endif %}
icon_color: |
{% if is_state(config.entity, "open") -%}
deep-orange
{%- else -%}
grey
{%- endif %}
content: Garage 2
card_mod:
style:
.: |
ha-card {
{% if is_state(config.entity,'open') %}
--text-color: rgb(var(--rgb-white));
--icon-color: rgb(var(--rgb-white));
background-color: rgba(var(--rgb-red), 0.2) !important;
{% else %}
--text-color: rgb(var(--rgb-grey));
--icon-color: rgb(var(--rgb-grey));
background-color: rgba(var(--rgb-disabled),0.10) !important;
{% endif %}
border: 0px;
}
style: |
.chip-container {
padding-right: 08px;
padding-top: 15px;
padding-bottom: 4px;
}
3 Likes
I was wondering if it is possible to add an effects control to the light card with a dropdown list. All of my lights are configured with numerous scenes and it would be great to be able to access them from the light card. If this is not possible, how do you create an input select card with a dropdown list of the input select options similar to the home assistant default (and very clunky) entities card? Iām guessing it is possible with the template card but I canāt determine how to do so.
Thereās probably a better way, but hereās how I did an effects list for my WLED strip.
If you need to create the effects list as an entity, this goes in configuration.yaml and reference your light with the effects.
template:
select:
- name: "Example select: WLED effect"
state: "{{ state_attr('light.wled', 'effect') }}"
options: "{{ state_attr('light.wled', 'effect_list') }}"
select_option:
service: light.turn_on
target:
entity_id: light.wled
data:
effect: "{{ option }}"
Example Card with the light card and select card
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.wled
show_brightness_control: true
show_color_control: true
use_light_color: true
layout: horizontal
name: Example Light
show_color_temp_control: false
fill_container: true
primary_info: name
collapsible_controls: true
icon: mdi:led-strip-variant
- type: custom:mushroom-select-card
entity: select.example_select_wled_effect
icon: none
primary_info: none
secondary_info: none
icon_type: none
5 Likes
please share the code for this