Jpsy
June 10, 2022, 5:34pm
1239
Jpsy:
Though I already have great dashboards, I really would like to include Mushroom cards. But to do so, I definitely need CSS control for fine-tuning or else my existing dashboard compositions will be blown apart.
As I already said in an intermediate posting, I later discovered that the best way for this fine tuning are Mushroom Themes . They allow you to control many aspects of the Mushroom Cards.
If you already have a theme in place, you can simply add the relevant mushroom variables to your theme and redefine their values. I.e. one of my own themes is call āAnJoWi Light Themeā and I simply added some mushroom vars to its YAML file:
AnJoWi Light Theme:
# my existing theme settings
primary-color: rgb(26, 115, 232)
...
# my new mushroom settings:
mush-spacing: 5px # was: 12px, i.e. space between Icon+Name and Slider
mush-card-primary-font-size: 18px # was: 14px
mush-card-primary-font-weight: normal # was: bold
And today I found that in conjunction with card-mod 3 of Thomas LovƩn it is even possible to add these mushroom theme vars to individual mushroom cards!
type: custom:mushroom-light-card
entity: light.kitchen
card_mod:
style: |
:host {
height: 90px;
--mush-icon-size: 52px;
--mush-icon-symbol-size: 0.8em;
--mush-spacing:5px;
}
This is really VERY helpful.
3 Likes
Not to belittle your clues that you had lately but weāre doing this card-mod magic for individual cards for a couple of hundreds of posts in this thread.
Youāre late to the party but of course still welcome.
1 Like
Jpsy
June 10, 2022, 6:10pm
1241
Oh shit!
Weāll laughing about this when weāre old.
Now buckle up and killerspeed to the where-the-heck-should-insert-this-code-snippet-this-time-hell-of-a-ride!
2 Likes
What is the source for your background images?
Found matching pictures for all my rooms there.
Not fully ready but pretty satisfied with the overall look between comic, color and freshness.
8 Likes
freirejc
June 10, 2022, 9:10pm
1245
The part where you put the icons into the template cards, like below:
Here you go!
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Foyer
secondary: Landing
icon: mdi:door
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: foyer
icon_color: deep-purple
hold_action:
action: none
double_tap_action:
action: none
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: conditional
conditions:
- entity: light.foyer_lights
state: 'on'
chip:
type: entity
entity: light.foyer_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.foyer_lights
content_info: none
icon: mdi:lightbulb
- type: template
entity: lock.door_lock_2
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
- type: template
entity: sensor.front_door_open
icon: |-
{% set state=states(entity) %}
{% if state=='Open' %}
mdi:door-open
{% elif state=='Closed' %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='Open' %}
red
{% elif state=='Closed' %}
green
{% else %}
grey
{% endif %}
style: |
ha-card {
height: 102px;
{% if is_state('light.foyer_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
5 Likes
freirejc
June 10, 2022, 9:19pm
1247
Thank you so muchā¦ I gonna try!
freirejc
June 10, 2022, 9:23pm
1248
Iām getting this circle around the icons. Do u know how to remove it?
freirejc
June 10, 2022, 11:47pm
1250
it workedā¦
My chips card has a bunch of (conditional) chips and itās just the icon for the 7th conditional chip that Iām trying to rotate. Any ideas how to do that? I tried using mushroom-conditional-chip:nth-child(7): syntax but I donāt think it likes the double colonsā¦
Add an empty placeholder ' ' for the secondary information line of the middle container.
2 Likes
atomicpapa
June 11, 2022, 12:01am
1253
Is there a way to make the background of the chips transparent and the icon always black when the switch/light is off, regardless of theme or mode? I am also attempting to get the background image to fade if no lights are on per this post .
type: custom:stack-in-card
mode: vertical
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/rooms/3249.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.living_room_lights', 'on') %}
0.2
{% elif is_state('light.living_room_lights', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
cards:
- type: custom:mushroom-chips-card
alignment: center
style: |
ha-card {
'--chip-box-shadow': none;
'--chip-background': none;
'--chip-spacing': 0; }
chips:
- type: light
entity: light.porch_light
content_info: none
icon: mdi:outdoor-lamp
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: false
- type: light
entity: light.entryway
content_info: none
icon: bha:dome-light
use_light_color: false
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: light
entity: light.livingroom_dimmer
content_info: none
icon: mdi:ceiling-fan-light
use_light_color: false
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: light
entity: light.hanging_lamp
content_info: none
icon: bha:ceiling-lamp
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: false
- type: custom:mushroom-template-card
primary: Living Room
secondary: null
icon: null
layout: vertical
tap_action:
action: navigate
navigation_path: /phone-livingroom
hold_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Lights
hide_header: true
card:
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.porch_light
icon: mdi:outdoor-lamp
show_color_control: true
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.entryway
name: Entryway
icon: bha:dome-lamp
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.livingroom_dimmer
name: Fan Light
icon: mdi:ceiling-fan-light
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.hanging_lamp
icon: bha:ceiling-lamp
show_color_temp_control: true
show_brightness_control: true
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.thermostat
icon: mdi:thermometer
icon_color: >-
{% if is_state_attr('climate.thermostat', 'hvac_action', 'cooling') %}
blue
{% elif is_state_attr('climate.thermostat', 'hvac_action', 'heating')
%}
red
{% endif %}
content: |-
{{ state_attr('climate.thermostat', 'current_temperature') }} Ā°F
{% if is_state_attr('climate.thermostat', 'hvac_action', 'cooling') %}
| {{ state_attr('climate.thermostat', 'temperature') }} Ā°F
{% endif %}
| {{states.sensor.living_room_multi_sensor_humidity.state}} %
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
2 Likes
tbully
June 11, 2022, 12:26am
1254
The work everyone doing here is amazing and, honestly, beyond my skills at the moment. That said, Iām trying to learn. Iāve read (browsed) through this thread and Iām missing something fundamental, I think.
Iām building a dashboard built off of āEverything Smart Homeā on YouTube. Iāve noticed many putting icons on their mushroom template cards and I canāt figure out how. (see red circle) In my case, Iām going to join āupstairsā and ādownstairsā hallway but I want to have both temperatures. I was thinking of using an up-arrow and down-arrow to differentiate the two temps.
Current code for my template card is below. Thanks for the patience!
type: custom:mushroom-template-card
primary: Downstairs Hallway
secondary: '{{ states(''sensor.dwnstrs_hall_temp_280'')| round(1) }}Ā°F'
icon: mdi:light-recessed
entity: light.downstairs_hallway_296
icon_color: |-
{% if is_state('light.downstairs_hallway_296', 'on') %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: downstairshall
See 4 posts aboveā¦thatās what --chip-background: none; does. Set the icon color within each chip with icon_color: to force it if necessary.
atomicpapa
June 11, 2022, 12:31am
1256
Thatās what I thought and I tried that to no avail. Forced refresh of the page too.
Itās unclear to me what youāre trying to accomplish. What do you want in the red circle?
tbully
June 11, 2022, 12:40am
1258
Sorry. An icon. e.g. an arrow.
Thanks Goody.
Beerās in the fridge!
