This is perfect, thank you so much. Just a heads up though, it seems as though AM and PM are the wrong way around? Maybe its just me i’m not sure but its showing as PM when it should be AM and vice versa.
I switched it myself in the code and now all is good so might be worth updating on HACS if anyone else can confirm the same issue.
I was about to say, got around to updating my config today to use ther 12 hour time version, and noticed that it’s flipped for me too (am shows during pm hours and vice versa)
Hi @berniebl,
So because the card already has some styling like colors and stuff it will load this because of the placement of the css code within the html.
So sometimes you change something and it won’t change because the card also has a css rule for example for the font color. Than you need to add !important after it to say that this css rule is the want you must render.
if you use this it will change the font color:
.digitalClock {
color:#4E88A1!important;
}
Oh and font-color is nothing in css use color 
Thanks, this worked great, now what element do I need to add to change the color of the dividing line?
Hi guys, i’m trying to add mini-graph card as bottom card but have some issues with CSS. How i can remove space on left, right and bottom, so card can fill all area. Please take a look on screenshot attached, area marked in red.
Thats what i currently have
bottomCard:
type: 'custom:mini-graph-card'
cardOptions:
entities:
- sensor.f1_r2_light_bg_left_bme280_temperature
cardStyle: |
:host {
width: 110%;
}
ha-card {
border-radius: 5px;
overflow: hidden !important;
box-shadow: none !important;
}
Hi @timota,
You can do it like this:
bottomCard:
type: custom:mini-graph-card
cardOptions:
entities:
- sensor.wasmachine_energieverbruik
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
ha-card {
background: transparent;
color: #FFF;
overflow: hidden !important;
box-shadow: none !important;
}
Result:
Hello HA Community,
is it possible to change the Icon Color in a sidebarMenu Item?
Like in the Post befor me (The yellow icon)
Hi @X015,
The sidebar card has a style option for your own css.
You can use this to overwrite the color of the icon when active:
.sidebarMenu li.active ha-icon {
color: #F00!important;
}
Thanks @DBuit
Works great!
Is there meybe a way to change the icon color from the not selected Menu Entry?
Are you planning on changing this? (making more possible?)
Thank you
sure this is it? Got 3 dashboards, 2 containing Sidebar-card and one of them is set to default. I always have tot do a refresh. Super annoying
This is my set-up:
Guys, I have 3 questions:
Help is appreciated.
sidebar:
bottomCard:
cardOptions:
entities:
- sensor.energy_kwh_to_watt
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
ha-card {
background: transparent;
color: #FFF;
overflow: hidden !important;
box-shadow: none !important;
}
type: 'custom:mini-graph-card'
date: true
digitalClock: true
digitalClockWithSeconds: true
sidebarMenu:
- action: navigate
active: true
icon: 'mdi:home'
name: Home
navigation_path: /lovelace-mobile/home
- action: navigate
active: true
icon: 'mdi:lightbulb'
name: Verlichting
navigation_path: /lovelace-mobile/verlichting
- action: navigate
icon: 'mdi:car-sports'
name: Auto
navigation_path: /lovelace-mobile/auto
- action: navigate
icon: 'mdi:power-socket-eu'
name: Stroom en Gas
navigation_path: /lovelace-mobile/stroomengas
- action: navigate
icon: 'mdi:server-network'
name: System
navigation_path: /lovelace-mobile/system
- action: navigate
icon: 'mdi:spotify'
name: Media
navigation_path: /lovelace-mobile/media
- action: navigate
icon: 'mdi:home-automation'
name: Instellingen
navigation_path: /lovelace-mobile/instellingen
style: |
:host {
--sidebar-background: 'rgba 50, 50, 50, .5';
--sidebar-text-color: #B9B9B9;
--face-color: 'rgba 50, 50, 50, .5';
--face-border-color: 'rgb 84, 84, 84';
--clock-hands-color: #000;
--clock-seconds-hand-color: #216491;
--clock-middle-background: 'rgb 4, 84, 84';
--clock-middle-border: #000;
--border-radius: 5px;
}
.sidebarMenu li.active ha-icon {
color: #d6b55a!important;
}
template: |
<li>
{% if now().hour < 5 %} Goede Nacht! {{'\U0001F634'}}
{% elif now().hour < 12 %} Goede Morgen! {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Goede Middag! {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Avond! {{'\U0001F44B\U0001F3FB'}}{% endif %}
{% if states('sensor.current_lights_on') | float > 0 %} <li>In huis {{states('sensor.current_lights_on')}} lamp(en) aan</li> {% endif %}
{% if "on" in states('media_player.lg_tv') %} <li>Woonkamer TV aan</li> {% endif %}
</li>
width:
desktop: 20
mobile: 0
tablet: 25
Hi @martheijnen,
What you could try i use a vertical stack card as bottomcard.
The vertical stack card can on his turn load multiple cards i think this could work (not tested)
Hi @Mobiledude,
I do not have multiple dashboard so maybe that is something why you need to reload, need to test that out and maybe there is a fix.
About the first arrow: place each rules inside a
Second arrow: i got the same problem, this is a bug i need to fix
Thanks for your feedback. That did the job! Hope you can find a fix for the reload issue and the bottom card not showing up right.
Great card!
Will try and report back to those who want to also see if this works.
thanks!
Is there any way to put a line break inbetween the templates?
