QUESTION? Implementing a built in CSS Saving method

[DevilsDesigns]

Would it be possible to add a feature where it can be implemented inside the Plugin in jellyfin so we can edit and make changes on the fly or save current css in the admin dashboard to the plugin for later use?

[danieladov]

I don't think changing css on the fly is currently possible to at least I don't know how to do it. Which would be pretty easy to implement is a save button that creates a new skin from your current css and apply it when you want

[DevilsDesigns]

Yeah that would work perfectly just an ease of acces kind of thing. Plus people will have an easier time making custom themes that way compared to uploading or saving to local desktop then having like 10 of the same file and trying to distinguish which one is correct. Also the save button for CSS would be perfect for that. Then it saves in the plugin and you can save multiple different themes styles as well as enabled them once saved. Is that possible? Is that what you are talking about.

[DevilsDesigns]

If you really wanna have something for the future you should ask the jellyfin web development add your source code for this plugin in the next release in their admin dashboard---> general page That way all CSS is streamlined into the web ui

[CTalvio]

You CAN edit, save and make changes to the CSS on the fly. That is literally what the Custom CSS field does. That's how we've been making the themes.

As far as actually testing and developing CSS themes, there are built in tools for that in any web browser. The custom CSS field is really just an easy way to then apply those changes. No files needed. Just paste the code and save,

This plugin could conceivably save whatever is in the Custom CSS field as a new "theme", rather than just overwrite what is already there, that seems to be what @danieladov is asking for?

But as someone actually making themes, I'm not sure what the point of that would be? When I make themes right now, I work entirely inside the Custom CSS field and the CSS editor of my browser. When done, I paste the new code into the github, and it gets applied to users through the import line. An import line that this plug-in already has.

The need for a save/load function in the plug-in seems extremely niche.

[danieladov]

I totally agree with you @CTalvio, what I think we should implement know is a way to select the addons of the skin, we could even let the user select colors, font ... etc but that might be much more difficult.

[danieladov]

Hey @DevilsDesigns , I think the plugin might now have what you requested at branch cssEditor Skins are stored at skins-3.json. You can define to every skin the name, author, base CSS (the @import...), and options to modify the skin. Theoretically, you can modify everything with these options. The way to use it is to give it the type (currently Selector, number, checkbox, or color picker but I could add more), the name(e.g. Font size of main titles), the description(e.g. Change the size of the main titles) and the css to add (h1 {font-size: $em;}) the "$" will be replaced by the value selected by the user. This will be the result { "name": "Default", "author": "Jellyfin", "description": "Default, stock, Jellyfin.", "defaultCss": "", "options": [ { "type": "number", "name": "Title Font Size", "description": "Change the size of the font used at titles.", "step": "0.1", "css": "h1 {font-size: $em;}", "default": "1.8" } ] } This code will be shown in the plugin as a number input with the name and description. As you can see you can set the step also, the default is 1.

With this feature, we can create a pretty decent editor. If you have any suggestion about what can be added to the editor please sent a message or create a PR

[DevilsDesigns]

Wow that's great and you did it super quick. Thank you for all the hard work . Is this the same plugin but 1.4 because I don't see a difference in the plug-in on my jellyfin install.

EDIT: I Apologize I found in the GitHub. https://github.com/danieladov/jellyfin-plugin-skin-manager/releases/tag/1.4.0.0

[danieladov]

The new version is here https://github.com/danieladov/jellyfin-plugin-skin-manager/tree/cssEditor . It is not finished yet but I can release a beta version if you want to try it.

[DevilsDesigns]

The new version is here https://github.com/danieladov/jellyfin-plugin-skin-manager/tree/cssEditor . It is not finished yet but I can release a beta version if you want to try it.

yeah if you could sorry for the late response.

[prayag17]

We have released a beta for css Editor

[DevilsDesigns]

quick question all i want to do is change the font to doppio one font and leave the rest of my current css made in general/css the same how do i do that? Could you give me a the base css used for it?

[DevilsDesigns]

mine currently looks like this i want it to look like this with the way of formatting not the color scheme

[danieladov]

Try this: html {font-family: 'Doppio One',sans-serif ; } body,h1,h2,h3 { font-family: 'Doppio One' ,sans-serif;}

[prayag17]

You also need to import the Doppio One Style sheet from google fonts