+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Using VS Code for custom css? (/t-using-vs-code-for-custom-css)
Using VS Code for custom css? - IPQ - 2023-07-28
I would like to use some custom css to customise my jellyfin, I want to modify a theme but it is a bit tricky to edit one thing in a big file and then put it back in the custom CSS box and then save and reload, it would be easier to open the files in vs code and using the live server plugin, I would be able to attach a file to put all the custom CSS in and see live changes as I make them.
Is this possible and if so how would I go about doing it?
RE: Using VS Code for custom css? - Dex Luther - 2023-09-03
I haven't tried in a while, but I remember being able to just fine.
If you File > New File it asks what coding language you'll be using. You should be able to type in CSS, and it'll come right up and then ask you where you want to save the file (always a good idea to save the file for future reference).
If you open a blank page it should also auto-detect CSS if you paste in CSS code.
Alternatively, you could also change it by clicking the button at the bottom right corner of the window (3rd button from the right) if you want to use some other code language or if it auto-detects wrong.
RE: Using VS Code for custom css? - DirecTV - 2023-09-03
(2023-07-28, 03:24 AM)IPQ Wrote: I would like to use some custom css to customise my jellyfin, I want to modify a theme but it is a bit tricky to edit one thing in a big file and then put it back in the custom CSS box and then save and reload, it would be easier to open the files in vs code and using the live server plugin, I would be able to attach a file to put all the custom CSS in and see live changes as I make them.
Is this possible and if so how would I go about doing it?
Css is a pain in the ass, I'm a coder from old school days but css meh! I use to code for many platforms but css for me is a waste of time as I only use firesticks. I know what your asking and 'yes' it is doable but this forum is slow and google would speed up your goal. Good luck brother!
RE: Using VS Code for custom css? - LeviSnoot - 2023-09-19
Quote:I would like to use some custom css to customise my jellyfin, I want to modify a theme but it is a bit tricky to edit one thing in a big file and then put it back in the custom CSS box and then save and reload, it would be easier to open the files in vs code and using the live server plugin, I would be able to attach a file to put all the custom CSS in and see live changes as I make them.
Is this possible and if so how would I go about doing it?
I haven't tried doing this, but I'm not sure an actual potential solution has been suggested yet, so I'll give it a shot. In Jellyfin, go to Profile (your profile pic in the top right corner) > Display. Once there, tick "Disable server-provided custom CSS code", and under "Custom CSS Code:" paste something like the following (I have no idea what the URL path for the VSCode server is so change this to whatever it is):
Code:
@import http://localhost:3000/style.cssNow you should be able to just refresh the browser window every time you save the style.css file.
It's possible Jellyfin or your browser won't be happy fetching a css stylesheet over HTTP, and in that case, I think the best option might be something like a git repo to host the style.css on and then pushing the changes every time you save. The URL would then be the URL to the raw CSS file in your git repo.
I might try this in a bit. I'll let you know if I do and whether it worked.
RE: Using VS Code for custom css? - Niskeletor de Oscuridad - 2023-09-19
(2023-07-28, 03:24 AM)IPQ Wrote: I would like to use some custom css to customise my jellyfin, I want to modify a theme but it is a bit tricky to edit one thing in a big file and then put it back in the custom CSS box and then save and reload, it would be easier to open the files in vs code and using the live server plugin, I would be able to attach a file to put all the custom CSS in and see live changes as I make them.
Is this possible and if so how would I go about doing it?
There is another option that may help you. You can edit the branding.xml file , you will locate it in the library directory, there is the same information there that you pick up from the "Use custom CSS code" box.
That if you are going to have to restart Jellyfin, if you have it in a docker it is faster to do , and remember to clear the browser cache.
Another faster thing to do is in the browser in developer mode F12, you can apply the CSS Styles changes on the fly, this can give you a more stable idea of how to implement it at the end. I hope you continue working with your customization and share with us your doubts or progress
RE: Using VS Code for custom css? - IPQ - 2023-09-27
(2023-09-19, 04:24 PM)Niskeletor de Oscuridad Wrote: ...
Another faster thing to do is in the browser in developer mode F12, you can apply the CSS Styles changes on the fly, this can give you a more stable idea of how to implement it at the end. I hope you continue working with your customization and share with us your doubts or progress
What I ended up doing was using inspect element to edit, and then copying it onto vs code on my second monitor when I found what changes I liked, it was a bit tedious as I had to find individual classes that I had edited in the CSS file which was over 1000 lines but it worked out in the end, now I have a theme that I really like!