• 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 Collection card image occupying too much space

     
    • 0 Vote(s) - 0 Average

    Collection card image occupying too much space

    I need help building custom CSS to shrink/delete the Collection detailed card image
    Papero
    Offline

    Junior Member

    Posts: 5
    Threads: 2
    Joined: 2024 Sep
    Reputation: 0
    #1
    2024-09-16, 03:21 PM (This post was last modified: 2024-09-17, 07:56 AM by Papero. Edited 1 time in total.)
    I am new to Jellyfin (just moved from Plex) and currently trying to learn how to customize the design with small Custom CSS code.
    I am wondering if there is a simple way to shrink the image associated to a Collection in this screen (see attachment).
    All the space available on the left is wasted, due to the Collection image, which could be much smaller (since it contains only "2009").
    Eventually I would be happy also removing the image altogether, so that when I click on a Collection I just go to a page containing only the list of movies.
    Many thanks for your help.


    Attached Files Thumbnail(s)
       
    Papero
    Offline

    Junior Member

    Posts: 5
    Threads: 2
    Joined: 2024 Sep
    Reputation: 0
    #2
    2024-09-18, 08:54 AM (This post was last modified: 2024-09-18, 01:44 PM by Papero. Edited 3 times in total.)
    I can actually answer to myself.
    After a bit of studying and copying what others have done in their theme CSS, I found out the required code.

    To reduce the size of the picture (and enlarge the space available for the card content) use:
    @media {
       .detailImageContainer .card {
          width: 10vw !important;
        }
       .detailPagePrimaryContainer {
           padding-left: 16vw !important;
        }
       .detailPageContent {
          padding-left: 16vw !important;
        }
    }

    This is just an example. To have an even smaller picture just reduce the 10vw and to expand the content increase both 16vw (you will have to try out what works better for you).
       

    To remove completely the card picture and expand and center the content I did this:
    @media {
       .detailImageContainer .card {
          display: none;
       }
       .detailPagePrimaryContainer {
          padding-left: 2% !important;
       }
       .detailPageContent {
          padding-left: 2% !important;
       }
    }
       

    Unfortunately I have not found (yet) a way to apply this only to Collections and NOT to each movie card.
    I would love to maintain the format unchanged for movies (it's nice to have the large image there) and modify it only for Collections.
    Any suggestion?
    1
    1
    « 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