2 |
3 |
4 | ## 🧩 Modules
5 |
6 | Here you can find our assortment of modules. These are included within the complete pack of the theme however can be used in conjunction with the base theme or any other theme of your choosing.
7 |
8 | ## 🔌 Installation
9 |
10 | The general format to install a module is as followed, you will need to replace the `
` with the file name of the module you wish to install.
11 |
12 |
13 |
14 | ```css
15 | @import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/modules/.css");
16 | ```
17 |
18 |
19 |
20 | #### ❓Where do I install it?
21 |
22 | Locate the `Custom CSS code` option under your General settings in the admin panel and simply paste one of the lines above within the box.
23 |
24 | If you wish to just install this for yourself only, you can do so by going to your users Display settings and copy the following settings.
25 |
26 | - [x] Disable server-provided custom CSS code
27 |
28 | Then enter the theme into the `Custom CSS code` option and save your settings.
29 |
30 | ## 🖌️ Customisation
31 |
32 | Each module has it's own individual customisation parameters. Please read the respective README by going into each modules folder.
33 |
34 |
2 |
3 |
4 | [](https://www.jsdelivr.com/package/gh/JamsRepos/Jamfin)
5 |
6 | (
About -
Screenshots )
7 |
8 | ## ℹ️ Welcome
9 |
10 | This project brings a modern, sleek glassmorphism design to Jellyfin, enhancing your media server's aesthetics. The theme is designed to be modular and compact, allowing server owners to easily customize their Jellyfin experience.
11 |
12 | ## 🧩 Modules
13 |
14 | You can find our plug-and-play modules in the [modules folder](theme/modules/README.md). Each module's folder contains an explanation of its purpose and detailed instructions on how to use it.
15 |
16 | ## 🔌 Installation
17 |
18 | The following line includes the base theme as well as all our optional modules. This is what our screenshots are based off.
19 |
20 |
21 |
22 | ```css
23 | @import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/complete.css");
24 | ```
25 |
26 |
27 |
28 | If you just want the theme without all our modules integrated, simply copy this line instead. Feel free to add the modules seperately.
29 |
30 |
31 |
32 | ```css
33 | @import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/base.css");
34 | ```
35 |
36 |
37 |
38 | #### ❓Where do I install it?
39 |
40 | Locate the `Custom CSS code` option under your General settings in the admin panel and simply paste one of the lines above within the box.
41 |
42 | If you wish to just install this for yourself only, you can do so by going to your users Display settings and copy the following settings.
43 |
44 | - [x] Disable server-provided custom CSS code
45 |
46 | Then enter the theme into the `Custom CSS code` option and save your settings.
47 |
48 | ## 🖌️ Customisation
49 |
50 | Not sure if you like our colour scheme? No worries, we allow easy access to our themes colours. Paste these below your import and customise away!
51 |
52 |
53 | ```css
54 | :root {
55 | /* Colours */
56 | --theme-background-colour: #101010;
57 | --theme-sidebar-background-colour: #222222;
58 | --theme-menu-background-colour: #3a3a3a80;
59 | --theme-menu-shadow-colour: #fff3;
60 | --theme-base-colour: #696969;
61 | --theme--hover-colour: #dbdbdb;
62 | --theme-restart-colour: #da87287e;
63 | --theme-shutdown-colour: #c21c1c9d;
64 | --theme-progress-bar-colour: #cfcfcf;
65 | --theme-progress-bar-background-colour: #2c2c2c;
66 | --theme-progress-bar-transcoding-colour: #eb7e25;
67 |
68 | /* General Appearance */
69 | --theme-roundness: .75rem;
70 | --theme-blur: 16px;
71 | }
72 | ```
73 |
74 |
75 |
76 | #### ❓How do I customise the colours for the module too?
77 |
78 | You will find these within the respective modules folder, to cause less confusion they are excluded out of this example.
79 |
80 | ## 📷 Screenshots
81 |
82 |
83 |
84 |
85 |
86 | #### 🙏 Special Thanks
87 |
88 | Special thanks to [Scyfin](https://github.com/loof2736/scyfin) for design inspiration.
89 |
90 |