2026-06-24, 06:52 PM
Inspired to code this up by Werewolf by Night and Spider-Noir, I now have an easy way to theme individual library items - or change theming based on server.
https://github.com/TheDMV2/Jellyfin-ID-Injector-Script
#In Short
This adds the item ID# as an ID to the body tag of the page, and adds the serverID as a css class name.
#Setup
1) Install JS Injector, a common plugin used by several major plugins
https://github.com/n00bcodr/Jellyfin-Jav...t-Injector
2) Add a new script, give it a name, and paste the following code:
document.addEventListener('viewshow', function(event) {
const hashString = window.location.hash;
queryPart = hashString.split('?')[1];
const params = new URLSearchParams(queryPart || '');
const idvalue = params.get('id');
const servervalue = params.get('serverId');
// Check if the ID exists and if the body element has loaded
if (idvalue && document.body) {
document.body.id = 'item' + idvalue;
document.body.classList.add('server' + servervalue);
console.log('ID Injector: Successfully added item ID to body tag');
} else if (idvalue && !document.body) {
console.warn('ID Injector: Script ran before document.body was ready.');
} else if (!idvalue) {
document.body.id = "";
console.warn('ID Injector: No ID found in URL to inject. Resetting to null.');
}
});
*I left my debugging/console notification code in there, feel free to remove/edit.*
NO DEBUGGING/COMMENTS
document.addEventListener('viewshow', function(event) {
const hashString = window.location.hash;
queryPart = hashString.split('?')[1];
const params = new URLSearchParams(queryPart || '');
const idvalue = params.get('id');
const servervalue = params.get('serverId');
if (idvalue && document.body) {
document.body.id = 'item' + idvalue;
document.body.classList.add('server' + servervalue);
} else if (!idvalue) {
document.body.id = "";
}
});
MINIFIED:
document.addEventListener('viewshow',function(event){const hashString=window.location.hash;queryPart=hashString.split('?')[1];const params=new URLSearchParams(queryPart||'');const idvalue=params.get('id');const servervalue=params.get('serverId');if(idvalue&&document.body){document.body.id='item'+idvalue;document.body.classList.add('server'+servervalue)}else if(!idvalue){document.body.id=""}})
This will grab the id & serverid from your URL and add it to the body tag of each page on load.
So, URL of https://mydomain.com/web/#/details?id=30...60821b15a0
Will result in: <body dir="ltr" id="item30a28ccb0a036ec6004708a56e20074b" class="server31ee634b11af4a959a387160821b15a0">
**note**: CSS names (generally) need to start with a letter, not a number, so we have to add something at the start. I kinda forgot this which made my debugging take WAY longer than it should have.
3) Hit save.
4) Write some custom CSS targeting it!
#Example 1
If the ID# for Spider-Noir was "30a28ccb0a036ec6004708a56e20074b", then put this in your custom css:
/* Turn Spider-Noir's cast BW */
#item30a28ccb0a036ec6004708a56e20074b #castContent {
filter: grayscale (1);
}
And now the cast and crew's pics are black & white!
#Example 2
If you have multiple servers, but they're configured the same/look the same, (prod & test/live & development for example), you can use this to distinguish them. This code will turn the banner orangish, and put "DEV SERVER" in the top left - But only when you're connected to that server.
.server31ee634b11af4a959a387160821b15a0 .skinHeader.semiTransparent {
background-color: rgb(234 124 15 / 60%) !important;
}
.server31ee634b11af4a959a387160821b15a0 .headerLeft::after {
content: "DEV SERVER";
font-size: larger;
font-weight: bolder;
}
https://github.com/TheDMV2/Jellyfin-ID-Injector-Script
#In Short
This adds the item ID# as an ID to the body tag of the page, and adds the serverID as a css class name.
#Setup
1) Install JS Injector, a common plugin used by several major plugins
https://github.com/n00bcodr/Jellyfin-Jav...t-Injector
2) Add a new script, give it a name, and paste the following code:
document.addEventListener('viewshow', function(event) {
const hashString = window.location.hash;
queryPart = hashString.split('?')[1];
const params = new URLSearchParams(queryPart || '');
const idvalue = params.get('id');
const servervalue = params.get('serverId');
// Check if the ID exists and if the body element has loaded
if (idvalue && document.body) {
document.body.id = 'item' + idvalue;
document.body.classList.add('server' + servervalue);
console.log('ID Injector: Successfully added item ID to body tag');
} else if (idvalue && !document.body) {
console.warn('ID Injector: Script ran before document.body was ready.');
} else if (!idvalue) {
document.body.id = "";
console.warn('ID Injector: No ID found in URL to inject. Resetting to null.');
}
});
*I left my debugging/console notification code in there, feel free to remove/edit.*
NO DEBUGGING/COMMENTS
document.addEventListener('viewshow', function(event) {
const hashString = window.location.hash;
queryPart = hashString.split('?')[1];
const params = new URLSearchParams(queryPart || '');
const idvalue = params.get('id');
const servervalue = params.get('serverId');
if (idvalue && document.body) {
document.body.id = 'item' + idvalue;
document.body.classList.add('server' + servervalue);
} else if (!idvalue) {
document.body.id = "";
}
});
MINIFIED:
document.addEventListener('viewshow',function(event){const hashString=window.location.hash;queryPart=hashString.split('?')[1];const params=new URLSearchParams(queryPart||'');const idvalue=params.get('id');const servervalue=params.get('serverId');if(idvalue&&document.body){document.body.id='item'+idvalue;document.body.classList.add('server'+servervalue)}else if(!idvalue){document.body.id=""}})
This will grab the id & serverid from your URL and add it to the body tag of each page on load.
So, URL of https://mydomain.com/web/#/details?id=30...60821b15a0
Will result in: <body dir="ltr" id="item30a28ccb0a036ec6004708a56e20074b" class="server31ee634b11af4a959a387160821b15a0">
**note**: CSS names (generally) need to start with a letter, not a number, so we have to add something at the start. I kinda forgot this which made my debugging take WAY longer than it should have.
3) Hit save.
4) Write some custom CSS targeting it!
#Example 1
If the ID# for Spider-Noir was "30a28ccb0a036ec6004708a56e20074b", then put this in your custom css:
/* Turn Spider-Noir's cast BW */
#item30a28ccb0a036ec6004708a56e20074b #castContent {
filter: grayscale (1);
}
And now the cast and crew's pics are black & white!
#Example 2
If you have multiple servers, but they're configured the same/look the same, (prod & test/live & development for example), you can use this to distinguish them. This code will turn the banner orangish, and put "DEV SERVER" in the top left - But only when you're connected to that server.
.server31ee634b11af4a959a387160821b15a0 .skinHeader.semiTransparent {
background-color: rgb(234 124 15 / 60%) !important;
}
.server31ee634b11af4a959a387160821b15a0 .headerLeft::after {
content: "DEV SERVER";
font-size: larger;
font-weight: bolder;
}