CSS static file

[Chapo]

Hello,

Having read various previous blogs I understand that in order to have a default CSS file serve up you need to do the following;

edit settings.js

uncomment httpStatic property line

save

mkdir as set out on httpStatic property line, in my case home/no1/node-red-static

reboot

save or create css file in folder location - in my case style.css

then in the template node in html code <src="/home/no1/node-red-static/style.css" />

However, nothing happens.

Please help as it's driving me mad

Chapo

[Hugo Desmeules]

 Try <src="style.css" /> or <src="./style.css" />

[steve rickus]

Close, but the url to the static css file is wrong in your example... and this can only work IF you also set the httpAdminRoot (or httpRoot) to something other than the root url "/".

Effectively, you are now serving that file through the same express http server that is running node-red. So if you access your node-red editor through http://localhost:1880/admin then your css file would be at http://localhost:1880/style.css

Verify that this static url works by entering it in your browser directly -- then, once that is retrieving your file correctly, you can embed it in your template node as the aboslute url, or even a relative url like "/style.css"

--

Steve

On Wednesday, March 7, 2018 at 2:52:14 PM UTC-5, Chapo wrote:

[Nick O'Leary]

One more thing to add what Steve said, the correct HTML syntax to include a stylesheet is:

   <link rel="stylesheet" href="red/style.min.css">

not <src='...'>

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/467a0bbe-e148-4f8d-a871-9661220a8a79%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Chapo]

Thanks for your speedy responses,

when i go to http://localhost:1880/admin I get "Cannot GET /admin"

Chapo

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

[Nick O'Leary]

Hi,

Steve's example assumed you also set httpAdminRoot to /admin in order to move the path the node-red editor is served from. This is not necessary.

1. set httpStatic to the absolute path 

2. restart node-red

3. try to access http://localhost:1880/style.css

Nick

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/caa0eb01-bdca-4c4c-9a40-a01d981a85f0%40googlegroups.com.

[Chapo]

Thanks Nick,

The absolute path being /home/no1/node-red-static/style.css   ?

[Nick O'Leary]

No, it is the absolute path to the directory containing the content you want serving - ie  /home/no1/node-red-static

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/d7192239-7341-4535-b69d-e8ecb4c80971%40googlegroups.com.

[Chapo]

Hi Nick,

Apologies, still not working and I'm still confused.  I have now got;

<link rel="stylesheet" href="/home/no1/node-red-static/style.css">

I have save the style.css file in /home/no1/node-red-static/style.css

Chapo

[Nick O'Leary]

Did you follow me steps:

1. set httpStatic to the absolute path 

2. restart node-red

3. try to access http://localhost:1880/style.css

Did step 3 work? That shows you the url at which the file is reached.  Assuming that worked, then the href you would use is:

<link rel="stylesheet" href="/style.css">

Nick

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/525a113a-71be-44fa-8997-dbaebbd9d993%40googlegroups.com.

[Chapo]

no 3 didn't work

[Colin Law]

What have you got httpstatic set to and where have you got style.css?

Colin

> https://groups.google.com/d/msgid/node-red/5b618ae8-950b-4a6c-ab5e-7d23b784b4d4%40googlegroups.com.

[Chapo]

Hi Colin,

In settings.js;

    // When httpAdminRoot is used to move the UI to a different root path, the

    // following property can be used to identify a directory of static content

    // that should be served at http://localhost:2880/.

    httpStatic: '/home/no1/node-red-static/',

style.css;

Saved in /home/no1/node-red-static/style.css

Chapo

[steve rickus]

On Wednesday, March 7, 2018 at 3:38:59 PM UTC-5, Nick O'Leary wrote:

Hi,

Steve's example assumed you also set httpAdminRoot to /admin in order to move the path the node-red editor is served from. This is not necessary.

 Pardon me, but how is that not necessary? Am I misinterpreting these comments in the settings.js file?

 // When httpAdminRoot is used to move the UI to a different root path, the
 // following property can be used to identify a directory of static content

 // that should be served at http://localhost:1880/.
 httpStatic: '/home/nol/node-red-static/',

[Chapo]

Hi Steve,

Thank you everyone,

I have moved the httpAdminRoot to /admin and I am able to access admin through localhost:1880/admin.  I am also able to access the css file through localhost:1880/style.css.

I have tried the HTML syntax in the as;

<link rel="stylesheet" href="/home/no1/node-red-static/style.css"> &

<link rel="stylesheet" href="/style.css">

None of these change the CSS content of the localhost:1880/simple website I have set up.

Am I now down to the CSS coding?

Chapo

[Chapo]

Ok, reboot and I'm working;

Problem was that the default folder in settings.js is nol (NOL) and I thought it was no1 as the output in terminal of l and 1 are identical.  In future I suggest making a completely new path.

I suggest changing httpAdminRoot to /admin anyway as it is probably good form.

Chapo

Thanks for all your help

[Nick O'Leary]

The 'default' setting as you call it is just an example of an absolute path. You aren't expected to create that exact path.

Steve, it is recommended to move admin root, but not an absolute requirement. It avoids the chances of you wanting to serve a file with that clashes with one the editor wants to load. When I set httpStatic and serve up style.css without moving admin root it works just fine.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/d191da9a-8863-4c81-9635-dad27ea9c578%40googlegroups.com.

[steve rickus]

Nick, good to know - thanks for the clarification. I was thinking that the router paths would overlap, and only one of them would take precedence...

Is that why there are some issues with folder names like "scripts" and "styles"?

Chapo, as Nick says you should be putting your static content under your own home directory ("/home/nol" is his, not yours). But the href will never be the path to your file -- it has to be a web url. If you change your href to the absolute url "http://localhost:1880/style.css" it should work (but the relative url should also). Use F12 to open the browser's Dev Console, select the Network tab, hit F5 to reload the page, and make sure there are not any resource loading errors (if so, they will show up in red).

--

Steve