Jellyfin Forum
Finimalism [Updated for 10.11.X] - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Finimalism [Updated for 10.11.X] (/t-finimalism-updated-for-10-11-x)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22


RE: Finimalism [Updated for 10.11.X] - LoLacCRO - 2025-11-28

Hello just want to ask if anyone else is having issues with the menu tab on the left not closing all the way. Tried in 2 different browsers still same result. Having it not maximized then I don't have issue if I'm in full screen mode than I don't have issue except for some graphical. but when I use my browser normally maximized then the menu doesn't close all the way.


RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-11-28

.mainDrawer {min-width: unset;}

I'll add it to the css so it applies automatically


RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-11-28

I've got the base design sorted but now, the text is a lot smaller.


RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-11-29

I'm just thinking of a new way around this issue, since with the custom code the logo is moved across to middle, We could reduce the size of the logo and why not move thing up a little ? this could fix my text issue.

Or adjust thing only on this page instead of overriding everything


RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-11-29

If you wanna fork it and make the changes, I can give advice, but I can't make a whole new theme


RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-11-29

(2025-11-29, 09:53 AM)Ted Hinklater Wrote: If you wanna fork it and make the changes, I can give advice, but I can't make a whole new theme

I would love to folk it but I think that would be above my skill level. 

Could you offer some custom CSS code, or advice for custom CSS that could help fix tis for me ?


RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-11-29

You have an idea, which is half of it, the css is easy it just takes time.

Take the css you want, paste it into one notepad file (NotePad++ is best, and free)

In your browser hit f12, and use Inspect to find the element you want to change

Put the new code at the bottom of the file

Paste into Branding

Everything else is now broken so inspect and fix, rinse & repeat


RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-11-30

Ok, how can i copy the code just from this page? so I can adjust the poster and logo how I want.


RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-11-30

https://raw.githubusercontent.com/tedhinklater/finimalism/refs/heads/main/finimalism10.11.css


RE: Finimalism [Updated for 10.11.X] - Blurryface - 2025-11-30

(2025-11-27, 06:19 PM)2020 Wrote:
(2025-11-27, 10:53 AM)Ted Hinklater Wrote: Hi mate youre using very old versions of finimalism and the featured content bar, make sure you update your css import and copy the latest home-html snippet and download the latest spotlight.html

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

download - spotlight.html

latest home-html.chunk.js -

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: 100vw; height: 100vh; display: block; border: 0;
      margin: 0 auto; margin-bottom: -26em; margin-top: -3.5em;
      transition: height 300ms ease, margin 300ms ease;
    }
    @media (min-width: 951px) and (min-height: 700px) {
      .featurediframe { min-height: 70em; }
    }
    @media (max-width: 1000px) and (orientation: portrait) {
      .featurediframe { height: 25em; margin-bottom: -1em; }
    }
    @media (max-width: 1000px) and (orientation: landscape) {
      .featurediframe { height: 26em; margin-bottom: -1em; }
    }
    @media (max-width: 421px) and (orientation: portrait) {
      .featurediframe { height: 100vh; margin-bottom: -28em; margin-top: -6.5em; }
    }
    @media (max-height: 421px) and (orientation: landscape) {
      .featurediframe { height: 100vh; margin-bottom: -6em; margin-top: -6.5em; }
    }
  </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");
  if (!homeTab) return;

  const spotlightIframe = homeTab.querySelector(".featurediframe");
  if (!spotlightIframe) return;

  const observer = new MutationObserver(() => {
    const isHomeTabActive = homeTab.classList.contains("is-active");
    spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
  });

  observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
});
Hi Mate how are you,
 
I'm using the latest 11, the image attaged is a example,  I just want it to look more like  finimalism7.
I also want to increase the size of the categories, they look too small, they are same size as the width of the posters, I want them the same size as default ones.


finimalism 11 by default leaves one row empty, as you can see from the image, but the code you provided above fixes this.
2. is it possible to increase the size of the my media section, they look tiny and unbalanced compared to the rest. 
3. is it possible to make the design slightly more like finimalism7 with banner above, logo in the middle and poster on the side.

Question for you, how did you get the 1080p button to show on the photo?