Finimalism [Updated for 10.11.X]

[Blurryface]

Funny enough that is exactly what I did, created the UI folder, copied the 2 into the folder. Replaced the home html with what you had and cleared the cache which then caused that like 2 login I displayed in the photo.

Reminds me of this post, they had saved the files from github incorrectly

What happened to the Finalism and the backgrounds? They no longer show as they did before. I do enjoy the new layout but the background is no longer accessible/visible when drilling down. I did enjoy that before.

[Ted Hinklater]

Do you have this box ticked?



Click your profile icon, click Display, scroll down to Libraries

Edit: I've made this so it goes back to how it was before the animations 

Code:

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");

[Blurryface]

Do you have this box ticked?



Click your profile icon, click Display, scroll down to Libraries

Edit: I've made this so it goes back to how it was before the animations 

Code:

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");

The new edit with the no-animation fixed it back to how it was before. Thanks!

[2020]

Few things in the latest update, first
https://github.com/lachlandcp/jellyfin-e...ice-plugin breaks splitting all the banners.


2nd I cant seam to get spotlight to work but editors choice and media bar work fine.

3rd when you add @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css"); the poster covers part of the text.
I have followed the instructions 
1. Download spotlight.html and List.txt. Go to your jellyfin-web folder (C:\Program Files\Jellyfin\Server\jellyfin-web) and create a folder named ui and drop spotlight.html and List.txt in that folder. ui lower case.

2. use Notepad++ for this In the jellyfin-web folder, open the file home-html.RANDOMSTRINGHERE.chunk.js. Replace everything with this code
("use strict";(self.webpackChunk=self.webpackChunk||[]).push([[8372], {
  5939: function(a, e, t) {
    t.r(e),
    e.default =
    <div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book">
      <style>
        .featurediframe {width: 97.5vw; height: 23.5em; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 0em; margin-top: 1em;}
    @media (max-width: 1000px) and (orientation: portrait) {.featurediframe {height: 25em; margin-bottom: -8em;} }
    @media (max-width: 1000px) and (orientation: landscape) {.featurediframe {height: 26em; margin-bottom: -6em;} }
    @media (max-width: 421px) and (orientation: portrait) {.featurediframe {height: 25em; margin-bottom: -3em;} }
    @media (max-height: 421px) and (orientation: landscape) {.featurediframe {height: 83vh; margin-top: -1em;} }
      </style>
      <div class="tabContent pageTabContent" id="homeTab" data-index="0"><iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe><div class="sections"></div></div><div class="tabContent pageTabContent" id="favoritesTab" data-index="1"> <div class="sections"></div></div></div>;}}]);
document.addEventListener("DOMContentLoaded", () => {
  const homeTab = document.getElementById("homeTab");
  const spotlightIframe = homeTab.querySelector(".featurediframe");

  const observer = new MutationObserver(() => {
  const isHomeTabActive = homeTab.classList.contains("is-active");
    spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
  });
  observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
})

3. Save the file. and  tested in private window.

[Ted Hinklater]

Hey 2020 hope you're well,

Can I ask what version of Jellyfin you're on?

Private window might still have a cache issue if you're using a reverse proxy?

[2020]

Hey 2020 hope you're well,

Can I ask what version of Jellyfin you're on?

Private window might still have a cache issue if you're using a reverse proxy?

Thank you for the reply, I'm good how about yourself. 

I'm on the latest 10.11
I've done it in a new browser in private mode and after a 5mins it started working on the main browser. but I still have the issue with EditorsChoice

is it possible to add the following features directly into your Jellyfin Featured Content Bar all that would be needed I assume would be the extra js file I assume https://github.com/CodeDevMLH/Jellyfin-F...'s-Version

another question is it possible to make the bar bigger it looks a little small when you compare it to Disney+ and others unless it meant to look like that.

[Ted Hinklater]

Hey 2020 hope you're well,

Can I ask what version of Jellyfin you're on?

Private window might still have a cache issue if you're using a reverse proxy?

Thank you for the reply, I'm good how about yourself. 

I'm on the latest 10.11
I've done it in a new browser in private mode and after a 5mins it started working on the main browser. but I still have the issue with EditorsChoice

is it possible to add the following features directly into your Jellyfin Featured Content Bar all that would be needed I assume would be the extra js file I assume https://github.com/CodeDevMLH/Jellyfin-F...'s-Version

another question is it possible to make the bar bigger it looks a little small when you compare it to Disney+ and others unless it meant to look like that.

I'm good thanks, a variables file would be a good idea! I'll do that next. Currently the variables are down on line 102 in spotlight.html

Here's a taller version https://github.com/tedhinklater/Jellyfin...light.html



You would also need to change line 7 of home-html.chunk.js to

        .featurediframe {width: 97.5vw; height: 50vh; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 0em; margin-top: 1em; }

[Ruby]

Stupid question I apologize, but are the steps any different if I am attempting this in docker on a ugreen nas? I created the ui folder and edited the files to my liking that was simple enough but how do I mount it or if that's the wrong term how do I get jellyfin to see it and use it? I just started messing around with this stuff a couple weeks ago and this theme looks beautiful.

[Ted Hinklater]

Stupid question I apologize, but are the steps any different if I am attempting this in docker on a ugreen nas? I created the ui folder and edited the files to my liking that was simple enough but how do I mount it or if that's the wrong term how do I get jellyfin to see it and use it? I just started messing around with this stuff a couple weeks ago and this theme looks beautiful.

I think you need to edit the jellyfin container's volume mounts to include

Code:

/localpathtojellyfin/jellyfin/appdata/ui:/usr/share/jellyfin/web/ui:ro

(wherever you put the ui folder in the nas) : (ui folder inside the container) : (read only)

change the first path to fit your filesystem