Move lovelace tabs up beside header - custom js

[Da9L (Daniel Jørgensen)]

I want to move my lovelace tabs up beside the title , and to do that i can use som simple javascript to get the following result:

Now i just wan to make the javascript load by it self everytime the page is loaded. What is the best practise for this in Home Assistant?

[VDRainer]

No clue if this is best practice, but take a look here to load a *.js file.

Lovelace in 106 beta

@jazzmonger, there’s an open issue and a temporary fix about this now. Create a file preloader.js in your www folder, const preloadCard = type => window.loadCardHelpers() .then(({ createCardElement }) => createCardElement({type})) preloadCard("gauge"); and add it to the resources in ui-lovelace.yaml or the raw config editor. - url: /local/preloader.js type: js Works for me with a markdown card. preloadCard("markdown"); Thanks @balloob, for this! I think that’s a good point fo…

[Da9L (Daniel Jørgensen)]

I tried it out but it doesn’t load any js file. I just made a simple js file in my www folder called testfile.js, and attempted to load it in the top with the raw editor inside home asssitant like so:

resources:
  - type: js
    url: /local/testfile.js

The file only contains console.log("test"); but nothing ever shows in my chrome console, and the network tab doesn’t show any file with that name.

[VDRainer]

Works for me.

Can you open the file with
<your_ha_ip>:8123/local/testfile.js ?
What HA version are you on?
After 0.107.x the resources are loaded from configuration.yaml if you’re in yaml mode, or with the UI (Configuration -> Lovelace Dashboards -> Resources)

[Da9L (Daniel Jørgensen)]

I got it to work by using the UI Thanks !

[VDRainer]

Cool!
Would you mind sharing your js file for the header?