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!
This adds the item ID# as an ID to the body tag of the page, and adds the serverID as a css class name.
- Install JS Injector, a common plugin used by several major plugins. Restart Jellyfin to enable the plugin.
https://github.com/n00bcodr/Jellyfin-JavaScript-Injector
- 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 (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!
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!
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;
}