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:
3 Likes
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;
}
1 Like
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
1 Like
This is my set-up:
Guys, I have 3 questions:
- top yellow arrow - is there a way to create “returns” between the entity statusses?
- bottom yellow arrow - My bottom card is displayed “out of my screen”? what can I do to correct?
- I always need to reload the page to have the sidebar show up. I have 3 dashboards, 2 contain the sidebar, and one of them (the mobile one) is set to default.
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?
1 Like
Hi @Eldudemeister,
Yes there is!
Open each line with <li>
and close each line with </li>
Check github example you will see the open and closing tag being used
Thanks for the reply! This is my code
template: >
<li>
{% if now().hour < 5 %} Good Night
{% elif now().hour < 12 %} Good Morning
{% elif now().hour < 18 %} Good Afternoon
{% else %} Good Evening {% endif %}
</li>
<li>{% if states('sensor.number_of_lights_on') | float > 0 %} <li>There are
currently {{states('sensor.number_of_lights_on')}} lights on</li> {% endif
%}
<li>The outside temperature is currently
{{states('sensor.weather_temperature')}} degrees</li> <li>The forecast today
is currently {{states('sensor.weather_condition')}}</li>
I thoguht I had what you are suggesting in the code?
Hi @Eldudemeister,
Yes that is strange.
Can you inspect the html what is shown in the sidebar and see if you see the <li></li> in there?