Hi Mario,
new here?
can actually be found quite easily if you search.
I hope Rhys will not be scared away, meanwhile he is written to for a lot of trivial stuff.
1 Like
Have a look here:
Do you mean make a Grid sticky? Like this:
type: custom:mod-card
card:
type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
- type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
- type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
:host {
position: sticky;
bottom: 12px;
}
Probably something to do with your theme. Try default theme and see if it works then.
1 Like
It doesn’t work for me either.
Tested with several themes
A big thumbs up for your work!
Try like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:home
tap_action:
action: navigate
navigation_path: /homekit-infused/main_room
- type: template
icon: mdi:alpha-d-circle
icon_color: blue
tap_action:
action: navigate
navigation_path: /homekit-infused/home
- type: template
icon: mdi:alpha-v-circle
icon_color: purple
tap_action:
action: navigate
navigation_path: /homekit-infused/vally_esther_room
- type: template
icon: mdi:robot-vacuum
icon_color: |-
{% set state=states('vacuum.nestico_robot_vacuum') %}
{% if state=='docked' %}
grey
{% elif state=='cleaning' %}
blue
{% elif state=='error' %}
red
{% elif state=='paused' %}
pink
{% elif state=='returning' %}
purple
{% endif %}
tap_action:
action: navigate
navigation_path: /homekit-infused/vacuum
- type: template
icon: mdi:speaker
icon_color: green
tap_action:
action: navigate
navigation_path: /homekit-infused/media
- type: template
icon: mdi:dog
icon_color: red
tap_action:
action: navigate
navigation_path: /homekit-infused/luna
- type: template
entity: climate.3family_room
icon_color: |-
{% set status = state_attr('climate.3family_room','hvac_action') %}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
icon: mdi:thermostat
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.3family_room
fill_container: false
show_temperature_control: true
collapsible_controls: false
hvac_modes:
- heat
- cool
- fan_only
layout: horizontal
- type: custom:thermostat-dark-card
entity: climate.3family_room
hvac:
states:
idle: idle
cooling: cooling
heating: heating
step: '0.5'
chevron_size: '100'
pending: '3'
idle_zone: '2'
highlight_tap: true
card_mod:
style: |
ha-card {
background: #111111;
}
- type: action
icon_color: white
icon: mdi:magnify
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: custom:search-card
max_results: 10
actions:
- matches: ^toggle (.+\..+)
name: Toggle {1}
service: homeassistant.toggle
service_data: null
entity_id:
'1': null
excluded_domains:
- alarm_control_panel
- automation
- binary_sensor
- button
- camera
- device_tracker
- govee
- group
- input_boolean
- input_number
- input_select
- input_text
- number
- script
- select
- siren
- update
- zone
dismissable: true
autoclose: false
right_button: MEDIA
left_button: HOME
left_button_action:
service: browser_mod.navigate
data:
path: /homekit-infused/main_room
right_button_action:
service: browser_mod.navigate
data:
path: /homekit-infused/media
target: {}
card_mod:
style: |
ha-card {
--chip-background: #11224D;
}
.content {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
alignment: justify
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-font-size: 0.3em;
--chip-height: 50px
}
style: |
ha-card {
background: #111111;
border-radius: 30px;
z-index: 999 !important;
position: sticky !important;
position: -webkit-sticky !important;
top: 0 !important;
}
1 Like
You can combine animations like this:
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
{{ 'animation: illumination 2s infinite, shine 2s infinite;' if is_state('binary_sensor.ruch_kuchnia_occupancy', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
@keyframes shine {
0% {
opacity: 0.5;
filter: brightness(10%);
}
50% {
opacity: 1;
filter: brightness(100%);
}
100% {
opacity: 0.5;
filter: brightness(10%);
}
}
On a new View with default theme, does this work for you?
type: custom:mushroom-template-card
primary: Sticky Mushrooms
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
:host {
position: sticky;
bottom: 12px;
z-index: 99;
}
ha-card {
margin-top: 2000px;
}
It works with a new dashboard!
With the original theme as well as with the minimalist-desktop theme that I use it’s ok
But I do not understand why it does not work on my other dashboards
How do i add other card mod details to the below card please. I want to chaneg the padding as well as margin??
type: custom:mushroom-light-card
entity: light.master_bedroom_bedside_lamp_brads
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
collapsible_controls: false
layout: default
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.20) !important;
ha-card {
padding: 20px;
}
You can add the progress bar to a Mushroom Card with entity picture like this.
Mushroom Person Card with Battery Bar:
type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.container:before {
content: "";
height: 100%;
width: 100%;
background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, transparent 0% 100%);
border-radius: var(--icon-border-radius);
position: absolute;
-webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 2px) at 50% 50%, transparent 100%, black 0);
}
4 Likes
Like this:
type: custom:mushroom-light-card
entity: light.office_light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
collapsible_controls: false
layout: default
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.20) !important;
.: |
ha-card {
--spacing: 20px;
}
Try adding things into the new dash to see what is breaking it.
1 Like
Cheers mate!
1 Like
no I use the custom layout-card with grid, here an example
type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
mediaquery:
# Mobile
"(max-width: 800px)":
grid-template-rows: "auto"
grid-template-columns: "1fr"
overflow: auto;
grid-template-areas: |
"header"
"main"
"footer"
my idea was trying s.th like that for footer but it does not work
- view_layout:
grid-area: "footer"
show:
mediaquery: "(max-width: 800px)"
type: "mushroom-template-card"
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
:host {
position: sticky;
bottom: 12px;
}
Of course I know the documentation for Universal Media Player. I thought Rhys had used templates to determine which player was used last.
Legend. Ta.
Hey guys,
I struggle with the mushroom theme and its ‘lines/borders’. Normally i would mask them using the following code;
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
however, i can’t seem to get rid of these lines/borders (image below). Can someone take a look at my code to see what im doing wrong?
code:
- type: conditional
conditions:
- entity: sensor.plex_dc_nashost
state_not: '0'
chip:
type: template
icon: mdi:plex
icon_color: orange
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plex monitor
content:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-entity-card
entity: sensor.plex_dc_nashost
name: Users
icon: mdi:plex
icon_color: '#e5a00d'
- type: custom:mushroom-entity-card
entity: sensor.tautulli_total_bandwidth
name: Bandwith
icon: mdi:lan
icon_color: '#e5a00d'
- type: custom:mushroom-entity-card
entity: sensor.tautulli_top_movie
name: Top Movie
icon: mdi:movie-filter
icon_color: '#e5a00d'
- type: custom:mushroom-entity-card
entity: sensor.tautulli_top_tv_show
name: Top Series
icon: mdi:filmstrip
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
theme: Mushroom Shadow
- type: entity-filter
entities:
- >-
media_player.plex_plex_for_samsung_tv_ue55f8000
- media_player.plex_plex_for_ios_tims_ipad
- media_player.plex_plex_web_chrome_osx
- media_player.plex_plex_web_chrome_windows
- media_player.plex_plex_for_lg_lg_43uj670v_zd
- media_player.plex_plex_web_chrome_windows_2
- >-
media_player.plex_jorritroom12_live_nl_plex_for_lg_lg_55un71006lb
- >-
media_player.plex_shoq_value_plex_for_lg_lg_oled83c14la
- media_player.plex_plex_web_chrome_windows_4
- >-
media_player.plex_plex_for_playstation_5_ps5_825
- media_player.plex_plex_for_ios_tims_iphone
- media_player.plex_plex_web_chrome_windows_6
state_filter:
- playing
- paused
card:
type: entities
card_mod:
style: |
ha-card:after {
content: "{{ (states.sensor.plex_dc_nashost.state | int) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(255, 191, 0);
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: center
Image
Works great, may try a new animation now that I know it works, thanks!
1 Like
Changing my theme did nothing but changed my colors, don’t think the theme has anything to do with it. It shows up but just doesn’t overlay on top of the other cards.
Tried with and without gap-card on default theme and nothing changed, it won’t overlay just gets pushed down. I have kiosk mode btw if that makes a difference.