How do you load a css file in a c# plugin html configuration page?

[mickle026 650]

Im probably missing someting really easy here

 

I have added and embeded a css file

 new PluginPageInfo
               {
                   //Name = GetType().Namespace,
                    Name = "CPPMain.css",
                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.CPPMain.css"

                }

I tried to link to it in my html

<link rel="stylesheet" type="text/css" href="index.html#!/configurationpage?name=CPPMain.css">

But it does not load and F12 console debugger says mime type is html not text/css so it wasn't loaded?

 The stylesheet http://localhost:8096/web/index.html#!/configurationpage?name=CPPMain.css was not loaded because its MIME type, "text/html", is not "text/css".

I am guessing that this is because the path to the css file is invalid so its probably referring to a html error being returned, if I don't put a path then i get similar, but not found - obviously, so In stuck.

If I change it to src- , it doesnt error because it isnt even loaded

<link  rel="stylesheet" type="text/css" src="index.html#!/configurationpage?name=CPPMain.css">

I can use css when embeded in <style> tags in the html, I just cannot load a css file.

Im doing this wrong somewhere, any help is much appreciated

Thanks

Edited February 7, 2021 by mickle026

[Luke 42077]

Hi, currently you can't, although it's possible for the future.

[roaku 842]

I haven't tried this myself, but would it be possible to add a plugin API endpoint to fetch the css file contents with ajax, then load that css data through javascript?

https://github.com/MediaBrowser/Emby/wiki/Creating-Api-Endpoints

I mean, even if it works, it's probably still not worth doing this over just integrating the css in the head of the html, but I'm kind of curious.

[Luke 42077]

You could, but nothing would be calling it.

[roaku 842]

I said the plugin Javascript would have to make an ajax call to that endpoint and load the retrieved css dynamically.

That's what would do the calling.

[pünktchen 1409]

On 2/12/2021 at 11:30 PM, roaku said:

just integrating the css in the head of the html

Not even this is working! Emby is overwriting the head style definition of the plugin with it's own 

[Luke 42077]

5 hours ago, pünktchen said:

Not even this is working! Emby is overwriting the head style definition of the plugin with it's own 

You're not supplying a complete html document. You're supplying a view that gets inserted into an already existing document. If you do supply complete html, everything outside of the view gets stripped.

[Luke 42077]

 I think  the way autoorganize embeds js could be used for css:

https://github.com/MediaBrowser/Emby.AutoOrganize/blob/master/Emby.AutoOrganize/Plugin.cs#L80-L84

And then at the top of a js file, add it to the end of the define list like so:

css!__plugin/AutoOrganizeLogCss

 

[roaku 842]

11 hours ago, Luke said:

 I think  the way autoorganize embeds js could be used for css:

https://github.com/MediaBrowser/Emby.AutoOrganize/blob/master/Emby.AutoOrganize/Plugin.cs#L80-L84

And then at the top of a js file, add it to the end of the define list like so:

css!__plugin/AutoOrganizeLogCss

 

If I remember correctly, this works for Javascript, but not css, because the Emby static file server uses the wrong content type for the css files, so browsers don't know how to handle them.

I think I started a thread about it awhile back. I'll check.

Edit:

Ok, my issue was with a font file, not css. I still feel like the same thing happened with css, but someone should try it and ignore my negativity.

 

Edited July 28, 2021 by roaku