• Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below
  • Forum
  • Website
  • GitHub
  • Status
  • Translation
  • Features
  • Team
  • Rules
  • Help
  • Feeds
User Links
  • Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below

    Useful Links Forum Website GitHub Status Translation Features Team Rules Help Feeds
    Jellyfin Forum Support Themes & Styles Finimalism [Updated for 10.11.X]

    Pages (22): « Previous 1 … 18 19 20 21 22
     

     
    • 7 Vote(s) - 5 Average

    Finimalism [Updated for 10.11.X]

    Where minimalism goes to die
    Ted Hinklater
    Offline

    Member

    Posts: 233
    Threads: 8
    Joined: 2023 Nov
    Reputation: 26
    Country:United Kingdom
    #211
    2025-12-05, 09:49 PM
    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.
    2020
    Offline

    Junior Member

    Posts: 33
    Threads: 4
    Joined: 2025 Jun
    Reputation: 0
    #212
    2025-12-05, 10:12 PM (This post was last modified: 2025-12-05, 10:18 PM by 2020. Edited 4 times in total.)
    (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.


    Attached Files Thumbnail(s)
       
    Ted Hinklater
    Offline

    Member

    Posts: 233
    Threads: 8
    Joined: 2023 Nov
    Reputation: 26
    Country:United Kingdom
    #213
    2025-12-05, 11:14 PM (This post was last modified: 2025-12-05, 11:15 PM by Ted Hinklater. Edited 1 time in total.)
    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&amp;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!
    1
    2020
    Offline

    Junior Member

    Posts: 33
    Threads: 4
    Joined: 2025 Jun
    Reputation: 0
    #214
    4 hours ago
    Just wondering if it possible to revert to the finimalism7 design or would it have to many issues?
    Ted Hinklater
    Offline

    Member

    Posts: 233
    Threads: 8
    Joined: 2023 Nov
    Reputation: 26
    Country:United Kingdom
    #215
    3 hours ago
    This is from the update to 10.11, before any big changes from 7 (i think)

    https://github.com/tedhinklater/finimali...m10.11.css
    2020
    Offline

    Junior Member

    Posts: 33
    Threads: 4
    Joined: 2025 Jun
    Reputation: 0
    #216
    3 hours ago
    Thank, let me give it a try.
    Pages (22): « Previous 1 … 18 19 20 21 22
     

    « Next Oldest | Next Newest »

    Users browsing this thread: 1 Guest(s)


    • View a Printable Version
    • Subscribe to this thread
    Forum Jump:

    Home · Team · Help · Contact
    © Designed by D&D - Powered by MyBB
    L


    Jellyfin

    The Free Software Media System

    Linear Mode
    Threaded Mode