When you view the media folders on a Jellyfin server, you will see the folders displayed horizontally, so you have to click on a rightward-pointing arrowhead to view additional folders. If you wish to change that behavior so that you see a grid display, instead, you can change it through CSS. To do so, take the following steps:

1. Click on the hamburger button (3 short horizontal lines one below the other) at the upper-righthand corner of the homepage display for the server when viewing it from a browser.
2. Select Dashboard.
3. Select Branding.
4. Paste the following code into the "Custom CSS code" field, then click on Save.
   
   

   @media all and (min-width: 50em) {
     .homePage .emby-scroller {
       margin-right: 0;
     }
     .homePage .emby-scrollbuttons {
       display: none;
     }
     .homePage .itemsContainer {
       flex-wrap: wrap;
     }
   }
   

When you go back to the home page for the Jellyfin server and refresh the webpage in your web browser, you should now see a grid display for all of the folders you created, i.e., rows of folders one beneath the other. If you don't see the change take effect, try pressing the Ctrl and the F5 keys, or Cmd, Shift, and R, depending on your operating system, together to force a refresh that will apply CSS changes. For an example of how the display of folders changes, see these "before" and "after" displays for a server on which 6 folders had been created. Note: the custom CSS injected via the server dashboard applies to web browser clients and the desktop client, but dedicated apps, such as Android TV or Fire TV stick, may ignore the web CSS. It does work with the Jellyfin app under the LG webOS on an LG TV.

[ More Info ]

[/network/web/server/jellyfin] permanent link