That remote looks very good.
But it’s not working with me, this is what is get:
Repaced all the remote.yourremote with my remote.
Thanks
Looks like the buttons are there but with 1px height or something. Please check your values for var(--mush-control-height) and the other mushroom theme variables, or replace them with e.g. 14 px in the button-cards.
You should check out the Firemote Card. Instead of having a card that’s “Kind of like the remote that comes with it”, you can have a card that actually IS the remote that comes with it. Also supports Shield, Fire TV and Apple TV. It’s great combined with a popup card to save space on the dashboard.
1 Like
This is what it looks like, copied it from your code.
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:arrow-left-bottom
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.mibox4
command: BACK
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item1
The problem above what fixed by changing the following:
- border-radius: 14px - height: 42px
Solutions mentioned by ArenaCloser in a PB, thanks again! 
There is only one thing that is not working with me.
When i open Netflix and start watchting, the netflix logo on the remote does not get colored or something, any idea why is that?
1 Like
When Netflix is running, check the value of the current_activity attribute of your remote. For me it’s com.netflix.ninja, maybe for you it’s different. You can get the button to light up by editing the if-statement:
Continuing the fun with more cards. Some printer cards have already been shared here, but I’ll just add to the variety with another one. Largely inspired by this post, it uses the custom bar-card.
Version with vertical bars
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Epson WF2540
entity: sensor.epson_wf_2540_series
secondary: |-
{% if is_state('sensor.epson_wf_2540_series', 'idle') %}
Aan • Inactief
{% elif is_state('sensor.epson_wf_2540_series', 'printing') %}
Aan • Printen...
{% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}
Aan • Gestopt
{% else %}
Uit
{% endif %}
icon: mdi:printer
icon_color: >-
{{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
"disabled" }}
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_wf_2540_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_wf_2540_series_yellow_ink
name: 'Y'
- color: MediumOrchid
entity: sensor.epson_wf_2540_series_magenta_ink
name: M
- color: rgb(var(--cstm-rgb-on))
entity: sensor.epson_wf_2540_series_black_ink
name: B
height: 120px
positions:
icon: 'off'
value: outside
name: outside
target: 0
stack: horizontal
card_mod:
style: |
ha-card {
--bar-card-border-radius: 14px;
margin: -12px -2px -24px -2px;
box-shadow: none;
}
bar-card-name {
font-size: 12px;
}
bar-card-value {
font-size: 12px
}I’m not such a big fan of the thick bars though. After playing around I came up with this compact version with thin horizontal lines, I love it.
Version with horizontal bars
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Epson WF2540
entity: sensor.epson_wf_2540_series
secondary: |-
{% if is_state('sensor.epson_wf_2540_series', 'idle') %}
Aan • Inactief
{% elif is_state('sensor.epson_wf_2540_series', 'printing') %}
Aan • Printen...
{% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}
Aan • Gestopt
{% else %}
Uit
{% endif %}
icon: mdi:printer
icon_color: >-
{{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
"disabled" }}
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
direction: right
entities:
- color: MediumTurquoise
entity: sensor.epson_wf_2540_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_wf_2540_series_yellow_ink
name: 'Y'
- color: MediumOrchid
entity: sensor.epson_wf_2540_series_magenta_ink
name: M
- color: rgb(var(--cstm-rgb-on))
entity: sensor.epson_wf_2540_series_black_ink
name: B
height: 8px
positions:
icon: 'off'
value: 'off'
name: 'off'
target: 0
stack: vertical
card_mod:
style: |
ha-card {
--bar-card-border-radius: 30px;
margin: -12px -2px -8px -2px;
box-shadow: none;
}For the black ink, I’m using a custom theme variable again that returns white color in dark mode, var(--cstm-rgb-on):
mode:
light:
cstm-rgb-on: 30, 30, 30
dark:
cstm-rgb-on: 255, 255, 255
13 Likes
hi, which font did you use?
Would you like to share how this card ended upp in your setup. I guess your version might be better than mine hacked up thing ofacard.
And would you like to describe what values/sensors you are using.
It is easy to mix and choose the wrong sensor, since there are
Watt, watthours, daily, etc… for all enteties…
Below is how my homepage dash on mobile looks like. It just has the bare essentials. All rooms etc (except few exceptions) are on other views (0 for floor 0 etc)
What sensors to use is difficult to say an up to you. In some cases I just want to see current power consumption in watt and sometimes (for instance counting solar power for that day) I use KwH. Generally you will have current power consumption available but KwH not. You will have to create a custom sensor in that case
A thousand thanks! What did you use for the icons instead? I can’t find these here like for example “fapro:fork-knife-duotone”
Don’t you use the play/pause and volume buttons with this remote?
Make default Lovelace card to Mushroom design
Using card mod theme.
- Define default color variable in your theme
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
Default lovelace glance card
card-mod-glance-yaml: |
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
.name {
font-weight: bold;
}
state-badge {
{% if is_state(config.entity, 'on') %}
color: rgba(var(--mush-rgb-green), 1);
background: rgba(var(--mush-rgb-green), .2);
{% elif is_state(config.entity, 'off') %}
color: rgba(var(--mush-rgb-red), 1);
background: rgba(var(--mush-rgb-red), .2);
{% else %}
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
{% endif %}
margin: 15px 0px;
--mdc-icon-size: 22px;
}
state-badge + div {
font-weight: bold;
font-size: 12px;
color: var(--secondary-text-color)
}
Default lovelace entities card
card-mod-row-yaml: |
hui-generic-entity-row:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
{% if is_state(config.entity, 'on') %}
color: rgba(var(--mush-rgb-green), 1);
background: rgba(var(--mush-rgb-green), .2);
{% elif is_state(config.entity, 'off') %}
color: rgba(var(--mush-rgb-red), 1);
background: rgba(var(--mush-rgb-red), .2);
{% else %}
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
{% endif %}
background-size: cover;
background-position: center;
border-radius: 100% !important;
margin: 0 15px 0 0;
--mdc-icon-size: 22px;
}
.secondary {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .value {
margin-left: 0px !important;
font-weight: bold;
padding: 16px 0;
position: relative;
}
Default HA more info dialog
card-mod-more-info-yaml: |
ha-more-info-info:
$:
state-card-display,state-card-button,state-card-input_button,state-card-input_number,state-card-media_player,state-card-input_select:
$:
.: |
.state {
font-weight: bold;
}
state-info:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
color: rgba(var(--mush-rgb-blue), 1) !important;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
color: rgba(var(--mush-rgb-blue), 1) !important;
background: rgba(var(--mush-rgb-blue), .2);
margin: 0 15px 0 0;
background-size: contain;
border-radius: 100% !important;
--mdc-icon-size: 22px;
}
.time-ago {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .state {
margin-left: 0px !important;
font-weight: bold;
padding: 8px 0;
position: relative;
}
7 Likes
Those are paid Fontawesome icons.
Mushroom inspired Energy-Card (Electricity, Water, Gas)
A compact card with tons of information about Electrical-Energy, Water and Gas-Consumption per Day, Month, Week and Year.
This card uses the following components:
- Stack in a card
- ApexChart-card
- History-Explorer-Card
- Mushroom-Cards
- Button-card
- Tabbed-card
- Browser-Mod (for the Pop-Up-Card)
Can´t Paste the YAML-Code here - too long
YAML-Code for the Card
YAML-Code for the Pop-Up-Card
39 Likes
I like the use of the icons in the Sankey chart! Will add those to mine too.
1 Like
hi, this is a great solution! but I have some display problems with some lights.
- those that are simple buttons
- some are also the same but are displayed in a different way
Remove the margin from the 1st button. For some reason it doesnt act nice in pop-up cards
So this:
mushroom-button:nth-child(2)$: |
:host {
z-index: 1;
margin-right: 5px !important;
Instead just this:
mushroom-button:nth-child(2)$: |
:host {
z-index: 1;
thank you very much!
…for the problem with the first light, what do you recommend to have a better view? it is a switch (shelly) transformed into light. …I ask because I use your modification with auto-entities.