I started playing around with theming my dash. I have installed card-mod and also tried overriding CSS vars and they both work.
I want more control in styling, so I added a CSS resource for the Lovelace Dashboard. The CSS file is loaded but my styles are not applied. I think I have a problem with CSS selectors.
Can anyone advise me what to do in order to be able to provide some CSS properties to an element in HA Dashboard?
I know that the resource file is loaded because I can see it in the Dev Tools’ Source tab and also because, if I put the following CSS for testing:
dispaly {
display: none;
}
it works, and the body is not displayed. Trying other CSS selectors like below does not work though
paper-icon-item {
background-color: red;
}
paper-icon-item span {
color: green;
font-size: 16px;
}
Would really appreciate if anyone can share some knowledge on this. Is it possible after all?
Nice to know there’s a rapid response to these sorts of questions. I’m also trying to do the same thing with card-mod installed and it’s not making the slightest bit of difference. Perhaps in another 5-6 years someone might have some sort of idea?
A fast response: Google for card-mod, ask card-mod related questions in the main card-mod thread and the main card-mod-themes thread, but first read docs in card-mod repo. Now it is up to you how many years it will take).
A remarkably expedient reply @Ildar_Gabdullin thanks. It was googling card-mod that brought me here to begin with. A link would have been useful but never mind I’ll go back to ‘googling’ and see if I wind up somewhere useful.
here is an extensive card-mod guide written by @Ildar_Gabdullin 
Thanks LiQuid 
Very expedient sarcasm.