4.7 KiB
uid, title
| uid | title |
|---|---|
| clients-css-customization | CSS Customization |
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 load Jellyfin Web from your server. As a result, it does not affect all Jellyfin clients. Some web-based clients bundle their own version of Jellyfin Web and therefore do not load custom CSS from the server.
:::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.
Alternatively, custom CSS can be configured on a per-user basis under Settings > Display.
If you have little or no experience with CSS, consider reviewing the community resources and tutorials linked below.
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 are some very basic CSS knowledge that will let you do rough edits to the pre-made tweaks below.
Colors
CSS supports multiple color formats, but typically the 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;
}
Community Links
The community maintains a wide range of themes and guides for CSS customization. Some useful resources can be found below. Before applying a theme or customization, verify that it is actively maintained and compatible with your version of Jellyfin. Themes that have not been updated for recent releases may not work correctly or could cause unexpected UI issues. These resources are maintained by the community and are not supported by the Jellyfin Project.