Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BobHasNoSoul/jellyfin-mods
This is just a guide for various modifications and dumping ground for jellyfin mods so i dont have to make a new jftool for every platform and revision
https://github.com/BobHasNoSoul/jellyfin-mods
Last synced: 6 days ago
JSON representation
This is just a guide for various modifications and dumping ground for jellyfin mods so i dont have to make a new jftool for every platform and revision
- Host: GitHub
- URL: https://github.com/BobHasNoSoul/jellyfin-mods
- Owner: BobHasNoSoul
- Created: 2021-04-23T16:05:13.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T16:56:23.000Z (18 days ago)
- Last Synced: 2024-10-22T06:09:23.873Z (17 days ago)
- Language: HTML
- Size: 8.82 MB
- Stars: 353
- Watchers: 5
- Forks: 20
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-jellyfin - jellyfin-mods - A collection of things you can do to personalize Jellyfin. (👾 Other)
README
# jellyfin-mods
### These mods are working and tested on **Jellyfin 10.9.x** (mods for older versions can be found [here](https://github.com/BobHasNoSoul/jellyfin-mods/blob/main/10.8.x.md)). More will be added when I get the chance, or if you want please feel free to submit a pull request with your own mods to add to the collection.
If you are having issues with finding the web root, you may need to see the [help.md](https://github.com/BobHasNoSoul/jellyfin-mods/blob/main/help.md) to find help with your particular deployment.
> Please note this method of Jellyfin modding is intended for those who do not want or are unable to compile the web client yourself... There are better ways of doing these mods, but if you insist, this is the way to do it. (Not preaching, it's your server after all :D)
## Table of Contents
- [jellyfin-mods](#jellyfin-mods)
- [CSS mods](#css-mods)
- [Hide the "Please sign in" dialog](#hide-the-please-sign-in-dialog-and-prevent-the-login-area-moving-up-too-far-by-adding-a-margin)
- [Change the background image of the login page](#change-the-background-image-of-the-login-page)
- [Hide the top bar on the login page](#hide-the-top-bar-on-the-login-page)
- [Transparent top bar](#transparent-top-bar)
- [Lighten the backdrop background](#lighten-the-backdrop-background)
- [Partially transparent side menu](#partially-transparent-side-menu)
- [Hide the "Trailers" tab from movie libraries](#hide-the-trailers-tab-from-movie-libraries)
- [Use the media item's logo and hide title when present](#use-the-media-items-logo-and-hide-title-when-present)
- [Remove the "My Media" section title](#remove-the-my-media-section-title)
- [Custom Netflix-like login page](#custom-netflix-like-login-page)
- [Avatar library for your users](#avatar-library-for-your-users)
- [Change the title of the page](#change-the-title-of-the-page)
- [Change the default iOS/Android "app" title and description](#change-the-default-iosandroid-app-title-and-description)
- [Featured Content Bar](#featured-content-bar)
- [Force backdrops for all users](#force-backdrops-for-all-users)
- [Force theme music for all users](#force-theme-music-for-all-users)
- [Force disable "Show next video info during playback"](#force-disable-show-next-video-info-during-playback)
- [Change font to whatever you want](#change-font-to-whatever-you-want)
- [Set limit on how long items should be in the next up section](#set-limit-on-how-long-items-should-be-in-the-next-up-section)
- [Add a custom logo at the top of the login page](#add-a-custom-logo-at-the-top-of-the-login-page)
- [Add a custom link button under the login page](#add-a-custom-link-button-under-the-login-page)
- [Add a custom logo to side bar](#add-a-custom-logo-to-side-bar)
- [Add a custom link to side bar](#add-a-custom-link-to-side-bar)
- [Add requests tab](#add-requests-tab)
- [Hide scrollbar on older Microsoft edge (Xbox clients)](#hide-scrollbar-on-older-microsoft-edge-xbox-clients)
- [Pan and tilt the backdrops with fades in and out](#pan-and-tilt-the-backdrops-with-fades-in-and-out)
- [Default user page size](#default-user-page-size)
- [Change the favicon](#change-the-favicon)
- [Seasonal themes](#omg-seasonal-themes-are-back)
- [Bugfixes / Workarounds](#bugfixes--workarounds)
- [Some extra tools to be used with Jellyfin](#some-extra-tools-to-be-used-with-jellyfin)
---
## CSS mods
##### These mods are very easy to apply. Simply copy and paste the relevant code into the "Custom CSS code" textbox in the General tab of your Jellyfin admin dashboard.
### Hide the "Please sign in" dialog and prevent the login area moving up too far by adding a margin:
```css
/*Hide "Please sign in" text, margin is to prevent login form moving too far up*/
#loginPage h1 {display: none}
#loginPage .padded-left.padded-right.padded-bottom-page {margin-top: 10px}
```
### Change the background image of the login page:
```css
/*Change login page background*/
#loginPage {
background: url(https://i.imgur.com/Ewk3Pqw.png) !important;
background-size: cover !important;
}
```
### Hide the top bar on the login page:
```css
/*Hide the top bar when the login page is visible*/
body:has(#loginPage:not(.hide)) .skinHeader {
display: none !important;
}
/*Show the top bar when the login page is hidden or absent*/
body:not(:has(#loginPage:not(.hide))) .skinHeader {
display: flex !important;
}
```
### Transparent top bar:
```css
/*Transparent top bar*/
.skinHeader-withBackground {background-color: #20202000 !important;}
```
### Lighten the backdrop background:
```css
/*Lighten background*/
.backgroundContainer.withBackdrop {background-color: rgba(0, 0, 0, 0.34) !important;}
```
### Partially transparent side menu:
```css
/*Partially transparent side bar*/
div.mainDrawer {background-color: rgba(0,0,0,0.6) !important;}
```
### Hide the "Trailers" tab from movie libraries:
*Note: This mod currently also hides the "Upcoming" tab from TV show libraries. Please submit a PR if you find a way to hide only the "Trailers" tab.
```css
/*Hide the "Trailers" tab in Movies and the "Upcoming" tab in TV Shows*/
.emby-tab-button[data-index="2"] {
display: none !important;
}
```
### Use the media item's logo and hide title when present:
This mod takes the title text away when an item has a valid logo loaded, thus avoiding the problem of showing you the logo of *Game of Thrones* for example, and then also saying *Game of Thrones* in plain text underneath...
```css
/*If the logo is present on the details page of an item, hide the items' title*/
#itemDetailPage .itemName.infoText.parentNameLast > bdi:nth-child(1) {display: none;}
.hide+.detailPageWrapperContainer .itemName > bdi:nth-child(1) {display: block !important;}
/*Do the same for the single episodes link back title*/
#itemDetailPage .parentName > bdi:nth-child(1) {display: none;}
.hide+.parentName > bdi:nth-child(1) {display: block !important;}
```
### Remove the "My Media" section title:
```css
/*Remove "My Media" title*/
.section0 .sectionTitle {display: none;}
```
---
## Custom Netflix-like login page
*Note: Ignore the custom logo; that's covered in a mod further down.*
In your admin dashboard, under General, check 'Enable the splash screen' and click save. Then add the following to the custom CSS, click save again, then reload your login page.
```css
/*Custom login page of awesome*/
#loginPage {
background-image: url('/Branding/Splashscreen?format=jpg&foregroundLayer=20.0');
background-position: top left;
background-size: 200%;
background-attachment: fixed;
animation: backgroundAnimation 150s infinite alternate;
z-index: 2;
}
@keyframes backgroundAnimation {
0% {
background-position: top left;
}
25% {
background-position: bottom right;
}
50% {
background-position: bottom left;
}
100% {
background-position: top left;
}
}
.skinHeader.semiTransparent.noHeaderRight {
background: transparent !important;
}
div#loginPage {
margin-top: 0 !important;
overflow: hidden scroll;
}
#loginPage h1::after {
content: "Sign In";
font-size: 32px;
}
#loginPage h1 {
font-weight: 700;
font-size: 0;
margin-bottom: 21.44px;
margin-top: 32px !important;
text-align: left;
}
.inputContainer {
margin-bottom: 1.8em;
margin-top: 1.8em;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
background: #000000bf;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin: 21px;
position: absolute;
border-radius: 10px;
width: 100vw;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
padding: 3em !important;
}
#loginPage .readOnlyContent {
padding: 0 !important;
width: 100% !important;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.manualLoginForm {
height: 100%;
width: 100%;
}
#loginPage .inputContainer {
background: #333;
border-radius: var(--rounding);
height: 4em;
position: relative;
}
#loginPage .inputLabel.inputLabelFocused,
#loginPage .inputLabel:not(.inputLabel-float) {
font-size: 0.8em;
left: 4%;
top: 4%;
transform: none;
}
.visualLoginForm {
width: 100%;
position: relative;
overflow: hidden;
}
#divUsers {
flex-flow: revert;
overflow: scroll visible;
justify-content: flex-start;
}
#loginPage .emby-input {
height: 100%;
border: none;
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
padding: 4% !important;
font-size: 1.1em;
border: none !important;
}
#loginPage .inputLabel {
position: absolute;
top: 50%;
left: 4%;
transform: translateY(-50%);
font-size: 1.5em;
font-weight: 300;
transition: 0.2s ease;
color: #8c8c8c;
}
#loginPage .inputContainer:focus,
#loginPage .inputContainer:focus-within {
background: #454545;
}
```
---
## Avatar library for your users
For full instructions, please visit the dedicated repo at: https://github.com/BobHasNoSoul/jellyfin-avatars
Effectively, this adds a button next to the user profile image that links straight to an avatar library that works with a simple click to download images, enabling your users to upload them and use them on the server.
## Change the title of the page
To be clear, this mod changes the title that appears in browser tabs from "Jellyfin" to your own unique name like "My Awesome Server" or in the example code ``. You can use either method.
#### Method 1
Go to your web root and run:
```sh
sudo nano index.html
```
Then, inside the tags, add the following:
```css
document.addEventListener("DOMContentLoaded", function() {
// Change the document title to "<YOUR TITLE HERE>"
document.title = "<YOUR TITLE HERE>";
// Create a MutationObserver to prevent any changes to the title
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
if (document.title !== "<YOUR TITLE HERE>") {
document.title = "<YOUR TITLE HERE>";
}
}
});
});
// Observe the document title for changes
observer.observe(document.querySelector('title'), { childList: true });
// Set up a fallback in case of attempts to change the title through direct assignment
Object.defineProperty(document, 'title', {
set: function() {
return "<YOUR TITLE HERE>";
},
get: function() {
return "<YOUR TITLE HERE>";
}
});
});
```
Obviously change the `` parts to your personal custom title you want the server to have.
Save the file and reload the cache on your clients to see your changes.
#### Method 2 (The old way)
Go to your web root and create a new file called `title.sh` and inside that file add the following:
```sh
grep -rl 'document\.title="Jellyfin"' . | while read -r file; do
sed -i 's/document\.title="Jellyfin"/document\.title=""/g' "$file"
done
grep -rl 'document.title=e||"Jellyfin"' . | while IFS= read -r file; do
sed -i 's/document.title=e||"Jellyfin"/document.title=e||""/g' "$file"
done
```
Obviously change the `` parts to your personal custom title you want the server to have.
Save the file, then run:
```sh
sudo chmod +x title.sh sudo ./title.sh
```
Reload the cache on your clients to see your changes.
---
## Change the default iOS/Android "app" title and description
This mod changes the title and description that appear when adding the site to your homescreen as a webapp from "Jellyfin" to your own unique name like "My Awesome Server" or in the example code ``.
Go to your web root and run:
```sh
grep -oP ']*rel="manifest"[^>]*href="[^"]*"' index.html | grep -oP '(?<=href=")[^"]*'
```
This command will output a JSON filename, copy it, then run `sudo nano ` to edit the file.
```json
{
"name": "",
"description": "",
"lang": "en-US",
"short_name": "",
"start_url": "index.html#/home.html",
"theme_color": "#101010",
"background_color": "#101010",
"display": "standalone",
"icons": [
{
"sizes": "72x72",
"src": "touchicon72.png",
"type": "image/png"
},
{
"sizes": "114x114",
"src": "touchicon114.png",
"type": "image/png"
},
{
"sizes": "144x144",
"src": "touchicon144.png",
"type": "image/png"
},
{
"sizes": "512x512",
"src": "touchicon512.png",
"type": "image/png"
}
]
}
```
Obviously change the `` and `` parts to your personal custom title/description you want the homescreen shortcut to have, but leave everything else as is.
Save the file and reload the cache on your clients to see your changes.
---
## Featured Content Bar
This allows the user to add custom featured content to be pinned to the homepage. Please see [the separate repo for this](https://github.com/BobHasNoSoul/jellyfin-featured/) for more details.
Allows for the use of a specific account's favorites to promote content, as well as user-defined custom lists that are looped through via crontab.
---
## Force backdrops for all users
In `main.jellyfin.bundle.js` simply search for:
```js
enableBackdrops:function(){return _}
```
And replace it with:
```js
enableBackdrops:function(){return E}
```
Save the file and reload the cache on your clients to see your changes.
*** If you cannot find it (because of regex in search like in nano) try searching for `enableBackdrops:function`. This should give you the ability to find the string above ***
---
## Force theme music for all users
In `main.jellyfin.bundle.js` simply search for:
```js
enableThemeSongs:function(){return j}
```
And replace it with:
```js
enableThemeSongs:function(){return P}
```
Save the file and reload the cache on your clients to see your changes.
*** If you cannot find it (because of regex in search like in nano) try searching for `enableThemeSongs:function`. This should give you the ability to find the string above ***
Pro tip: Use the theme songs plugin to grab multiple theme songs for TV shows in one go (https://github.com/danieladov/jellyfin-plugin-themesongs), or manually add a theme .mp3 at the root of each TV show folder (i.e. `/tv/breaking bad/theme.mp3`). This mod also works for movies of course, but you will have to manually grab each theme song as the mentioned plugin does not work with movies.
---
## Force disable "Show next video info during playback"
*This mod prevents conflict between the [Intro Skipper](https://github.com/intro-skipper/intro-skipper) plugin's "Next" dialog and Jellyfin's native dialog by disabling the ladder for all users. Unfortunately, Jellyfin's native dialog is much better, but there is currently no way to disable the dialog from Intro Skipper, and this is certainly better than having both of them overlap.*
In `main.jellyfin.bundle.js` simply search for:
```js
enableNextVideoInfoOverlay:function(){return j}
```
And replace it with:
```js
enableNextVideoInfoOverlay:function(){return ne}
```
Save the file and reload the cache on your clients to see your changes.
*** If you cannot find it (because of regex in search like in nano) try searching for `enableNextVideoInfoOverlay:function`. This should give you the ability to find the string above ***
---
## Change font to whatever you want
First, get a font pack... there are many out there... so take your time looking for one you really like the look of and download it. You can get some free fonts from https://google-webfonts-helper.herokuapp.com/fonts/, but there are many other free sources. Once you've found a font, navigate to your Jellyfin web root and create a new folder called "fonts" (your font pack should contain .woff .woff2 .tff .eot and .svg files), and unzip the contents of your font archive into this folder. For this example, I used the Ubuntu font (don't judge me). You can get the same font from here https://google-webfonts-helper.herokuapp.com/api/fonts/ubuntu-mono?download=zip&subsets=latin&variants=regular
Extract the contents of your font archive into following directory:
/usr/share/jellyfin/web/fonts/
Then, simply add the following to your custom CSS (rename them for your files in turn unless you're using the linked Ubuntu font):
```css
/* ubuntu-regular - latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url('/web/fonts/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/web/fonts/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/web/fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/web/fonts/ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/web/fonts/ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/web/fonts/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
html { font-family: "Ubuntu" !important;}
```
(Alternative download method) Easy mode for Ubuntu font... (You can use this as a guide to do this for other fonts too if you prefer downloading through the terminal)
```sh
cd /usr/share/jellyfin/web/
sudo mkdir fonts
sudo wget -O fonts/ubuntu.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/ubuntu-mono?download=zip&subsets=latin&variants=regular"
sudo unzip fonts/ubuntu.zip -d fonts/
```
Now your font is where it should be, just modify the CSS in the General tab of your Jellyfin admin dashboard to suit different names of fonts.
---
## Set limit on how long items should be in the next up section
The default time for this is one year (365 days).
To change this, simply go to your web root and run:
```sh
sudo nano main.jellyfin.bundle.js
```
Then, find:
```js
t("maxDaysForNextUp",e.toString(),!1);var t=parseInt(this.get("maxDaysForNextUp",!1),10);return 0===t?0:t||365}}
```
Replacing the 365 with whatever value you want in days.
Save the file and reload the cache on your clients to see your changes.
---
## Add a custom logo at the top of the login page
Simply go to your web root and edit the session-login-index-html.xxxxxxxxxxxxxxxxxxxxx.chunk.js file:
```sh
sudo nano session-login-index-html.*.bundle.js
```
Press Ctrl + W and find the following string:
```js
```
Now, directly after this string paste the following (but obviously amend for your own logo, it can even be a GIF if you want):
```js
```
---
## Add a custom link button under the login page
In your web root run:
```
sudo nano session-login-index-html.*.chunk.js
```
Then, use find and replace ( Ctrl + \ ) to find:
```js
NEW LINK BUTTON TEST
In your web root run:
```sh
grep -r -l -n 'customMenuOptions' .
```
This command will output a filename, copy it, then run `sudo nano ` to edit the file.
Then, use find and replace ( Ctrl + \ ) to find:
```css
',n+='
```
And replace it with the following (obviously replace YOURLOGOURLHERE with your actual URL):
```js
',n+='
```
Save the file and reload the cache on your clients to see your changes.
---
## Add a custom link to side bar
Find the `config.json` file in your web root. Change the "menuLinks" section to the following and adjust the properties to suit your needs (icons are from [Material Design Icons](https://jossef.github.io/material-design-icons-iconfont/)).
```json
"menuLinks": [
{
"name": "Custom Link",
"url": "https://jellyfin.org"
},
{
"name": "Custom Link w. Custom Icon",
"icon": "attach_money",
"url": "https://demo.jellyfin.org/stable"
}
],
```
If you only want one link, make sure to remove the comma after the closing bracket (}). If you want to add more links, add a comma for every entry except the last one.
---
## Add requests tab
- Before doing anything, remember to backup the files we are going to edit
- Go to your web root and edit the `index.html` file
- Find `