How do I use an external css file

I have this line in the form html

And I really wanted it in a subfolder, but that wont load either. So I have it where the exe is in the

TMSWeb\Debug

But it just says "The specified file could not be found". It would be nice if told me the name. I had to whittle it down to one file, to be sure which one. When it was in the sub directory I tried both slashes.

So how do I use it ?

Related question to do with paths. I have the issue when I set the url property for the image. It can not find it. Its in the right place (as above) because it didnt work in a subfolder either. Tried both slashes again.

If you right click on the project in Delphi and select "Open outpath path in Explorer" this will show you the root of web app - i.e. the root that the browser sees.

You can create a folder under that, say called "cssfiles" and put your css file there, let's call it "mystyles.css".

In the Index.html file, or whatever the main file is for your app (the one that contains rtl.run) add the following to the .. section

<link href="cssfiles/mystyles.css" rel="stylesheet"/>

Try that.

Again for the image - if the image is in the subfolder "images" under TMSWeb\Debug then try

<img src="images/mtimage.png" />

Thats the folder I was using. But I had the css in my main form's html file. This is because normally I have a generic css file and then particular ones for each form. However I shifted it to the project one (which has the rtl line in it. It still gives the same error, but twice (before it was once). I even tried double quotes instead of single quotes (although either should work). Tried it in the root folder there and in a subfolder called css. No luck. This shouldn't be so hard.

If I remove the cssfile reference, there are no errors, so its obviously the problem. In the browser tools, it looks like its looking in the correct place.

Maybe a clue, the error in the IDE is from "EZipException". In the Console the error 500 is from the Server.

If I run the exe file from outside, it still uses Edge to open it. When I run the html file, it runs in firefox and here is the log dump. The cors is a puzzle as for that page I have disabled cors checking in the firefox (with an addon)


[NoScript] Waiting for syncFetchPolicy to load... log.js:28:13
Freezing file:///I:/DELPHI/WEB/PBL_WEBSITE/TMSWeb/Debug/PBL_Web.html DocumentFreezer.js:101:15
sendSyncMessage suspend #0/1 SyncMessage.js:244:19
INS: content-ads.js loaded:  file:///I:/DELPHI/WEB/PBL_WEBSITE/TMSWeb/Debug/PBL_Web.html content-scripts.js:1:132231
TSS: content-tss.js loaded:  file:///I:/DELPHI/WEB/PBL_WEBSITE/TMSWeb/Debug/PBL_Web.html content-scripts.js:1:137181
Unfreezing file:///I:/DELPHI/WEB/PBL_WEBSITE/TMSWeb/Debug/PBL_Web.html DocumentFreezer.js:117:15
sendSyncMessage finalizing SyncMessage.js:262:19
TSS: hosted page injected PBL_Web.html:4:21
sendSyncMessage resume #0/0 - 156ms SyncMessage.js:253:19
sendSyncMessage finalizing SyncMessage.js:262:19
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. PBL_Web.html
unreachable code after return statement
sysutils.pas:5073:9
unreachable code after return statement
sysutils.pas:6643:2
unreachable code after return statement
sysutils.pas:6652:2
pair create:MessageID 
Object { fjv: 269, fjo: undefined, FValue: "", FInt: 0, FDouble: 0 }
WEBLib.JSON.pas:638:9
pair create:MessageData 
Object { fjv: undefined, fjo: undefined, "fjo$1": null, FMembers: {…} }

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///I:/DELPHI/WEB/PBL_WEBSITE/TMSWeb/Debug/PBL_Web_Main.html. (Reason: CORS request not http).

Yes, strange if you have switched off CORS.

How are you accessing as it suggests it is not via http?

I'm not really understand all the details of what you are doing.
You refer to an EXE file, so I assume you use here a Miletus or Electron app?
If this is the case, the CSS file should be added to the project. If it is in a subfolder of the project, it can be referred to as

<link href="cssfiles/mystyles.css" rel="stylesheet"/>

Do you use the latest release of TMS WEB Core?

It turns out that I was using a Miletus Project. And I think that Windows defender stops the file access as it regards it as public not private.

I didn't need to use Miletus right now, so the paths are working.

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.