+- 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)
RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-12-05
no-animation.css definitely works
I'm not sure what style you're going for (sorry, I don't think I quite understand the question) but if you press F12 in the browser and go to Style Editor, and find the theme's css, you can delete chunks until you find what's causing the problem, then go from there.
RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-12-05
(2025-12-05, 09:49 PM)Ted Hinklater Wrote: no-animation.css definitely works
I'm not sure what style you're going for (sorry, I don't think I quite understand the question) but if you press F12 in the browser and go to Style Editor, and find the theme's css, you can delete chunks until you find what's causing the problem, then go from there.
basicly ive been trying to copy your title page style, so I can use a custom code to get the same design as your, background image, movies poster on the left and large logo in the middle, ive tried it with my own code, but I endup breaking the mobile view and profiles as you can see in the images. so I was wondering how you manged to do it without breaking the other code. it inadvertently breaks mobile.
the problem with Jellyfin is the mobile schema and desktop schema shares elements so its finding the balance of 1 config that wont damage multiple platforms.
If you need the code ill DM you the code or share on here.
also I think I think @import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css"); is not working, unless it only my side, I have tried another browser. but nothing changes. image attached of what i see, unable to move it down.
RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-12-05
Ohh I see, I'll use cardText-first (the name under a card)
For a really specific example, let's say you want to change the the color of
only cardText-first
in the More Like This section
of Movies with an Original Foreign Title
on Desktop and TV (not mobile)
on screens taller than 1000px but not wider than 1000px
In the html it appears like this (I'll bold stuff that is useful)
<div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding emby-scroller-container">
<h2 class="sectionTitle sectionTitle-cards padded-right">More Like This</h2>
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent animatedScrollX" style="white-space: nowrap; will-change: transform; transition: transform 270ms ease-out; transform: translateX(0px);">
<div data-index="0" data-isfolder="false" data-id="123456" data-type="Movie" data-mediatype="Video" data-prefix="A D" class="card overflowPortraitCard card-hoverable card-withuserdata">
<div class="cardBox cardBox-bottompadded">
<div class="cardScalable">
<div class="cardPadder cardPadder-overflowPortrait lazy-hidden-children"><span class="cardImageIcon material-icons movie" aria-hidden="true"></span></div>
<div class="cardText cardTextCentered cardText-first"><bdi><a href="#/details?id=3891ca0c5821c80929d1ef91e64ce9d5&serverId=123456" data-id="123456" data-serverid="123456" data-type="Movie" data-mediatype="undefined" data-channelid="undefined" data-isfolder="false" class="itemAction textActionButton" title="A Different Man" data-action="link">A Different Man</a></bdi></div>
<div class="cardText cardTextCentered cardText-secondary"><bdi>2024</bdi></div></div></div>
You can target it with .cardText {
Works but that just targets all the cardtext (first and secondary)
.cardText.cardTextCentered.cardText-first {
works but that applies to all devices
.layout-desktop .cardText.cardTextCentered.cardText-first {
works but it only applies to desktop, not TV
.layout-desktop .cardText.cardTextCentered.cardText-first,
.layout-tv .cardText.cardTextCentered.cardText-first {
works but we want it just for the More Like This section
.layout-desktop #similarCollapsible .cardText.cardTextCentered.cardText-first,
.layout-tv #similarCollapsible .cardText.cardTextCentered.cardText-first {
works but it targets TV and Music etc, we just want movies
.layout-desktop #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first,
.layout-tv #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first {
works but we only want it to apply to movies with original (foreign titles)
.layout-desktop .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first,
.layout-tv .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first {
Works but applies to all screen sizes
@media (min-height: 1000px) and (max-width: 1000px) {
.layout-desktop .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first,
.layout-tv .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first {
color: #f00 !important;
}
}
...we did it!
RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-12-06
Just wondering if it possible to revert to the finimalism7 design or would it have to many issues?
RE: Finimalism [Updated for 10.11.X] - Ted Hinklater - 2025-12-06
This is from the update to 10.11, before any big changes from 7 (i think)
https://github.com/tedhinklater/finimalism/blob/0de888e4abd0d02d91e0c5fa9dd626f8e7bb2f0d/finimalism10.11.css
RE: Finimalism [Updated for 10.11.X] - 2020 - 2025-12-06
Thank, let me give it a try.