Hi!!! Thank you very much for sharing!!!
I copied your “styling” code but it doesn’t seem to work for me…my code now looks like this
sidebar:
title: null
width:
mobile: 50
tablet: 80
desktop: 25
digitalClock: true
sidebarMenu:
- action: navigate
navigation_path: /dashboard-new/home
name: Home
icon: mdi:home
icon-color: red
active: true
- action: navigate
navigation_path: /dashboard-new/lounge
name: Lounge
icon: mdi:sofa
active: true
- action: navigate
navigation_path: /dashboard-new/kitchen
name: Kitchen
icon: mdi:countertop
active: true
- action: navigate
navigation_path: /dashboard-new/bedroom
name: Bedroom
icon: mdi:bed-king
active: true
- action: navigate
navigation_path: /dashboard-new/studio
name: Studio
icon: mdi:waveform
active: true
- action: navigate
navigation_path: /dashboard-new/server
name: Server Room
icon: mdi:server
active: true
- action: navigate
navigation_path: /dashboard-new/energy
name: Energy
icon: mdi:flash
active: true
- action: navigate
navigation_path: /dashboard-new/security
name: Security
icon: mdi:security
active: true
bottomCard:
type: custom:vertical-stack-in-card
cardOptions:
cards:
- type: custom:mushroom-person-card
entity: person.george_fokianos
name: George
icon: mdi:human-male
- type: custom:mushroom-person-card
entity: person.liberty_matsou
name: Liberty
icon: mdi:human-female
cardStyle: |
:host {
width: 100%;
}
style: |
:host {
--sidebar-background: #000;
--sidebar-text-color: #fff;
--sidebar-icon-color: #fff;
--sidebar-selected-text-color: #fff;
--sidebar-selected-icon-color: #fff;
background: center/cover no-repeat fixed url('/hacsfiles/themes/backgrounds/bg_sidebar_grey_wood.jpg');
box-shadow: inset -38px -3px 11px -28px #000;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu {
border-top: 3px solid rgba(255, 255, 255, 0.2)!important;
border-bottom: 3px solid rgba(255, 255, 255, 0.2)!important;
}
.sidebarMenu li {
line-height: 20px!important;
font-size: 16px!important;
}
.sidebarMenu li.active {
font-weight: bold!important;
}
.sidebarMenu li.active::before {
border-radius: 30px!important;
}
h1 {
text-align: center!important;
}
h1.digitalClock {
font-weight: normal!important;
}
h2 {
font-size: 20px!important;
text-align: center!important;
}
Can you spot anything wrong? Maybe the location of the image??
jwaz73
January 20, 2023, 7:39pm
610
It may be the image url. From my understanding, /hacsfiles is a link to /config/www/community but I’m not sure if there is any authentication required for that path. The path /local is a link to /config/www and does not require authentication. To get the image to load properly I added the /images/background directory structure under the www directory and was able to load the background images from there.
Using the /local url is discussed in the HA HTTP documentation under Hosting Files.
I created a folder called images inside the www folder and changed the path to
background: center/cover no-repeat fixed
url('/local/images/bg_sidebar_grey_wood.jpg');
But still no luck…
jwaz73
January 20, 2023, 8:42pm
612
Interesting, I see nothing obvious that would prevent that from working. Have you cleared your cache or forced a resource update on your browser (ctrl-refresh on Windows cmd-refresh on Mac)?
Is this a UI-configured dashboard or are you writing the YAML?
Yes I’ve done all that but still no luck… The dashboard is a mix some things are configured through the UI and others with YAML. Still I don’t see how that could affect the sidebar. I read all 500 post here but couldn’t find a solution.
EDIT: I found it, its this post from @heartkingz
LironRu
January 28, 2023, 6:23pm
615
Can you please share the code?
jwaz73
January 31, 2023, 9:55pm
616
George, sorry it has taken me so long to get back to you.
I haven’t tried this yet but I wonder if changing where the sidebar is defined would make any difference. Currently I have my sidebar defined in the root of the dashboard. (Same level as the views: tag.)
What I’m thinking of trying is moving the sidebar config to a separate file then mapping an !include: statement in each view. Time to do some research and see if anyone has done this successfully yet. Perhaps then the sidebar container could be set to a transparent background and you would see the background image defined in the view.
Hi All!
Is there a way to show different content on the sidebar depending on the device where I load the dashboard?
For example I put weather card onto the sidebar and limit the sidebar widht depending on the device (table, desktop, mobile).
How do you think it could be done?
Thank you!
ald112
February 9, 2023, 1:42pm
618
question : how can add it to new dashboard if I have several already? mushrooms and minimalist?
aureliensas
February 10, 2023, 3:09pm
619
Hello,
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
#duckdns
http:
ip_ban_enabled: true
login_attempts_threshold: 5
ssl_certificate: /ssl/fullchain.pem
ssl_key: /ssl/privkey.pem
#google_assistant
google_assistant:
project_id: !secret project_ghome
service_account:
private_key: !secret privatekey_ghome
client_email: !secret email_ghome
report_state: true
exposed_domains:
- switch
- light
- sensor
- script
- camera
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
- /hacsfiles/sidebar-card/sidebar-card.js
themes: !include_dir_merge_named themes
# telegram #
telegram_bot:
- platform: polling
api_key: 618259
allowed_chat_ids:
- 2 # example: 123456789 for the chat_id of a user
# Example configuration.yaml entry for the notifier
notify:
- platform: telegram
name: NOTIFIER_NAME
chat_id: 2
sensor:
### TIME ###
- platform: time_date
display_options:
- "time"
- "date"
- "date_time"
- "date_time_utc"
- "date_time_iso"
- "time_date"
- "time_utc"
- "beat"
do I have to manually add all the HACS theme/ lovelace I upload into it? Is my frontend correct? Because everything I put in my dashboard does not appear:
if I put at the top of the configuration dashboard :
resources:
- url: /local/sidebar-card.js?v=0.0.1
type: module
sidebar:
title: "Sidebar title"
views:
I get an error message informing me that the resources must be put in the configuration.yaml file
sidebar:
width:
mobile: 0
tablet: 25
desktop: 20
breakpoints:
mobile: 768
tablet: 1024
style: |
:host {
–sidebar-background: #00FF00;
–sidebar-text-color: #FFF;
–face-color: #FFF;
–face-border-color: #FFF;
–clock-hands-color: #000;
–clock-seconds-hand-color: #FF4B3E;
–clock-middle-background: #FFF;
–clock-middle-border: #000;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 225px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
.title h1{
text-align: center;
}
.bottomCard {
background-color: #00FF00;
icon-size: 225px;
}
digitalClock: true
date: true
dateFormat: dddd DD-MMM-YYYY
clock: false
hideOnPath:
- /lovelace-testing/bedroom2
hideHassSidebar: false
hideTopMenu: false
template: >
<li>
{% if now().hour < 5 %} Goede nacht {{'\U0001F634'}}
{% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Goedenmiddag {{'\U0001F44B\U0001F3FB'}}
{% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
{% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag groenebak aan
de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_papier') %} <li>Vandaag oudpapier
aan de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_pmd') %} <li>Vandaag plastic aan de
straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_restafval') %} <li>Vandaag grijzebak
aan de straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_gft') %} <li>Morgen groenebak aan de
straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_papier') %} <li>Morgen oudpapier aan
de straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_pmd') %} <li>Morgen plastic aan de
straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_restafval') %} <li>Morgen grijzebak
aan de straat</li> {% endif %}
{% if states('sensor.current_lights_on') | float > 0 %}
<li>{{states('sensor.current_lights_on')}} lampen aan</li> {% endif %}
{% if states('sensor.current_media_players_on') | float > 0 %}
<li>{{states('sensor.current_media_players_on')}} speakers aan</li> {% endif
%}
sidebarMenu:
- action: navigate
navigation_path: /nasz-dom/default_view
name: Home
active: true
icon: mdi:home-account
- action: navigate
navigation_path: /nasz-dom/parter
name: Salon
icon: mdi:sofa-outline
- action: navigate
navigation_path: /nasz-dom/pietro
name: Cuisine
icon: mdi:chef-hat
- action: navigate
navigation_path: /nasz-dom/media
name: Chambre
icon: mdi:bed-double-outline
- action: navigate
navigation_path: /nasz-dom/ogrzewanie-phone
name: Caméra
icon: mdi:cctv
- action: navigate
navigation_path: /nasz-dom/media
name: Multimedia
icon: mdi:music
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.maison
secondary_info_attribute: humidity
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
views:
- theme: Backend-selected
title: Home
layout:
grid-template-rows: null
grid-template-columns: 25% 37.5% 37.5%
badges: []
cards:
- type: grid
cards:
- type: light
entity: light.mur_tv
- type: light
entity: light.chevet
On several themes I’ve seen here, I’ve seen codes to display the number of lights on. Can you explain me with the example of code I have to do?
Thanks so much for your help
homebrew
February 21, 2023, 3:05am
620
I’m with you…I’m stuck on the proper setup of this.
PskNorz
February 26, 2023, 6:07pm
622
Can i use browser mod pop up on the side bar menu?
jarffs
February 27, 2023, 8:19pm
623
Hello,
This is my dashboard until now. When I resize it on the desktop, it work well, but when open it on the tablet the sidebar is over the panel. Someone have any idea how can I avoid it ?
title: Home
sidebar:
active: true
width:
mobile: 20
tablet: 25
desktop: 25
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
style: |
:host {
--sidebar-background: #1C1C1C;
--sidebar-text-color: #FFF;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
.title h1{
text-align: center;
}
.bottomCard {
icon-size: 185px;
}
digitalClock: true
hideHassSidebar: true
hideTopMenu: true
date: true
dateFormat: dddd DD-MMM-YYYY
clock: false
sidebarMenu:
- action: navigate
navigation_path: /lovelace-home/0
name: Home
active: true
icon: mdi:home-account
- action: navigate
navigation_path: /lovelace-home/1
name: Aspirador
active: true
icon: mdi:robot-vacuum
- action: navigate
navigation_path: /lovelace-home/2
name: Alexa
active: true
icon: mdi:disc-player
- action: navigate
navigation_path: /lovelace-home/3
name: Tempo
active: true
icon: mdi:weather-cloudy
- action: navigate
navigation_path: /lovelace-home/4
name: Verão
active: true
icon: mdi:white-balance-sunny
- action: navigate
navigation_path: /lovelace-home/5
name: Estores
active: true
icon: mdi:window-shutter
- action: navigate
navigation_path: /lovelace-home/6
name: Calendario
active: true
icon: mdi:calendar
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.forecast_home_hourly
secondary_info_attribute: humidity
cardStyle: |
:host {
width: 100%;
}
views:
- title: Home
theme: Google Dark Theme
panel: true
cards:
- config:
defaults:
tap_action: more-info
image: /local/floorplan/painel_principal.svg
rules:
- name: Luzes
entities:
- element: light.luz_casal
entity: light.luz_casal
- element: light.luz_escritorio
entity: light.luz_escritorio
- element: light.luz_visita
entity: light.luz_visita
- element: light.luz_banheiro_tom
entity: light.luz_banheiro_tom
- element: light.luz_tom
entity: light.luz_tom
- element: light.luz_banheiro_entrada
entity: light.luz_banheiro_entrada
- element: light.luz_porta
entity: light.luz_porta
- element: light.luz_sala
entity: light.luz_sala
- element: light.luz_mesa
entity: light.luz_mesa
- element: light.luz_pia
entity: light.luz_pia
- element: light.luz_linda
entity: light.luz_linda
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate-${entity.state}
tap_action:
action: call-service
service: homeassistant.toggle
- name: Exaustores
entities:
- element: fan.exaustor_banheiro_entrada_button
entity: fan.exaustor_banheiro_entrada
- element: fan.exaustor_banheiro_tom_button
entity: fan.exaustor_banheiro_tom
tap_action:
action: call-service
service: homeassistant.toggle
- name: Exaustores girando
entities:
- element: fan.exaustor_banheiro_entrada
entity: fan.exaustor_banheiro_entrada
- element: fan.exaustor_banheiro_tom
entity: fan.exaustor_banheiro_tom
state_action:
action: call-service
service: floorplan.class_set
service_data: fan-${entity.state}
- name: Televisoes
entities:
- element: media_player.samsung_7_series_55
entity: media_player.samsung_7_series_55
- element: media_player.samsung_7_series_43
entity: media_player.samsung_7_series_43
state_action:
action: call-service
service: floorplan.class_set
service_data: tv-${entity.state}
- name: Pessoas
entities:
- element: person.junior
entity: device_tracker.sm_g990b
- element: person.cintia
entity: device_tracker.redmi_note_9s
- element: person.linda
entity: device_tracker.iphone_de_linda
- element: person.tom
entity: device_tracker.sm_g570m
state_action:
action: call-service
service: floorplan.class_set
service_data: device-${entity.state}
hold_action: hover-info
stylesheet: /local/floorplan/painel.css
style:
width: 100%
height: 100%
full_height: true
type: custom:floorplan-card
- title: Aspirador
theme: Google Dark Theme
panel: true
cards:
- config:
defaults:
tap_action: more-info
image: /local/floorplan/aspirador_mapa.svg
rules:
- name: Status
entities:
- element: bar.status
entity: vacuum.roborock_s5_max
tap_action: none
state_action:
action: call-service
service: floorplan.text_set
service_data:
text: ${entity.state}
- name: Gentle
entities:
- entity: vacuum.roborock_s5_max
element: button.slow
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.set_fan_speed
service_data:
entity_id: vacuum.roborock_s5_max
fan_speed: Gentle
- name: Medium
entities:
- entity: vacuum.roborock_s5_max
element: button.medium
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.set_fan_speed
service_data:
entity_id: vacuum.roborock_s5_max
fan_speed: Medium
- name: Turbo
entities:
- entity: vacuum.roborock_s5_max
element: button.full
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.set_fan_speed
service_data:
entity_id: vacuum.roborock_s5_max
fan_speed: Turbo
- name: Locate
entities:
- entity: vacuum.roborock_s5_max
element: button.locate
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.locate
service_data:
entity_id: vacuum.roborock_s5_max
- name: Base
entities:
- entity: vacuum.roborock_s5_max
element: button.base
conditions:
- entity: vacuum.roborock_s5_max
value_not: docked
- entity: vacuum.roborock_s5_max
value_not: returning
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.roborock_s5_max
- name: Start
entities:
- entity: vacuum.roborock_s5_max
element: button.play
conditions:
- entity: vacuum.roborock_s5_max
value_not: cleaning
- entity: vacuum.roborock_s5_max
value_not: error
- entity: vacuum.roborock_s5_max
value_not: returning
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.start
service_data:
entity_id: vacuum.roborock_s5_max
- name: Pause
entities:
- entity: vacuum.roborock_s5_max
element: button.pause
conditions:
- entity: vacuum.roborock_s5_max
value_not: docked
- entity: vacuum.roborock_s5_max
value_not: idle
- entity: vacuum.roborock_s5_max
value_not: error
- entity: vacuum.roborock_s5_max
value_not: paused
hold_action:
action: none
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.roborock_s5_max
stylesheet: /local/floorplan/painel.css
full_height: true
type: custom:floorplan-card
- title: Alexa
theme: Google Dark Theme
cards:
- title: Echo Linda
type: custom:mini-media-player
artwork: full-cover
entity: media_player.echo_linda
tts:
platform: alexa
enity_id: media_player.echo_linda
- title: Echo Cozinha
type: custom:mini-media-player
artwork: full-cover
entity: media_player.echo_cozinha
tts:
platform: alexa
enity_id: media_player.echo_cozinha
- title: Echo Tom
type: custom:mini-media-player
artwork: full-cover
entity: media_player.echo_tom
tts:
platform: alexa
enity_id: media_player.echo_tom
- title: Echo Visita
type: custom:mini-media-player
artwork: full-cover
entity: media_player.encho_escritorio
tts:
platform: alexa
enity_id: media_player.encho_escritorio
- title: Echo Casal
type: custom:mini-media-player
artwork: full-cover
entity: media_player.echo_master
tts:
platform: alexa
enity_id: media_player.echo_master
- title: Weather
icon: mdi:white-balance-sunny
panel: true
badges: []
cards:
- current: true
details: true
entity: weather.forecast_home
forecast: true
name: Weather
tap_action: none
style: |
:host {
left: 61.5%;
top: 38%;
width: 70%;
overflow: hidden;
height: 63%;
background: #1C1C1C !important;
box-shadow: none !important;
}
.current {
margin-bottom: 7vw;
}
.variations {
margin-bottom: 4vw;
}
ha-card {
height: 100%;
background: #1C1C1C !important;
box-shadow: none !important;
font-size: 1.2vw !important;
}
.forecast{
padding: 1 2.5%;
width: 95%;
}
.forecast .day:first-child{
border-left: 0.1em solid #d9d9d9;
}
.forecast .day:last-child{
border-right: 0.1em solid #d9d9d9;
}
type: custom:weather-card
- title: Verao
theme: Google Dark Theme
panel: true
style:
background: '#1C1C1C'
cards:
- config:
defaults:
tap_action: more-info
image: /local/floorplan/aspirador_mapa.svg
rules:
- name: Status
entities:
- element: bar.status
entity: vacuum.roborock_s5_max
tap_action: none
state_action:
action: call-service
service: floorplan.text_set
service_data:
text: ${entity.state}
stylesheet: /local/floorplan/painel.css
full_height: true
type: custom:floorplan-card
- title: Estores
theme: Google Dark Theme
background: false
panel: true
cards:
- type: custom:layout-card
square: false
panel: true
cards:
- type: custom:shutter-card
entities:
- entity: cover.estore_sala
name: Estore Sala
buttons_position: left
title_position: top
- type: custom:shutter-card
entities:
- entity: cover.sonoff_100155acc4
name: Estore Tom
buttons_position: left
title_position: top
- type: custom:shutter-card
entities:
- entity: cover.sonoff_100155c8ac
name: Estore Visita
buttons_position: left
title_position: top
- type: custom:shutter-card
entities:
- entity: cover.sonoff_100155c903
name: Estore Casal
buttons_position: left
title_position: top
- type: custom:shutter-card
entities:
- entity: cover.sonoff_100155d407
name: Estore Linda
buttons_position: left
title_position: top
style: |
:host {
left: 61.5%;
top: 38%;
width: 70%;
overflow: hidden;
height: 63%;
background: #1C1C1C !important;
box-shadow: none !important;
}
ha-card {
height: 100%;
background: #1C1C1C !important;
box-shadow: none !important;
font-size: 1.2vw !important;
border-radius: 0px;
}
- title: Calendario
theme: Google Dark Theme
panel: true
cards:
- config:
defaults:
tap_action: more-info
image: /local/floorplan/aspirador_mapa.svg
rules:
- name: Status
entities:
- element: bar.status
entity: vacuum.roborock_s5_max
tap_action: none
state_action:
action: call-service
service: floorplan.text_set
service_data:
text: ${entity.state}
stylesheet: /local/floorplan/painel.css
full_height: true
type: custom:floorplan-card
AlexSP
March 5, 2023, 7:23pm
624
Hello! I’ve gone over and over in circles and just can’t seem to get this to work, any help for a noob setting it up for the first time?
rr19-hub
March 7, 2023, 10:24am
625
Same problem here. Has the syntax perhaps changed? I can’t use this code in the dashboard resources. For me it starts like this:
views:
- theme: noctis
title: Home
icon: mdi:home
path: home
type: sidebar
badges: []
cards:
- square: false
columns: 1
type: grid
cards:
But where do these blocks come into play? They cannot be inserted as a card.
title: Home
sidebar:
active: true
width:
mobile: 20
tablet: 25
desktop: 25
breakpoints:...
I do have two columns, the left one a little narrower. But I can’t change them via the code and can only edit elements via the GUI.
marcelt
March 11, 2023, 6:17pm
626
Nice, but project seems to be dead.
On Mobile you can see it well but, how can I adapt the 2-column cards on Desktop and Tablet?
title: Home
background: center / cover no-repeat fixed url('/local/casa/nuvole.webp')
sidebar:
active: true
title: null
style: |
:host {
--sidebar-background: 'rgba 50, 50, 50, .5';
--sidebar-text-color: #ffffff;
--border-radius: 5px;
}
.sidebarMenu li.active {
background-color: #000000!important;
}
width:
mobile: 0
tablet: 25
desktop: 20
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
date: true
dateFormat: dddd, DD MMMM
digitalClock: true
twelveHourVersion: false
hideHassSidebar: false
hideTopMenu: false
showTopMenuOnMobile: true
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: custom:simple-weather-card
entity: weather.casa
primary_info:
- humidity
- precipitation_probability
style: |
ha-card {
background-color: transparent;
box-shadow: none;
font-size: 12px;
- type: custom:bar-card
severity:
- color: rgb(204,40,20)
to: '30'
from: '0'
- color: rgb(255,185,40)
from: '30.1'
to: '65'
- color: rgb(40, 204,20)
from: '65.1'
to: '95'
columns: 0
height: 20
title_position: inside
align: split
rounding: 3px
unit_of_measurement: '%'
width: 100%
entity_row: true
animation:
speed: '1000'
filter:
include:
- entity_id: sensor.*_battery*
state: <=35
show_empty: true
sort:
method: state
ignore_case: true
numeric: true
reverse: false
- type: custom:mini-graph-card
style: |
ha-card {
background-color: transparent;
box-shadow: none;
font-size: 6px;
entities:
- sensor.corrente_electric_consumption_w
name: Potenza 24h
icon: mdi:flash
hours_to_show: 24
points_per_hour: 60
hour24: true
smoothing: false
upper_bound: 3500
lower_bound: 0
line_width: 1
height: 120
show:
name: false
icon: false
points: false
labels: false
state: true
extrema: false
color_thresholds_transition: smooth
color_thresholds:
- value: 1000
color: green
- value: 2000
color: yellow
- value: 3000
color: red
tap_action:
action: navigate
navigation_path: /plancia-telefono/energia
- type: grid
cards:
- type: custom:mushroom-person-card
entity: person.bologni
fill_container: false
primary_info: name
icon_type: entity-picture
style: |
ha-card {
background-color: transparent;
box-shadow: none;
font-size: 6px;
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.bologni
dark_mode: false
hours_to_show: 2
class: border
style:
.: |
ha-card {
border: solid 1px var(--primary-color);
border-radius: 25px;
}
use_entity_picture: true
layout: vertical
- type: custom:mushroom-person-card
entity: person.elena
fill_container: false
primary_info: name
icon_type: entity-picture
style: |
ha-card {
background-color: transparent;
box-shadow: none;
font-size: 6px;
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.elena
dark_mode: false
hours_to_show: 2
class: border
style:
.: |
ha-card {
border: solid 1px var(--primary-color);
border-radius: 25px;
}
use_entity_picture: true
layout: vertical
columns: 2
square: true
- type: picture-entity
entity: camera.videocitofono_sub
camera_view: live
class: border
show_state: false
show_name: false
- type: custom:auto-entities
card:
type: custom:bar-card
severity:
- color: rgb(204,40,20)
to: '30'
from: '0'
- color: rgb(255,185,40)
from: '30.1'
to: '65'
- color: rgb(40, 204,20)
from: '65.1'
to: '95'
columns: 0
height: 20
title_position: inside
align: split
rounding: 3px
unit_of_measurement: '%'
width: 100%
entity_row: true
animation:
speed: '1000'
filter:
include:
- entity_id: sensor.*_battery*
state: <=35
show_empty: true
sort:
method: state
ignore_case: true
numeric: true
reverse: false
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.state {
font-size: 8px;
}
views:
ezpll
March 19, 2023, 1:29pm
628
Bottom card not showing
Hi
mibane
March 28, 2023, 2:40pm
629
Sad, but apparently true.
