Just trying to get my head around lovelace.
Is it possible to modify a CSS file to make (relatively) instant changes to the front end?
The way t looks to me at the moment is that I have to make a change to my theme.yaml then restart Hassio for the changes to take effect. This is obviously a massive issue if you are trying to build / theme something!
Any clarity on this??
You just need to edit ui-lovelace.yaml and refresh your browser. You don’t have to restart Hassio to see the changes you made.
Check out the list of Lovelace cards to see what kind of styles can be implemented for each card type. There are also custom cards that people have linked.
http://sharethelove.io is a good resource.
Thanks for responding!
I understand that you can add cards etc to the ui-lovelace.yaml which result in instant changes, but the styling of the UI as a whole kinda seems a little disjointed and clunky at best.
It seems logical that there would just be a style.css file that you could add CSS into to override the current styles (as in the way that you would develop a website (my job).
Yep, I’ve been a bit frustrated with the relative lack of flexibility in Lovelace too, but it’s still early pretty days in the UI’s development.
Interestingly I thought I’d just have a little experiment today.
I created a file in the www folder called styles.js with the following code:
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/local/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
Then added it to ui-lovelace.yaml using this:
- url: /local/styles.js
type: js
I then created a stylesheet.css file that the .js references to in the www folder with this test code:
paper-button{
text-align: right !important;}
In firefox, the css is applied to the front end! Trouble is, if I make a change to the CSS code, it doesn’t show unless I clear the browsers cache and reload the page (which then requires a user login etc).
It feels like this is kinda moving in the right direction?!?!?!?
Sounds like you’ve made some progress!
Clearing the cache isn’t entirely necessary. In Chrome I just force a hard refresh (Ctrl+F5). I’m not sure what the shortcut is in Firefox but that should work.
Unfortunately doing a hard refresh doesn’t work. There must be some caching or something going on somewhere as the changes made in the .css file are only reflected if you clear the site data from the browser. Obviously that’s not an option. It’s nearly as quick to restart Hassio!
If you add a version number to the Lovelace include, it should recache with the new files. That’s how it works with other Lovelace cards at least, but not sure if it includes the referenced css.
- url: /local/styles.js?v=0.1
type: js
for instance
@Martin_Granger
This does indeed seem to work, but instead of using your styles.js I simply put:
- url: /local/stylesheet.css?v=0.495
type: css
And changing the number would load a new version of the CSS file.
The hideous abomination below was made by having this in the stylesheet:
body{
–primary-background-color: blue !important;
–paper-card-background-color: green !important;
}
I could not properly figure out which ids to use for rounding the corners etc, but I am sure you might have a better grip on which css to override. Do let me know!
Super interesting - I’ll have a play!
re the version number etc - do you have to put that version number on or within the .css file?
No, just in the Lovelace.yaml
It just tricks the browser into thinking its a whole new file, so for instance if you increase to say ?v=2, and then go back to ?v=1 it would then load an old cached one. Basically it will cache each and every one of those files per number. It’s a workaround to purging browser cache.
Like it! Glad I started a ?v=001 then 
An issue I’m having is that firefox is showing the correct behavior and the CSS is updating, but Chrome doesn’t seem to.
It seems that Chrome isn’t loading the CSS file. This is on OSX and Android. Any ideas why this would be the case?
My CSS only contained that entry, and that worked without issue on chrome for me (on macOS Sierra).
If you open the developer tools in chrome and look at the Styles section bottom left you should see the stylesheet that is loaded if encapsulated in the body (since that is what I tested). As in, it would say stylesheet.css?v=0.491
Maybe try the exact that I had above?
This is driving me crazy.
I can make changes to Firefox fine, but both Safari & Chrome do not load the CSS file!
Bumped!
Would love to see a CSS include key inside the ui-lovelace.yaml to load custom CSS. 
Did you find a solution to this problem? After quickly setting this up I’m having the same result here… 
Nope - gave up on styling things. I now just use the stock cards with a nice background and a theme I found on the forums.
nice clean layout!
same problem here btw, my css loads in firefox but not chrome. I read somewhere that you may have to add meta charset utf-8 somewhere. I think i can be applied in the js file, but i’m not sure I know how to include that.
Would you like to share you’re config?
Hi @Martin_Granger i’ve had a good look but can’t find anyone sharing a theme similar to yours, do you have a repo we could look at or could paste theme in this thread? Thanks, looks great!
