There are so many awesome examples in this thread, can we please just make it an unofficial rule that if you share screenshots of your work that you also post the code for themā¦? Someone will inevitably ask for it anyway so this will save people the trouble (and creating so many posts).
You can use the āhide detailsā function under the gear icon in the post editor to keep things neat and tidy like this rather than your post being crazy long!
Answering myself here, but in-case anyone else is looking for a way to do this, I think that once this change is added then it will be possible?..
Love this theme, Iāve spent the last 2 days creating a completely new dashboard using Mushroom and itās looking great. As great as it looks, Iād love to be able to change the font across the whole theme, perhaps using Google Fonts? When I tried adding .css style and fonts to the www folder, it seemed to break the whole dashboard. Any ideas on how to safely replace the font across the whole theme? Thanks
I see you are using FireTV. Can you select tv shows and movies on your dashboard and start dem directly on the firetv? How? Iād love to do it that way as well.
Can I remove the border around the pictures so you can see the entire thing?
For example, in āgarageā, āmaster bedā, āguest bed & bathā, the entire picture is visilble.
In ālawn and gardenā, ākitchenā, its cut off with the circle.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Lawn & Garden
secondary: ''
icon: mdi:sprout
layout: vertical
icon_color: green
fill_container: true
tap_action:
action: navigate
navigation_path: garden
picture: /local/mushroom_icons/lawn_and_garden1.png
card_mod:
style:
mushroom-card:
mushroom-state-item:
mushroom-state-info:
$: |
.container .primary {
white-space: normal;
}
.: |
mushroom-state-item {
margin-bottom: 0px;
}
- type: custom:mushroom-template-card
primary: Garage
secondary: ''
icon: mdi:car
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: garage
icon_color: black
picture: /local/mushroom_icons/garage1.png
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Office
secondary: ''
icon: ''
layout: vertical
icon_color: ''
fill_container: true
tap_action:
action: navigate
navigation_path: office
picture: /local/mushroom_icons/office1.png
- type: custom:mushroom-template-card
primary: Kitchen
secondary: ''
icon: mdi:knife
layout: vertical
icon_color: deep-orange
fill_container: true
tap_action:
action: navigate
navigation_path: kitchen
picture: /local/mushroom_icons/kitchen1.png
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Master bed
secondary: ''
icon: mdi:bed-king-outline
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: master-bed
icon_color: indigo
picture: /local/mushroom_icons/master_bedroom1.png
- type: custom:mushroom-template-card
primary: Hall & Loft
secondary: ''
icon: mdi:wall-sconce
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: loft
icon_color: brown
picture: /local/mushroom_icons/hallway1.png
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ems Room
secondary: ''
icon: mdi:baby-face-outline
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: ems-room
icon_color: purple
picture: /local/mushroom_icons/em_room1.png
- type: custom:mushroom-template-card
primary: Laundry
secondary: ''
icon: mdi:tumble-dryer
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: laundry
icon_color: teal
picture: /local/mushroom_icons/laundry1.png
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Guest Bed & Bath
secondary: ''
icon: mdi:bag-suitcase-outline
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: guest-bed
icon_color: light-blue
picture: /local/mushroom_icons/guest1.png
- type: custom:mushroom-template-card
primary: Basement
secondary: ''
icon: mdi:stairs
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: basement
icon_color: blue
picture: /local/mushroom_icons/basement1.png
I can select specific tv shows and movies from Netflix and place them into my UI like this :
It is very easy to do that. First you have to take id of your favorite show from netflix using a browser.
As you can see from the picture that the id of that show is 80067930. It is the number that comes straight after watch/.
Then you create a script for it.
A sample script of mine is :
alias: Start Mr. Robot
sequence:
- service: androidtv.adb_command
data:
command: >-
am start -n com.netflix.ninja/.MainActivity -a
android.intent.action.VIEW -e amzn_deeplink_data 80045933
target:
entity_id: media_player.fire_tv_192_168_1_86
mode: single
icon: mdi:television
This is scripts activates Mr. Robot show from Netflix and plays it on my Fire TV. It can also be done with any Android TV.
Then for the last step just find the poster of the show and place it into your dashboard. Remember to activate toggle mode when you press to the poster.
Wondering if anyone can help with this slightly weird oneā¦
On iOS, everything is working correctly, using the Mushroom theme if I select a button nothing is highlighted:
I added an āactiveā tag style to the button and now when I tap it, iOS does the expected by showing the overlay:
type: custom:mushroom-light-card
style: |
ha-card:active {
background-color: rgba(165, 165, 165, 0.3);
}
results in this:
Now Iām using an old android phone as a smart home remote, running fullykiosk to display HA (but the following results are present in the HA app & Chrome app as well)
Mushroom theme, no style changes:
It highlights the non-padded part of the button, I tried adding:
ha-card {
webkit-tap-highlight-color: transparent;
webkit-tap-highlight-color: rgba(0,0,0,0);
}
As it looks like Android and iOS differ with tap actions, but it didnāt do anything.
So when I add the style to add an overlay when active, it looks like this:
Which looks fairly shitty.
I assumed this may be a Home Assistant issue but then I tried a generic HA button and both iOS and Android display an overlay when you tap it (with no styling changes)
Anyone have an idea? itās driving me crazy
A normal home assistant button shows and active overlay as per normal (iOS):
This is a boolean I use to expand menus. You can create a boolean from settings>devices&services>helpers
when on helpers section just press"Create Helper"
choose toggle, name it. After created you can use the entity for dropdown. When the entity state is off it means dropdown menu is closed. Using conditional card you can set anything you like on āOFFā mode.
Like in this example :
As you can see I am using chips on the first row when the dropdown is on āOFFā state. When I click it changes the state to āonā and the top menu turns into this :
As you can see it changes into a chip menu and with that I can visit my other mobile pages. Because I am going to use sidebar this menu is going to be useful for me. Sidebar disables topbar and hass siderbar. So with that I can use a fullscreen of the HA Mushroom instance that I have created.
Odd. I canāt reproduce the OS-provided overlay on my phone, but you could always try to do something with @supports to only add it when itās not there by default.
Recorded this on my iphone but exactly same behaviour on Android app with a standard Home Assistant button, are you saying yours doesnāt do this?
That ripple behavior is provided by Home Assistant, not the OS.
Anyone know if its possible to get cards like entity and cover chips to use the ādisabledā colour when off, rather than going black like they currently do?
Iām guessing it may be possible via the theme file? - which is an option if needed, but ideally per card would be great.
I could use the template card/chip but it seems crazy to recreate the function of something like the cover card just to get the disabled color while its off/open. 
Could you send a screenshot of what you currently see?
I tried to use;
'{{ ''red'' if is_state(entity, ''closed'') else ''disabled'' }}'
for the icon_color (I use the same for my template chips) but it seems that there isnāt an ability to specify the colour like this cards other than template.
I was hoping there was some way to grey the card out when the cover is open and then have a colour set when its āclosedā
May I ask you something ?
I have a transparent dropdown menu.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 330px
margin: '-4px -4px 8px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.dropdown_radios
name: Salon Radyolar
hide_state: true
icon: mdi:radio
use_light_color: false
show_color_control: true
collapsible_controls: true
show_brightness_control: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.dropdown_radios
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: amber
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: entities
entities:
- type: custom:mushroom-entity-card
entity: script.salon_powerfm
name: Power FM
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: entities
entities:
- type: custom:mushroom-entity-card
entity: script.salon_radio_fenomen
name: Fenomen
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: entities
entities:
- type: custom:mushroom-entity-card
entity: script.salon_joy_turk_fm
name: Joy TĆ¼rk
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: entities
entities:
- type: custom:mushroom-entity-card
entity: script.salon_radyo_mydonose
name: Mydonose
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'on'
card:
type: entities
entities:
- type: custom:mushroom-entity-card
entity: script.salon_powerfm
name: Power FM
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.5);
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
When the dropdown is closed it is fine. Everything is transparent.
But when I open the dropdown although I chose background: none; the transparency disappears. Do you have any idea about what is causing this ?
Also yes, Iāve tried it on Chrome and Firefox. Iāve also tried it on two different computers + my cellphone using the HA companion app.
I removed the themes configuration from my configuration.yaml file and lost the ability to select a theme. I think it defaulted to whatever home assistant uses. I then logged out, cleared cache, then went into an incognito window and still had the same issue.
Itās the only card that I notice this happening to. Iām at a loss. I noticed that switching between Light and Dark mode did change the icons from white to black. I think it changes between #e1e1e1 (shows up as rgb(225, 225, 255)) and #212121 (shows up as rgb(33, 33, 33)). The only place I see those values when I inspect element is āāprimary-text-colorā but none of my themes have that defined with those values.
You had some extra entities cards in there. This should work better:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px 8px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.dropdown_radios
name: Salon Radyolar
hide_state: true
icon: mdi:radio
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.dropdown_radios
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: amber
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: custom:mushroom-entity-card
entity: script.salon_powerfm
name: Power FM
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: custom:mushroom-entity-card
entity: script.salon_radio_fenomen
name: Fenomen
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: custom:mushroom-entity-card
entity: script.salon_joy_turk_fm
name: Joy TĆ¼rk
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'off'
card:
type: custom:mushroom-entity-card
entity: script.salon_radyo_mydonose
name: Mydonose
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_radios
state: 'on'
card:
type: custom:mushroom-entity-card
entity: script.salon_powerfm
name: Power FM
icon_type: entity-picture
secondary_info: name
primary_info: none
layout: vertical
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action: none
fill_container: true
card_mod:
style: |
ha-card {
background: none;
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.5);
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
You could try creating a new empty dashboard and see if it still has the issue.
Is this what you wanted?
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:home
icon_color: red
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-red), 0.2);
}
- type: template
icon: mdi:lightbulb-group
icon_color: orange
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-orange), 0.2);
}
- type: template
icon: mdi:thermometer
icon_color: blue
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0.2);
}
- type: template
icon: mdi:power-plug
icon_color: green
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-green), 0.2);
}
- type: template
icon: mdi:shield-home
icon_color: purple
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-purple), 0.2);
}
- type: template
icon: mdi:home-assistant
icon_color: teal
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-teal), 0.2);
}
alignment: justify