3.5 KiB
uid, title
| uid | title |
|---|---|
| clients-css-customization | CSS Customization |
CSS Customization
In Dashboard > Branding, the "Custom CSS" field can be used to override current CSS in Jellyfin's stylesheet.
Custom CSS provides customization such as changing colors, changing layouts, and item size and behavior. Below is a list of various tweaks that can be applied. The CSS tweaks work on all clients that load Jellyfin-Web from the Server. The code will apply in the order that it is written, however !important will overrule everything. To learn more about !important and more, see CSS Specificity or specifishity. To implement these changes, go to Dashboard > Branding > Custom CSS to start.
If you have little or no experience with CSS, various resources and tutorials can be found online. Using the tweaks and examples below makes it quite easy to get started with making your own changes to your Jellyfin instance.
General Information About CSS
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
Some links to places where custom CSS has been discussed and shared!