Finimalism [Updated for 10.11.X]

[Ted Hinklater]

I mentioned I have tried to reproduce your problem but I can't, I thought it was the grids so they're gone but your problem remains, so it's something else

If you want to be a big help for this:

press F12 in the browser to open dev tools
open the Elements (Chrome) / Inspector (Firefox) tab
look for finimalism10.11.css:2875 (or similar) and click it
start at the bottom and delete chunks until your homepage looks right, and tell me which lines are causing trouble

If we know what code is breaking it for you, I can change it

[2020]

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.

[2020]

I was having some issues adding the images, but I have re attached them.

Forgot to ask if it possible to custom the buttons at the top a little, and adding a bitt of space like the image attached.

also I have just updated to the latest spotlight.html, home-html.chunk.js - after noticing you have updated it.

[2020]

1. I was thinking with  @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");
you can scroll up and down could we not have it start at half way on the poster ?  like the image I have attached.

2. A way to move the logo into the middle with a bigger size, assuming this will be CSS, like the image 

3. the updated spotlight.html, home-html.chunk.js has changed the way Jellyfin Featured Content Bar works, now its nolonger showing the trailer.

[Ted Hinklater]

Have you emptied your browser cache?

Your bar should look like this with a trailer button


Your movie page should look like this

[2020]

Yes, that's what the bar looks like

the page is a little different image attached.

   
Also I cant see the video, audio and subtitles part.

and like this when only using @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");
   


will this code word to increase the size of the my media cards, /* 1. CARD SIZE: Targets the cards (using a slightly shorter version of your class)
  and uses absolute pixels for size. */
.layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard {
    width: 300px !important;  /* Your desired width */
    height: 180px !important; /* Your desired height */
}

/* 2. CARD IMAGE: Ensures the image fills the new card size */
.layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard .cardImageContainer {
    width: 100% !important;
    height: 100% !important;
}

[Ted Hinklater]

If you're on 720p you can use this

Code:

/* 720p resolution */
@media (max-width: 1280px) and (max-height: 720px) {.layout-desktop body, .layout-tv body {font-size: 77% !important;}}

I've added that to the theme it should apply automatically soon

I've redesigned the header tabs (Home / Favourites) to use a bit more space and match the theme

If you just want to change the size of the My Media cards (first row on the homepage) use this

Code:

.layout-desktop .verticalSection.MyMedia.section0 .card.overflowBackdropCard.card-hoverable.card-withuserdata {width: 18em !important;}

change "18" to the size you want

[2020]

!. The resolution is 1920 x 1080 but scaled to 125% due to vision, anyway around this ?
2. I it possible to move logo to middle like the bar ?
3. The code does not seam to do anything ( .layout-desktop .verticalSection.MyMedia.section0 .card.overflowBackdropCard.card-hoverable.card-withuserdata {width: 18em !important;} )

[Ted Hinklater]

Use this to change the font size to fit your screen

Code:

@media (max-height: 1000px) {.layout-desktop body {font-size: 84% !important;}}

for the logo where you want it

Code:

@media (orientation: landscape) {.layout-desktop #itemDetailPage:has(.portraitCard) .detailLogo, .layout-tv #itemDetailPage:has(.portraitCard) .detailLogo, .layout-desktop .itemDetailPage:has(.button-link.itemAction.emby-button[data-type="Season"]) .detailLogo, .layout-tv .itemDetailPage:has(.button-link.itemAction.emby-button.show-focus[data-type="Season"]) .detailLogo, .layout-desktop .detailLogo, .layout-tv .detailLogo {left: 50vw;top: 43vh;transform: translateX(-50%) translateY(-50%);max-height: 30em;max-width: 52em;width: 100%;height: 100%;right: unset;z-index: 1;}}

for the my media cards try this, it's a little less specific

Code:

.layout-desktop .MyMedia .card.overflowBackdropCard.card-hoverable.card-withuserdata {width: 18em !important;}

[2020]

The code worked mostly worked as I wanted.

The only code I'm having issues with is

Code:

.layout-desktop .MyMedia .card.overflowBackdropCard.card-hoverable.card-withuserdata {width: 18em !important;}

This one works fine. 

Code:

.layout-desktop #indexPage .itemsContainer .card.overflowBackdropCard {
    width: 300px !important;  /* Your desired width */
    height: 180px !important; /* Your desired height */
}

Also the text has shrunk, I don't know if that is the default size.
   

Do you by chance have a code that will allow me to increase the size of the fonts and header, instead of finding them one by one ? .mainDrawer .skinHeader