[Help needed] Jellyfin Background CSS and Show Header Images - Pyroptical - 2024-08-25
Hihi,
So just really got into this today and really happy with the look ive managed to achieve, bar one thing. Basically i've applied a nice background image via CSS, and it looks great on all the main menu pages, but as soon as i go into a show or an episode it covers up the header image, instead of the bottom of the page. would love some input.
Code: @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');
/*Accent and rounding*/
:root {--accent: 200, 90, 255;}
:root {--rounding: 12px;}
.backgroundContainer {
background-color: rgba(0, 0, 0, 0);
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
filter: blur(0px);
background-size: cover;
}
this is my code as of right now, most of it is from ultrachromic, but with a bunch of testing I've found that those are working as intended, its just the code snippet i got from the official Jellyfin css page that giving me greif.
Main menu looks great, but this is how my show page looks
And this is the header image i want it to show with the css disabled, and a quick photoshop job of roughly what im aiming for
Thanks so much for taking the time to read, and thanks in advance for any help 💜
So quick edit:
i've managed to figure out how to apply the background to the bottom of the page, just need to rid the top half
RE: [Help needed] Jellyfin Background CSS and Show Header Images - Ted Hinklater - 2024-08-25
Quote: quick edit:
i've managed to figure out how to apply the background to the bottom of the page, just need to rid the top half
Code: @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');
/*Accent and rounding*/
:root {--accent: 200, 90, 255;}
:root {--rounding: 12px;}
.itemsContainer.padded-left {
position: top;
z-index: 1;
}
.itemsContainer.padded-left::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
background-attachment: fixed;
}
.sectionTitleContainer.sectionTitleContainer-cards.padded-left::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
background-attachment: fixed;
}
/*Apply bg to detail Ribbon */
.detailPagePrimaryContainer {
position: relative;
z-index: 2;
}
.detailPagePrimaryContainer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
}
/* Apply bg to detailPage content */
.detailPageSecondaryContainer {
position: relative;
z-index: 1;
}
.detailPageSecondaryContainer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
}
It's looking great by the way! Slick job
RE: [Help needed] Jellyfin Background CSS and Show Header Images - Pyroptical - 2024-08-25
Quote:Code: @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');
/*Accent and rounding*/
:root {--accent: 200, 90, 255;}
:root {--rounding: 12px;}
.itemsContainer.padded-left {
position: top;
z-index: 1;
}
.itemsContainer.padded-left::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
background-attachment: fixed;
}
.sectionTitleContainer.sectionTitleContainer-cards.padded-left::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
background-attachment: fixed;
}
/*Apply bg to detail Ribbon */
.detailPagePrimaryContainer {
position: relative;
z-index: 2;
}
.detailPagePrimaryContainer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
}
/* Apply bg to detailPage content */
.detailPageSecondaryContainer {
position: relative;
z-index: 1;
}
.detailPageSecondaryContainer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
opacity: 1;
z-index: -1;
}
It's looking great by the way! Slick job
Thanks im pretty pleased with the look too. Amazing on the css, but not quite hit the mark though, got the detail page looking pretty much spot on but now the rest of jellyfin has no background, back to boring black
RE: [Help needed] Jellyfin Background CSS and Show Header Images - Pyroptical - 2024-08-25
ohhh figured it out just needed to add z-index: -2; to my original code, thanks for all the help 💜💜💜💜
RE: [Help needed] Jellyfin Background CSS and Show Header Images - Pyroptical - 2024-08-25
I am however wondering if its possible to darken those header images, they seem a tad bright compared to normal,
edit:
Nvm got it, full code in case anyone wants 💜
Code: @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');
/*Accent and rounding*/
:root {--accent: 200, 90, 255;}
:root {--rounding: 12px;}
.backgroundContainer {
background-color: rgba(0, 0, 0, 0);
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
background-size: cover;
z-index: -3;
}
.noBackdropTransparency .detailPageSecondaryContainer {
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
filter: blur(0px);
background-size: cover;
}
.backdropContainer {
opacity: 0.5;
}
RE: [Help needed] Jellyfin Background CSS and Show Header Images - Ted Hinklater - 2024-08-25
Quote: but now the rest of jellyfin has no background, back to boring black
Oh I know what that was, if you click your User pic in Jellyfin, go to Display, scroll down to Backdrops, I have it enabled.
|