diff --git a/Jellyfin/README.md b/Jellyfin/README.md new file mode 100644 index 0000000..b690605 --- /dev/null +++ b/Jellyfin/README.md @@ -0,0 +1,51 @@ +# Jellyfin + +For a video tutorial on how to customise Jellyfin check out [this video](https://youtu.be/F85qMyBeiDI). + +## SSH into Jellyfin + +You can SSH into Jellyfin from your main device +``` +docker exec -it jellyfin bash +``` + +## Change the website title + +To change the interface from Jellyfin you'll need to edit `nano /usr/share/jellyfin/web/main.jellyfin.bundle.js` search for the following line `document.title` and change `Jellyfin` to whatever you want. There are 2 entries you will need to change in the file, you can use *Ctrl* + *W* to search for the lines you need to edit. + +## Change the website icons + +You can import images from a folder you have mapped to an external folder such as where your TV shows are saved, once you've saved the images and SSH's into Jellyfin you'll need to navidge to that folder: +``` +cd /data/tvshows +``` + +You'll need to move the images to the correct place by saving your files with the appropriate names below and moving them: +``` +cp -i favicon.ico /usr/share/jellyfin/web +``` +``` +cp -i favicon.png /usr/share/jellyfin/web +``` +``` +cp -i banner-light.png /usr/share/jellyfin/web/assets/img +``` +``` +cp -i banner-dark.png /usr/share/jellyfin/web/assets/img +``` +``` +cp -i icon-transparent.png /usr/share/jellyfin/web/assets/img +``` + +## Add custom links in Jellyfin + +If you would like to add custom links to your Jellyfin menu you'll need to edit `nano /usr/share/jellyfin/web/main.jellyfin.bundle.js` again and search for `+m.ZP.translate("Home")+"",`, after the comma add the below code with the custom information you would like to add: + +``` +n+=''+m.ZP.translate("BUTTON NAME")+"", +``` + +## Change the look of Jellyfin + +You can use custom CSS to change the look of Jellyfin, I've installed `Skin Manager` and used custom CSS which can be found [here](custom.css) to make my interface more appealing. + diff --git a/Jellyfin/custom.css b/Jellyfin/custom.css new file mode 100644 index 0000000..37564fd --- /dev/null +++ b/Jellyfin/custom.css @@ -0,0 +1,65 @@ +@import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css"); + +/* Login background */ +#loginPage { + background-image: url('/Branding/Splashscreen?format=jpg&foregroundLayer=0.15'); + background-position: center; + background-size: cover; +} + +/*Narrow the login form, size according to display size (bigger on mobile)*/ +#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} + +/* 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; +} + +/*Rounded corners and square hover buttons*/ +.cardContent-button, +.cardContent-shadow, +.itemDetailImage, +.cardOverlayButton-hover, +.cardOverlayContainer, +.listItemImage, +.listItemImageButton, +.listItemButton, +.headerButton, +.paper-icon-button-light +{border-radius: 6px;} + +/*Minimalistic play buttons*/ +.listItemImageButton-icon {padding: 0;} +.cardOverlayFab-primary {background-color: #00000000;} +.cardOverlayButtonIcon {background-color: #00000000 !important;} + +/*Theme some dialogues*/ +.dialog {border-radius: 6px !important; background-color: rgba(0, 0, 0, 0.9);} +.actionSheetMenuItem:hover {background-color: rgba(0, 164, 220, 0.2);} +.mainDrawer {background-color: rgba(0, 0, 0, 0.9);} +.navMenuOption:hover {background: rgba(0, 164, 220, 0.2);} + +/*Banner transparency and larger font, adjust both "size-adjust" and "size" to modify font size*/ +.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);} +.headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;} +.pageTitle {margin-top: auto; margin-bottom: auto;} +.emby-tab-button {padding: 1.75em 1.7em;} + +/*Make watched icon dark and transparent*/ +.playedIndicator {background: #00000058; } \ No newline at end of file