mirror of
https://github.com/jellyfin/jellyfin.org.git
synced 2026-09-03 04:30:04 +03:00
remove tweak list
This commit is contained in:
BotBlake
@@ -61,722 +61,6 @@ CSS can be "chained" together to modify different sections together at the same
|
||||
}
|
||||
```
|
||||
|
||||
## Tweak List
|
||||
|
||||
To apply any one of these tweaks, copy and paste the CSS code from the example into the "Custom CSS" field. To use multiple tweaks, simply add them one after another into the field. Any applied code will remain in the field. To remove a tweak, delete or comment out the code for it from the field. Changes apply immediately when the settings page is saved and does not require restarting your Jellyfin server.
|
||||
|
||||
### Played Indicator
|
||||
|
||||
This will affect the played/watched indicator. Replace the hex color with any value you like.
|
||||
|
||||
### Indicators Without Tweak
|
||||
|
||||
|
||||
|
||||
### Green Indicators
|
||||
|
||||
```css
|
||||
/* Make watched icon green */
|
||||
.playedIndicator {
|
||||
background: #5dd000;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Transparent And Dark Indicators
|
||||
|
||||
```css
|
||||
/* Make watched icon dark and transparent */
|
||||
.playedIndicator {
|
||||
background: #00000058 !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Transparent count indicators (eg. Series)
|
||||
|
||||
```css
|
||||
/* Make count indicator icon dark and transparent */
|
||||
.countIndicator {
|
||||
background: #00000058;
|
||||
}
|
||||
```
|
||||
|
||||
### Display external links in mobile layout
|
||||
|
||||
The mobile app disables display of external links to IMDb, TheMovieDB, Trakt, etc by default.
|
||||
To enable the external links again, add the following snippet:
|
||||
|
||||
```css
|
||||
.layout-mobile .itemExternalLinks {
|
||||
display: block !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Home Icon from Header
|
||||
|
||||
```css
|
||||
.headerHomeButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.headerButton.headerButtonRight.headerUserButton.paper-icon-button-light {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Cast Icon from Header
|
||||
|
||||
```css
|
||||
.headerCastButton {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Sync Icon from Header
|
||||
|
||||
```css
|
||||
.headerSyncButton {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide User Settings from Header
|
||||
|
||||
```css
|
||||
.material-icons.person {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Live TV Channel Listings
|
||||
|
||||
```css
|
||||
.guideChannelNumber {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Reduce Live TV Channel Width
|
||||
|
||||
```css
|
||||
.channelsContainer {
|
||||
max-width: 8em;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Cast & Crew
|
||||
|
||||
```css
|
||||
#castCollapsible {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide More Like This
|
||||
|
||||
```css
|
||||
#similarCollapsible {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Next Up
|
||||
|
||||
```css
|
||||
div.nextUpSection {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Star Ratings
|
||||
|
||||
```css
|
||||
div.starRatingContainer {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Replace "Latest Movies" text with Custom Text such as "Recently Added Movies"
|
||||
|
||||
```css
|
||||
#homeTab
|
||||
> div
|
||||
> div.section2
|
||||
> div:nth-child(1)
|
||||
> div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
|
||||
> a
|
||||
> h2 {
|
||||
display: none;
|
||||
}
|
||||
#homeTab
|
||||
> div
|
||||
> div.section2
|
||||
> div:nth-child(1)
|
||||
> div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
|
||||
> a
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
#homeTab
|
||||
> div
|
||||
> div.section2
|
||||
> div:nth-child(1)
|
||||
> div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
|
||||
> a:after {
|
||||
content: 'Recently Added Movies ›';
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
```
|
||||
|
||||
### Replace Latest TV Shows text with Custom Text such as "Recently Added TV Shows"
|
||||
|
||||
```css
|
||||
#homeTab
|
||||
> div
|
||||
> div.section2
|
||||
> div:nth-child(2)
|
||||
> div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
|
||||
> a
|
||||
> h2 {
|
||||
display: none;
|
||||
}
|
||||
#homeTab
|
||||
> div
|
||||
> div.section2
|
||||
> div:nth-child(2)
|
||||
> div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
|
||||
> a
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
#homeTab
|
||||
> div
|
||||
> div.section2
|
||||
> div:nth-child(2)
|
||||
> div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
|
||||
> a:after {
|
||||
content: 'Recently Added TV Shows ›';
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
```
|
||||
|
||||
### Background Image on Login Page
|
||||
|
||||
```css
|
||||
#loginPage {
|
||||
background: url('https://i.ytimg.com/vi/avCWDDox1nE/maxresdefault.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
```
|
||||
|
||||
### Background Image on Homepage
|
||||
|
||||
```css
|
||||
.backdropImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.backgroundContainer {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-image: url('https://i.ytimg.com/vi/avCWDDox1nE/maxresdefault.jpg');
|
||||
filter: blur(10px);
|
||||
background-size: cover;
|
||||
}
|
||||
```
|
||||
|
||||
[Additional MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
|
||||
|
||||
### Transparent Top Menu
|
||||
|
||||
```css
|
||||
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
|
||||
background: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
|
||||
background: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
```
|
||||
|
||||
### Image Edge Rounded
|
||||
|
||||
```css
|
||||
.cardContent-button,
|
||||
.itemDetailImage {
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
```
|
||||
|
||||
### Enlarge Tab Buttons
|
||||
|
||||
Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.
|
||||
|
||||
```css
|
||||
/* Adjust both "size-adjust" and "size" to modify size */
|
||||
.headerTabs.sectionTabs {
|
||||
text-size-adjust: 110%;
|
||||
font-size: 110%;
|
||||
}
|
||||
.pageTitle {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.emby-tab-button {
|
||||
padding: 1.75em 1.7em;
|
||||
}
|
||||
```
|
||||
|
||||
**The enlarged tab buttons and transparent menu look like this:**
|
||||
|
||||
|
||||
|
||||
### Minimalistic Login Page
|
||||
|
||||
This looks even better together with the transparent top menu!
|
||||
|
||||
```css
|
||||
/* Narrow the login form */
|
||||
#loginPage .readOnlyContent,
|
||||
#loginPage form {
|
||||
max-width: 22em;
|
||||
}
|
||||
|
||||
/* Hide "please login" text, margin is to prevent login form moving too far up */
|
||||
#loginPage h1 {
|
||||
display: none;
|
||||
}
|
||||
#loginPage .padded-left.padded-right.padded-bottom-page {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/* Hide "manual" and "forgot" buttons */
|
||||
#loginPage .raised.cancel.block.btnManual.emby-button {
|
||||
display: none;
|
||||
}
|
||||
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Stylized Episode Previews
|
||||
|
||||
The episode previews in season view are sized based on horizontal resolution. This leads to a lot of wasted space on the episode summary and a high vertical page, which requires a lot of scrolling. This code reduces the height of episode entries, which solves both problems.
|
||||
|
||||
```css
|
||||
/* Size episode preview images in a more compact way */
|
||||
.listItemImage.listItemImage-large.itemAction.lazy {
|
||||
height: 110px;
|
||||
}
|
||||
.listItem-content {
|
||||
height: 115px;
|
||||
}
|
||||
.secondary.listItem-overview.listItemBodyText {
|
||||
height: 61px;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Stylized and Smaller Cast & Crew Info
|
||||
|
||||
This will drastically change the style of cast info into something very similar to how Plex approaches it. This override will lead to somewhat smaller thumbnails, and also works with all themes.
|
||||
|
||||
```css
|
||||
/* Shrink and square (or round) cast thumbnails */
|
||||
#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata {width: 4.2cm !important; font-size: 90% !important;}
|
||||
#castContent .card.overflowPortraitCard.personCard.card-withuserdata {width: 4.2cm !important; font-size: 90% !important;}
|
||||
|
||||
/* Correct image aspect ratio behavior, set border-radius to zero for square tiles */
|
||||
#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy {background-size: cover; !important; border-radius: 2.5cm;}
|
||||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
|
||||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
|
||||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
|
||||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
|
||||
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction {background-size: cover; !important; border-radius: 2.5cm;}
|
||||
#castContent .cardScalable {width: 3.8cm !important; height: 3.8cm !important; border-radius: 2.5cm;}
|
||||
#castContent .cardOverlayContainer.itemAction {border-radius: 2.5cm;}
|
||||
|
||||
/* Center the mouseover buttons */
|
||||
#castContent .cardOverlayButton-br {bottom: 4%; right: 15%; width: 70%;}
|
||||
#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {margin:auto;}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Pictureless Cast & Crew
|
||||
|
||||
```css
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 4.2cm;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
#castContent .personCard {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#castContent .personCard .cardBox {
|
||||
margin-bottom: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#castContent {
|
||||
flex-wrap: wrap;
|
||||
max-height: 9.75em;
|
||||
}
|
||||
|
||||
div.personCard > :first-child > :first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.itemDetailPage .cardText {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.itemDetailPage .textActionButton {
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Custom Background Color
|
||||
|
||||
```css
|
||||
.backgroundContainer,
|
||||
.dialog,
|
||||
html {
|
||||
background-color: #0fd0d0;
|
||||
}
|
||||
```
|
||||
|
||||
### Darken the Background
|
||||
|
||||
This darkens the background on Blue Radiance and Purple Haze, edit the percentage depending how dark you want it. Lower is darker.
|
||||
|
||||
```css
|
||||
/* Darken background, only works with blue radiance */
|
||||
.backgroundContainer {
|
||||
background-color: #000000;
|
||||
filter: brightness(50%);
|
||||
}
|
||||
```
|
||||
|
||||
### Right Header Color
|
||||
|
||||
This modifies the colors of the cast, search and user buttons in the top right.
|
||||
|
||||
```css
|
||||
.headerRight {
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Console Panel Custom Color
|
||||
|
||||
Modifies the color of the left menu panel.
|
||||
|
||||
```css
|
||||
.mainDrawer-scrollContainer {
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### General Page Custom Color
|
||||
|
||||
```css
|
||||
.dashboardGeneralForm {
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Custom Border Color
|
||||
|
||||
This will change the border color for text fields and drop-down menus.
|
||||
|
||||
```css
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
border-color: #d00000;
|
||||
}
|
||||
```
|
||||
|
||||
This will affect the border color of highlighted (selected) text fields and drop-down menus.
|
||||
|
||||
```css
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor {
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Full Header Tweak
|
||||
|
||||
```css
|
||||
.skinHeader,
|
||||
.mainDrawer,
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.navMenuOption-selected,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: #ff9475;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Disable Image Carousel for Libraries
|
||||
|
||||
This will make it so libraries and media fit neatly onto the homepage with no left to right scrolling required.
|
||||
|
||||
```css
|
||||
@media all and (min-width: 50em) {
|
||||
.homePage .emby-scroller {
|
||||
margin-right: 0;
|
||||
}
|
||||
.homePage .emby-scrollbuttons {
|
||||
display: none;
|
||||
}
|
||||
.homePage .itemsContainer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Shift Scroller Buttons
|
||||
|
||||
```css
|
||||
.emby-scrollbuttons {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.emby-scrollbuttons-button {
|
||||
pointer-events: initial;
|
||||
}
|
||||
```
|
||||
|
||||
### "Hotdogs and Catsup" Color Theme Example
|
||||
|
||||
An example of a color theme.
|
||||
|
||||
|
||||
|
||||
```css
|
||||
.skinHeader,
|
||||
.mainDrawer,
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.navMenuOption-selected,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: #ff9475;
|
||||
}
|
||||
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
border-color: #fdbe7d;
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop,
|
||||
.backdropContainer,
|
||||
.backgroundContainer {
|
||||
background: #fdbe7d;
|
||||
}
|
||||
|
||||
#myPreferencesMenuPage .listItemBodyText,
|
||||
.emby-tab-button[data-index='0'],
|
||||
#myPreferencesMenuPage > div > div > div > a:nth-child(odd),
|
||||
.button-submit,
|
||||
.mainAnimatedPage *:nth-child(odd),
|
||||
.dashboardGeneralForm *:nth-child(odd),
|
||||
.mainDrawer-scrollContainer *:nth-child(odd),
|
||||
.headerRight *:nth-child(odd) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#myPreferencesMenuPage .listItemIcon,
|
||||
.emby-tab-button[data-index='1'],
|
||||
#myPreferencesMenuPage > div > div > div > a:nth-child(even),
|
||||
.mainAnimatedPage *:nth-child(even),
|
||||
.dashboardGeneralForm *:nth-child(even),
|
||||
.mainDrawer-scrollContainer *:nth-child(even),
|
||||
.headerRight *:nth-child(even) .cancel {
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
### Floating Now Playing Controls
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* fixed height for the bottom row */
|
||||
:root {
|
||||
--element-fixed-top: 95px;
|
||||
}
|
||||
|
||||
/* Now playing bar in the footer */
|
||||
.nowPlayingBar {
|
||||
width: 650px;
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
top: 300px;
|
||||
height: 120px;
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
background-color: black;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
/* Only child of nowPlayingBar */
|
||||
.nowPlayingBarTop {
|
||||
height: 5px !important;
|
||||
max-width: 500px
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
/* Song progress seekbar */
|
||||
.nowPlayingBarPositionContainer {
|
||||
position: relative;
|
||||
top: 1.0em !important;
|
||||
}
|
||||
|
||||
/* Container that holds album thumbnail, artist and album name */
|
||||
.nowPlayingBarInfoContainer {
|
||||
position: fixed !important;
|
||||
left: 12px;
|
||||
top: 34px;
|
||||
height: 60px;
|
||||
width: 1100px;
|
||||
}
|
||||
|
||||
/* Holds the next, previous track, play/pause, next and time elements */
|
||||
.nowPlayingBarCenter {
|
||||
position: relative !important;
|
||||
left: 32px;
|
||||
top: var(--element-fixed-top);
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
/* Hold mute, volume slider container, repeat, favorite and remote control buttons */
|
||||
.nowPlayingBarRight {
|
||||
width: 402px !important;
|
||||
left: -60px;
|
||||
}
|
||||
|
||||
/* Mute button */
|
||||
.muteButton {
|
||||
position: relative;
|
||||
top: var(--element-fixed-top);
|
||||
}
|
||||
|
||||
/* Volume slider */
|
||||
.nowPlayingBarVolumeSliderContainer {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
top: var(--element-fixed-top);
|
||||
}
|
||||
|
||||
/* Toggle repeat */
|
||||
.toggleRepeatButton {
|
||||
position: relative !important;
|
||||
left: -20px;
|
||||
top: var(--element-fixed-top);
|
||||
}
|
||||
|
||||
/* Favorite */
|
||||
.nowPlayingBarUserDataButtons {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
top: var(--element-fixed-top);
|
||||
}
|
||||
|
||||
/* Remote control */
|
||||
.remoteControlButton {
|
||||
left: -110px;
|
||||
top: var(--element-fixed-top);
|
||||
}
|
||||
```
|
||||
|
||||
### Change Icon Pack
|
||||
|
||||
You can choose between Material Icons (Icon Pack used by Jellyfin) and Fontawesome icons.
|
||||
Material Icons:
|
||||
|
||||
- Outlined:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Outline.css');
|
||||
```
|
||||
|
||||
- Rounded:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css');
|
||||
```
|
||||
|
||||
- Sharp:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Sharp.css');
|
||||
```
|
||||
|
||||
Fontawesome Icons:
|
||||
|
||||
- Solid:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/solid.css');
|
||||
```
|
||||
|
||||
- Regular:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/regular.css');
|
||||
```
|
||||
|
||||
- Light:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/light.css');
|
||||
```
|
||||
|
||||
- duotone:
|
||||
|
||||
```css
|
||||
@import url('https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/duotone.css');
|
||||
```
|
||||
|
||||
## Community Links
|
||||
|
||||
Some links to places where custom CSS has been discussed and shared!
|
||||
|
||||
Reference in New Issue
Block a user