Seeking Help: Customizing an Existing Jellyfin Theme (CSS Novice!)

[2020]

Hello everyone,
I'm relatively new to Jellyfin, theme customization and only have a basic understanding of CSS, so I'm hoping to get some guidance and assistance from the knowledgeable members of this community. My immediate goal is to customize my Jellyfin experience by modifying an existing theme. This feels like a more practical and less overwhelming approach for me, given my limited CSS skills, and it's also a stepping stone towards my longer-term goal of eventually creating my own fully custom theme.
I'm currently weighing which theme would be the best to start with as a base for these modifications. I'm considering Zestytheme, Jellypame, Ultrachromic by CTalvio, or even the default Jellyfin theme. Any advice on a good base theme for customization would be incredibly helpful!
Specifically, I'm looking to achieve a few key design adjustments by incorporating elements and styles I like from other themes:

• Font and UI Element Sizing: I find that some themes, like Finimalism, have text and UI elements that appear too small for my setup. I really appreciate the font size and overall aesthetic of Zesty, and I'd love to integrate similar sizing throughout my chosen base theme for better readability and a cleaner look.
  
• "Play Section Header" Style: I'm keen on adopting the specific "play section header" styling found in
  finimalism7.css
  . My aim is to apply this style to my chosen base theme, but crucially, adapt it to a font size similar to what's used in Zesty.
  

I'm hoping some kind people here might be able to point me in the right direction, offer advice, or even lend a hand with some CSS snippets. If anyone has experience customizing Jellyfin themes, especially with adjusting font sizing or porting specific elements, your insights would be invaluable.
Perhaps even some of the original developers, like @tedh @Ted Hinklater (if you're still active here!), might be able to offer initial pointers or guidance on the best approach for someone with limited CSS experience to make these modifications and understand the underlying structure for future custom theme development.
Any help or advice would be greatly appreciated!
Thanks in advance,
2020

[dantegrid]

If your main goal is to learn and iterate rather than immediately build a theme from scratch, the most practical approach is to choose a single base theme and work with your own CSS overrides instead of trying to mix multiple full themes together. For someone with only basic CSS knowledge, the default Jellyfin theme is actually a very strong starting point because it has fewer hard coded design decisions and makes it easier to understand which selectors control which parts of the UI. If you prefer starting from something more visually styled, Zesty is also a reasonable base, especially since you already like its typography and overall sizing and would mostly be refining rather than fighting the existing design.

When it comes to font and UI sizing, it usually helps to think in terms of overall scale rather than adjusting individual components in isolation. In themes like Finimalism, the interface often feels too small because of a reduced base font size combined with tight line heights and spacing. Slightly increasing the base font size and then fine tuning a few key elements such as section headers, metadata text, and buttons often gets you very close to the Zesty look and feel without requiring extensive CSS changes.

For bringing over the play section header style from finimalism7.css, it is better not to copy the CSS block directly. A more maintainable approach is to inspect the element in Finimalism to see which properties actually define its appearance such as background treatment, borders, pseudo elements, and spacing, and then apply those same ideas to the corresponding element in your chosen base theme. You can then adjust the font size and spacing to better match Zesty’s typography, which helps avoid selector conflicts and makes future updates easier to handle.

It can also be useful to look beyond Jellyfin specific themes and explore interactive UI demos in general. Being able to interact with components makes it much easier to judge font size, spacing, and visual hierarchy than looking at static screenshots. For example, sites like https://somagyarkaszinok.com/ have sections where you can try demos directly on the site. Even though it is not a Jellyfin focused resource, interacting with real headers, cards, and typography can be helpful when deciding what feels right before translating those ideas into Jellyfin CSS overrides.

[Ted Hinklater]

Hey 2020 I didn't know the font was too small so I've hopefully fixed that now

Also if you want I made a Jellyfin CSS cookbook https://github.com/tedhinklater/JellyfinThemeGuide

If there's anything missing or confusing I can help