Skip to main content

CSS Customization

Jellyfin allows users to customize the appearance of the web interface by applying custom CSS. This feature is intended for advanced customization and should be used with care. Support is not provided for issues caused by custom CSS.

Custom CSS is only applied to clients that use Jellyfin Web. As a result, it does not affect all Jellyfin clients.

warning

External resources referenced by custom CSS are loaded by the client, not the Jellyfin server. Ensure these resources are accessible from all client devices. If a resource cannot be reached, Jellyfin Web may not render correctly.

Using externally hosted stylesheets, fonts, or other assets can also affect offline functionality, as clients must be able to download those resources when loading the interface.

To add custom CSS, navigate to Dashboard > Branding and enter your stylesheet in the "Custom CSS" field. Custom CSS is loaded after Jellyfin's default styles, allowing you to override existing rules and customize elements such as colors, layouts, and sizing.

Screenshot of the "Custom CSS" setting in the administrator dashboard of the web client

Alternatively, custom CSS can be configured on a per-user basis under Settings > Display.

Screenshot of the "Custom CSS" setting in the user settings page

If you have little or no experience with CSS, consider reviewing additional community resources and tutorials.

General Information About CSS​

CSS rules are applied in the order they are written, although declarations marked with !important take precedence over most other rules. For more information, see the MDN documentation on CSS and CSS specificity.

You can learn more about CSS using sites like w3schools and MDN. Below is some very basic CSS knowledge that will let you do rough edits.

Colors​

CSS supports multiple color formats, but typically hex color codes are used for specific colors. To get a specific color, exact color data such as the hex codes below have to be used.

Some examples of hex color codes:

  • Green: #5dd000
  • Blue: #0000d0
  • Red: #d00000
  • Transparent Black: #00000058

Use the HTML Color Picker to find the hex code for any given color.

If you are looking for a more standard and less specific color, typing the literal name of colors suits that purpose well. For example, to get the color "yellow" you can simply write "yellow", this will use a preset yellow color.

yellow Yellow
red Red
aquamarine Aquamarine
lightseagreen Light Sea Green

You can find a list of supported color names on the W3Schools Color Names reference.

Comments​

A section of code or text in-between /* and */ indicates a comment, and will be ignored. This allows you to add descriptions for any particular section of code. It can also be used to disable code without deleting it.

/* This might be added above code to tell you what it does */

CSS Chaining​

CSS can be "chained" together to modify different sections together at the same time. An example of this is the "Border Color" tweak. It lists the elements to be modified, and performs a change that is applied to all of them.

"Border Color" tweak:

.emby-input,
.emby-textarea,
.emby-select {
  border-color: #d00000;
}