hey @DBuit for some reason I can change the font weight of the digital clock but not the font size, but I can change the font weight and size of the date? Any ideas why this might be happening?
Hi @nathbullen
Use this to change font size of the digital clock:
h1.digitalClock {
font-size:20px!important;
}
Hi @berniebl,
The changes for the clock, date and dividing lines can be done with the style option of the sidebar.
I don’t know how your css skills are but let me know if you need some help with this? and let me know what exactly you wanna change 
For the bottom card you can insert any lovelace card in there so if you have that card in a default lovelace view you can place it in there so what you what can be done!
Just released small update with new option twelveHourVersion if you set this to true in your sidebar configuration it will show the digital clock in 12h.
1 Like
Wow thanks for the quick reply @DBuit ! I’ve been struggling with that for a few days haha, I’m still super new to CSS. If you don’t mind answering a couple more questions; is there a way to change the font size of the “template” text (not sure if that’s the right name, the part that says “good morning/afternoon/evening”), and is there a way to add dividing lines between different sections of text?
Hi @DBuit. Your work is awesome.
is it possible to make a sidebar bottom card like this one Sidebar from lukevink., with persons(picture-elements) and mini-grapth card.
Thanks
Hi,
For the template test you can use this:
.template li {
font-size:20px!important;
}
But it is not possible to add dividing lines
Hi,
at the moment bottomCard is 1 card so you can make it like his i think.
But only the persons part or only the mini-graph card
Thanks for your reply, my CSS knowledge is pretty weak, I tried “font-color” in my code below that that didn’t change anything. My goal is to change all 3, clock, date, and divider bar to this color: #4E88A1
This was my attempt:
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
font-color: #4E88A1;
line-height: 95px;
}
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)
1 Like
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:
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?