Message Boards Message Boards

How to link CSS file to deployed Wolfram Cloud webpage

GROUPS:

How to link a CSS file to a Wolfram Cloud webpage...

First a realy simple css text producing a blue background.

cssfile =
  "  body {background-color:  #b0c4de;}";

This is the webpage calling for cssfile.css

pg =
  "
  <!DOCTYPE html>
  <html>
  <head>
  <link href='cssfile.css' type='text/css' rel='stylesheet'>
  </head>
  <body>
  <h1> very simple webpage </h1>
  </body>
  </html>
  ";

Put the page on the wolfram cloud webserver

p1 = CloudExport[pg, "HTML", "/csstest.html"]

put the cssfile.css on the server

Export["e:\\folder\\cssfile.css", cssfile, "Text"]
CopyFile["e:\\folder\\cssfile.css", CloudObject["/cssfile.css"]]

The following opens the html page but no blue background is present. Why?

SystemOpen[p1] 

This shows a mimetype of application/octet-stream. This should be text/css.

CloudObjectInformation[CloudObject["/cssfile.css"]]

The web page does not have a blue background.

enter image description here

This will get me a bit closer with mime type text/plain but no sigar. (also tried conversion to CSS but this does not work)

CloudExport[cssfile, "Text", "/cssfile.css"]

enter image description here

I am unable to make a webpage read another css file present on the Wolfram Cloud. I also made the css file public, no difference. If I ask a webpage to read a CSS file on my personal webserver it functions fine (if i remove the s in https).

So the central question is how to get a css file to be read with a text/css mimetype from the Wolfram Cloud. Any suggestions?

added a notebook with complete code I used in testing. Maybe it helps?

Attachments:
POSTED BY: Pieter van Bijnen
Answer
3 years ago

Note: The documentation on HTML explains there is a Export[] function with a setting "CSS" -> "file.css". I could no get it work. Please advise?

POSTED BY: Pieter van Bijnen
Answer
3 years ago

There is no good way to do this yet (I am working on a suggestion to get this designed/implemented).

But here is a possible way to do it (undocumented and may stop working at any time):

CopyFile[CloudObject["file.css"], CloudObject["file.css"], "MIMEType" -> "text/css"]

Basically this copies the file to itself and uses the "MIMEType" option that CopyFile happens to support.

POSTED BY: Arnoud Buzing
Answer
2 years ago

Arnoud, Thank you for this (temp) solution. This allows us to put a company style into the app we designed.

Kind regards, Pieter

POSTED BY: Pieter van Bijnen
Answer
2 years ago

there is a better solution documented under ExportForm

In[11]:= css = CloudDeploy[ExportForm["body {background:red}", {"String", "text/css"}]]
Out[11]= CloudObject["https://www.wolframcloud.com/objects/efed42fb-fd69-42c1-985d-e141b0d698cf"]

In[13]:= Lookup[URLRead[css, "Headers"], "content-type"]
Out[13]= "text/css;charset=utf-8"
Answer
8 months ago

Group Abstract Group Abstract