type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: White
secondary: ''
icon: mdi:led-strip-variant
layout: vertical
fill_container: true
tap_action:
action: call-service
service: input_select.select_option
data:
option: White
target:
entity_id: input_select.light_strip_color
icon_color: grey
badge_icon: |-
{% if is_state("input_select.light_strip_color", "White") %}
mdi:star
{% else %}
{% endif %}
2 Likes
If youāre willing, the dashboard view with sidebar would be great! Nice work on this!
1 Like
Does using stack-in-card and layout-card achieve the look you want?
type: custom:stack-in-card
cards:
- type: custom:layout-card
cards:
- type: custom:mushroom-title-card
title: Estado energƩtico
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_select.energy_system_mode
- type: entity
entity: input_select.energy_battery_chargecurve
- type: entity
entity: input_number.energy_settings_battery_capacity
- type: entity
entity: sensor.energy_battery_soc
- type: entity
entity: sensor.energy_battery_voltage
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-card-background-color), 0.7) !important;
}
- type: custom:bar-card
entities:
- entity: sensor.energy_acsources_grid_power
max: 4500
- entity: sensor.energy_pvsources_total_power
max: 9000
- entity: sensor.energy_battery_power
min: -5000
max: 5000
- entity: sensor.energy_acloads_critical_power
max: 7300
- entity: sensor.energy_acloads_diverter_power
max: 7300
- entity: sensor.energy_acloads_ev_power
max: 7300
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.7) !important;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.9) url( '/local/solar_production.jpeg' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
}
1 Like
To add an image for the icon, have a look at this post
Yes! Thatās the look I wanted. Thank you very much.
I didnāt have those custom cards installed. Iāll take a look on them and learn what they are useful for.
Mmmā¦ Iāll also try to reduce the padding of the heading.
2 Likes
Can you post the code that you are using so we can have a look?
1 Like
Thanks to all the help from a lot of people I was finally able to get the things worked that I wanted to work!! [PS I didnāt bother blocking out my addressā¦ look me up on the internet and itās there anyway LOL]
Thank you all again!
and when Iām on the move:
2 Likes
Is it possible to change font color on secondary line?
Thanks!
Why would you want to do that? You could use card-mod for that, and you might be able to theme it.
Itās blue and hard to see on my phoneā¦ trying card_mod but getting nowhere.
What theme are you using? See if itās still blue with the default theme.
1 Like
How did you get the āJohn, there are 2 lights onā thing working? Tnx!
Probably with templating. The name can be accomplished with {{ user }}.
Iām a copy paste user. No programming skills haha.
I hope he will copy it 
1 Like
Can you share your other mobile pages ? Event the snapshots will be fine.
Hereās mine, it has a exclusion (light.fontein, filter) in it which it does not count. And the sentence in Dutch is different for just one light on. Also itās empty (no line) when no lights are on. Hope it helps.
type: custom:mushroom-template-card
primary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Goede avond, {{user}}!
{% elif (time >= 12) %}
Goede middag, {{user}}!
{% elif (time >= 6) %}
Goede morgen, {{user}}!
{% elif (time >= 0) %}
Goede nacht, {{user}}!
{% else %}
Hallo, {{user}}!
{% endif %}
secondary: >-
{% set filter = ['light.fontein'] %}
{% if (states.light | selectattr('state','eq','on') | rejectattr('entity_id',
'in', filter) | list | count)==0 %}
{% elif (states.light | selectattr('state','eq','on') |
rejectattr('entity_id', 'in', filter) | list | count)==1 %}
Er is {{ states.light | selectattr('state','eq','on') | rejectattr('entity_id', 'in', filter) | list | count }} lamp aan.
{% else %}
Er zijn {{ states.light | selectattr('state','eq','on') | rejectattr('entity_id', 'in', filter) | list | count }} lampen aan.
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
style: |
ha-card {
background-color: transparent; border: none; box-shadow: none;
}
1 Like
Hi guys, just a quick question on the Mushroom themes. Is it possible to set a background image such as the iOS dark theme?
First create a sensor for all my lights and switchesā¦ hereās mine I call it lightson
- platform: template
sensors:
lightson:
friendly_name: "Lights On"
value_template: >
{% set lights = [
states.light.island_lights_2,
states.light.outside_front_lights,
states.switch.bed_lights_2,
states.switch.counter_lights,
states.switch.front_room_night_lights,
states.switch.sink_lights,
states.switch.0x00124b001f8abec0,
states.switch.bedroom_light_switch,
states.switch.bedroom_ambient_tv,
states.switch.bedroom_light_switch,
states.switch.front_bedroom_light_switch,
states.switch.front_room_night_lights,
states.switch.livingroom_2,
states.switch.night_light_hallway,
states.switch.wled_fun_nightlight,
states.light.wled_fun,
states.light.wled_soundreactive,
states.switch.colored_light
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
Then in my lovelace this:
- type: custom:mushroom-template-card
primary: 'John there are {{ states("sensor.lightson") }} lights on'
entity: sensor.lightson
icon: mdi:lightbulb-alert
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
4 Likes
I know just about enough to be dangerous hahahhaha But Iām learning. BUT if someone creates something and shares it wellā¦ thatās awesome!
Any ideas of how to increase the icon size without widening the gap between text and icon? The gap is pretty big already and Iām not sure how to get the text closer to the icon.
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Scenes
icon: phu:scene-relax
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: scenes
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: phu:bulb-group-classic-4-alt
icon_color: yellow
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: phu:spot-bulb-top
icon_color: white
layout: vertical
tap_action:
action: navigate
navigation_path: br30s
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
primary-font-size: 3px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Shades
icon: phu:blind-tilt-closed
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Climate
icon: phu:thermostat
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.01);
--ha-card-background: transparent;
}
Also this isnāt setup fully yet which is why 99% of the icons are duplicated.
3 Likes