Can't get any css working in habpanel

Apps & Services HABPanel
,
1

I’ve created a new widget on habpanel with some simple html:

<link rel="stylesheet" type="text/css" href="http://openhab2.home:8080/static/layouts/security.css" />
<h1>testing</h1>

I can load the css file in a browser so no issues there.

h1 {
    color: green;
    text-align: center;
}

However when the html runs the css is not being applied. The text is not green or in the center.

What am I missing?

2

You can’t load CSS like that in a template, your options are:

  • use the “additional stylesheet” option in the settings (if you’re on a snapshot version, it’s not in the stable 2.1 version);
  • write your style inline (in a <style> element);
  • use the ocLazyLoad directive to load CSS like this:
<div oc-lazy-load="['/static/layouts/security.css']">...</div>
3

In the changelog it is said that with 2.1 the stylesheet option is in? bit surprised here? because I can’t get it running neither

4

You’re right… my mistake, it is in the 2.1 version. :roll_eyes:
This option will only work with server URLs on the same origin (host and port, meaning the openHAB server), that is, relative URLs like “/static/mystylesheet.css”. URLs coming from the Internet like a CDN, or another server will be blocked.

5

Thats the case, I did the instllation exactly the way it was described in the other thread. But still it is not applied :frowning:. Any suggestion how to check if habpanel can find the file? (Copied them via the shares defined in the openhab documentation)

6

On Chrome if you open the developer tools, in the console you’ll probably see a line like this:

Failed to load resource: the server responded with a status of 404 (Not Found)

On the Network tab there will be a red line as well (refresh the page with this tab open).

Any file (e.g. file.css) in the “html” folder of your configuration will normally be available as /static/file.css.

7

did it by checking if I see the file using sudo nano. Found out that something went wrong during copying files. folder was names matrix-theme.css (in Finder the folder was named matrix-theme) and wasn’t possible to delete via SSH. By removing it in the samba share an copying everything again, it is working now

Thanks for your support :slight_smile: