Just apply
style: |
div.player > paper-progress {
your-css
}
to the card for styling.
Thatās simpler than the things I tried.
But doesnāt work when I try
style: |
div.player > paper-progress {
display: block !important;
}
Either the CSS doesnāt work or there is sth. with the shadowroot or so where it has to be applied.
Can you try out putting it not in a conditional card?
Just tried, same behaviour.
How do I get this to work with the history-graph? Iām trying to hide the chart header, and this is what I have done:
type: history-graph
entities:
- entity: climate.front_bedroom
hours_to_show: 24
refresh_interval: 0
style: |
.chartHeader {
display: none;
}
But that does not seem to work. I think its probably because the content is being loaded after so the style is not applying?
Try !important
Any ideas for how I could test out this?
How you could test out if it works?
using !important does not make any difference. I have tried a few things, if I start at ha-card I can hide the entire card, and if I go down trying different things along the route the last item I can hide is state-history-charts, beyond that is state-history-chart-line but that does not want to be hidden.
As far as testing goes I guess you could set up a simple thermostat and have a look at it with the history-graph. Here is some simple config for a thermostat:
climate
- platform: generic_thermostat
name: Front Bedroom
heater: switch.front_bedroom_heater
target_sensor: sensor.front_bedroom_temperature
min_cycle_duration:
minutes: 1
hot_tolerance: 0.1
cold_tolerance: 0.1
away_temp: 10
You need a switch and a sensor to make it work
Hey! Look whoās back!
After an extended absence I now have well over 100 unread messages in this thread alone.
To preserve my sanity, I therefore hereby declare āmessage bankruptcyā and will be starting over - ignoring anything above this one.
I honestly believe thatās best for everyone, but do not let this stop any ongoing discussions.
Anyway. Iād like to take this opportunity to let you know that Iāve been working a bit on documentation in the form of a few āwikiā posts that can be found here:
Specifically, those describe how to get started with themes, and some cool tricks that could be useful.
Iām planing to also write one soon on how to do the ShadowDOM navigation.
7 Likes
Great. I added a compact header to my theme, code here:
If youāre trusting, consider letting anyone edit the wiki.
I actually didnāt think that was possible with github.
Itās done!
Thanks for your help in this topic and others, by the way!
1 Like
I hate to ask just an hour after my last post, but as itās above your bankruptcy I guess itās ok 
Iām having problems styling graphs in the history-graph card. Is there a secret to that card I need to know?
Edit for context, Iām trying to hide the header and its not working.
type: history-graph
entities:
- entity: climate.front_bedroom
hours_to_show: 24
refresh_interval: 0
style: |
.chartHeader {
display: none;
}
Try display: none !important instead.
I did, when you suggested it earlier, and replied that it made no difference.
NOT TRUE: Itās buried under multiple shadow roots. Card-mod doesnāt support this 
Actually, it does. Just update it and use the new syntax below.
By the way card mod debug is broken.
no-header:
card-mod-theme: theme name (yourname) ??
card-mod-root: |
app-toolbar {
display: none;
}
place in /config/themes/yourname/yourname.yaml ???
Yeah. Rename the theme name to no-header. If you want to add it to an already-existing one, just set card-mod-theme to the name of your theme, and add the card-mod-root part.
Yes it does.
However, the history-graph card adds things to itself long after the card is initially loaded, and that is not supported.
But the following should work if you load a view, go to another view, and then back:
style:
state-history-charts$state-history-chart-line$ha-chart-base$: |
.chartHeader {
display: none;
}
Also note the new syntax (since 2.0.1) for going into shadowRoots.
3 Likes