Jump to content

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


mickle026

Recommended Posts

mickle026

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 by mickle026
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 5 months later...
pünktchen
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 😒

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

roaku
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 by roaku
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...