+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: adding poster. logo, background to title page (/t-adding-poster-logo-background-to-title-page)
adding poster. logo, background to title page - 2020 - 2025-12-06
I've been trying add adding poster. logo, background to title page this is the main thing I want from my a theme or a custom css change, finimalism7 did this but its no longer supported.
I tried customising finimalism but everything's a little smaller making it hard to see.
I tried taking Elegantfin theme as the base and adding a custom code, but I end up breaking things like mobile view and actor profile. code I tried to use.
Code:
GLOBAL TWEAKS (Applied to ALL devices) */
/* Essential card display rule (your original rule, kept global) */
.card {
display: block !important;
}
/* Ensure the poster stacks ON TOP of the logo/header on overlap */
/* This is necessary because the logo often has a high default Z-index */
.detailImageContainer .card {
z-index: 100 !important;
}
/* 3. MOBILE-ONLY FLOW OVERRIDE (For screens < 900px) */
/* This block forces the poster/image area to appear first, and the logo second. */
@media (max-width: 899px) {
/* Force the logo to appear below the image/ribbon section */
.detailLogo {
top: auto !important; /* Remove fixed position */
position: relative !important;
margin-top: 1em !important; /* Add spacing below the image */
}
/* Ensure the main image area is displayed in the flow */
.detailImageContainer.hide-mobile {
height: auto !important;
display: block !important;
}
/* Pull the logo out of the main ribbon area's influence */
.detailRibbon {
flex-direction: column !important;
}
}
/* 4. DESKTOP-ONLY STYLES (Your Original Layout, isolated to screen width >= 900px) */
@media (min-width: 900px) {
/*=====Arura Grid Layout (Desktop)===*/
.detailGridContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.detailRibbon {
grid-column: 1;
grid-row: 1;
}
.detailSectionContent {
grid-column: 2;
grid-row: 1;
}
.itemDetailsGroup {
grid-column: 1;
grid-row: 2;
}
.trackSelections {
grid-column: 2;
grid-row: 2;
}
/* === Your Original Positioning and Spacing Overrides (Desktop) === */
[dir=ltr] .detailPagePrimaryContent {
padding-left: 3em !important;
}
.layout-desktop [dir="ltr"] .detailRibbon, .layout-tv [dir="ltr"] .detailRibbon {
flex-direction: column;
width: 30% !important;
}
.detailSection {
margin-top: -9em;
}
.layout-desktop .detailRibbon {
height: 10% !important;
min-height: 0 !important;
}
/* CRITICAL POSTER & WRAPPER POSITIONING BLOCK - DESKTOP ONLY */
.layout-desktop .detailImageContainer .card {
position: relative !important;
width: 35vh !important;
float: none;
left: 0 !important;
top: 0;
right: 0;
margin: unset;
margin-bottom: 0;
place-self: start;
top: -25vh !important;
margin-left: 12em !important;
}
/* LOGO POSITIONING - DESKTOP ONLY */
.detailLogo {
top: calc(80vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace)) !important;
}
/* PULLING UP THE WRAPPER - DESKTOP ONLY */
.layout-desktop .detailPageWrapperContainer {
margin-top: -13em !important;
}
.detailImageContainer.hide-mobile {
height: 19em;
}
}Could anyone help with this ?
I could switch the base theme if need.