Item ID & Server ID javascript injector
Jellyfin-ID-Injector-Script
In Jellyfin, this adds the item ID# as an ID to the body tag of the page, and adds the serverID as a css class name.
Inspired by Werewolf by Night / Spider-Noir, I now have an easy way to theme individual library items - or change theming based on server.
This will grab the id & serverid from your URL and add it to the body tag of each page on load.
Will result in:
<body dir="ltr" id="item30a28ccb0a036ec6004708a56e20074b" class="server31ee634b11af4a959a387160821b15a0">
Then you can have your custom CSS code do stuff to certain entries, if you're so inclined. Yeah, it's a little silly, but that's part of the point of self-hosting - so we can do our own silly things!
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.
Prerequite
- Install JS Injector, a common plugin used by several major plugins. Restart Jellyfin to enable the plugin.
https://github.com/n00bcodr/Jellyfin-JavaScript-Injector
Setup
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.
Version with 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 (via https://www.minifier.org/):
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=""}})
Hit save.
Write some custom CSS targeting it!
<img width="863" height="1028" alt="Screenshot 21" src="https://github.com/user-attachments/assets/9c4b2802-93eb-476d-b42d-5b967231b1ee" />
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 [and only when you're on an item page; pages without serverid in the URL won't be lit up, such as the home page]
.server31ee634b11af4a959a387160821b15a0 .skinHeader.semiTransparent {
background-color: rgb(234 124 15 / 60%) !important;
}
.server31ee634b11af4a959a387160821b15a0 .headerLeft::after {
content: "DEV SERVER";
font-size: larger;
font-weight: bolder;
}
AI Disclaimer: AI was used for debugging; figuring out why what I wrote didn't work (damn typos). that's it.