MediaEmby1968 71 Posted April 19 Posted April 19 I'm not saying you should create backgrounds, but it's curious that this only happened to me, or that it might happen to me; I'll keep checking. I mentioned it when I have your CSS. I looked at what you said, and although I'm not an expert in this, following your steps, I found something that could be the issue. There was a link to a background image that wasn't showing up. I checked it as you suggested and changed it just in case. I'll keep checking it as I said. Regards.
Aleas 81 Posted April 20 Author Posted April 20 (edited) Updates: New: Control how spotlight cards get cropped (4.10 Beta feature) Changed header padding default value to look more uniform with the side padding. Fix: admin pages were using the header padding. (It's only supposed to adjust on media detail pages) Section 1 Changes: If you customized your CSS, you could keep your section 1 and just update section 2 on down. but here are the important things that were added or changed so you can modify accordingly. Changed the default value of the header padding. --header-content-padding: 45px; /* Media details header padding, push the content down from the header */ New spotlight section. /* --- SPOTLIGHT BANNER ARTWORK --- */ --spotlight-fit: cover; /* Options: 'cover' (Fills box, crops edges), 'contain' (Shows full image, adds bars), '100%' (Stretches) */ --spotlight-position: center top; /* Options: 'right top' (Protects logos/faces), 'center top', 'center' (Emby default), 'left top' */ Emby Navy and Gold v5.5.css Edited April 20 by Aleas
ZanderKeen 75 Posted April 21 Posted April 21 On 4/18/2026 at 11:32 PM, Aleas said: Thanks, I've also added into my QA test notes to test all 3 sidebar phases in each area. You got a good eye. Thanks That update fixes it! 1
Aleas 81 Posted April 21 Author Posted April 21 (edited) Updates: Fix: The progress over media badges when scanning a library was not showing up in the admin library page Fix: Progress bad in the admin library page had a bad hover effect. More Spotlight controls added (Emby Beta 4.10 Feature, also requires Emby Premier) Section 1 Changes: If you customized your CSS, you could keep your section 1 and just update section 2 on down. but here are the important things that were added or changed so you can modify accordingly. New options for the Spotlight section, with a couple sample options you can try out. (Emby Beta 4.10 Feature, also requires Emby Premier) /* --- SPOTLIGHT BANNER ARTWORK --- */ --spotlight-fit: cover; /* Options: 'cover' (Fills box, crops edges), 'contain' (Shows full image, adds bars), '100%' (Stretches) */ --spotlight-position: center top; /* Options: 'right top' (Protects logos/faces), 'center top', 'center' (Emby default), 'left top' */ --spotlight-width: 100%; /* OVERALL WIDTH: 100% (Full screen), 95% (Small edge gap), 50% (2 Cards on the screen), 1200px (Max size lock) */ --spotlight-height: auto; /* OVERALL HEIGHT: auto (Uses Aspect Ratio), 50vh (Half screen), 400px (Fixed height) */ --spotlight-aspect-ratio: 16 / 9; /* SHAPE & SCALE: 16/9 (Default), 21/9 (Ultra-Wide), 24/9 (Cinematic Ultra-Wide), 3/1 (Extreme Banner), 4/1 (Extreme Ribbon), 4/3 (Boxy) */ --spotlight-overlay: linear-gradient(to top, rgba(var(--pure-black-rgb), 0.95) 0%, rgba(var(--pure-black-rgb), 0.6) 50%, transparent 100%); /* TEXT SCRIM: Change the dark fade behind text. (Use 'transparent' to remove it) */ /* Some sample options to try out: */ /*--spotlight-width: 100%; --spotlight-height: auto; --spotlight-aspect-ratio: 32 / 9; --spotlight-fit: cover; --spotlight-position: center 20%; --spotlight-overlay: linear-gradient(to top, rgba(var(--pure-black-rgb), 0.95) 0%, rgba(var(--pure-black-rgb), 0.4) 70%, transparent 100%); /* The Cinematic Ribbon */ /*--spotlight-width: 100%; --spotlight-height: auto; --spotlight-aspect-ratio: 4 / 1; --spotlight-fit: cover; --spotlight-position: center 25%; --spotlight-overlay: linear-gradient(to top, rgba(var(--pure-black-rgb), 0.95) 0%, transparent 90%); /* Extreme Letterbox */ /*--spotlight-width: 1400px; --spotlight-height: auto; --spotlight-aspect-ratio: 24 / 9; --spotlight-fit: cover; --spotlight-position: center 15%; --spotlight-overlay: linear-gradient(to top, rgba(var(--navy-base-rgb), 1) 0%, transparent 100%); /* Framed Billboard */ /*--spotlight-width: 98%; --spotlight-height: 40vh; --spotlight-aspect-ratio: none; --spotlight-fit: contain; --spotlight-position: center; --spotlight-overlay: linear-gradient(to top, rgba(var(--pure-black-rgb), 0.85) 0%, rgba(var(--pure-black-rgb), 0.4) 40%, transparent 100%); /* Uncut Showcase */ /*--spotlight-width: 100%; --spotlight-height: 30vh; --spotlight-aspect-ratio: none; --spotlight-fit: contain; --spotlight-position: center; --spotlight-overlay: linear-gradient(to top, rgba(var(--pure-black-rgb), 0.95) 0%, transparent 100%); /* Thin Letterbox Showcase */ /*--spotlight-width: 100%; --spotlight-height: auto; --spotlight-aspect-ratio: 5 / 1; --spotlight-fit: cover; --spotlight-position: center 20%; --spotlight-overlay: linear-gradient(to top, rgba(var(--pure-black-rgb), 0.9) 0%, transparent 100%); /* Extreme Slit */ Emby Navy and Gold v5.6.css Edited April 21 by Aleas 1
HUNCO 4 Posted April 22 Posted April 22 Could you please tell me if it's possible to make the episodes in the "Coming Soon" section appear in the same way as the actors' filmography: in three columns in the next update?
Aleas 81 Posted April 22 Author Posted April 22 29 minutes ago, HUNCO said: Could you please tell me if it's possible to make the episodes in the "Coming Soon" section appear in the same way as the actors' filmography: in three columns in the next update? Can you show me an image of "Coming Soon" I'm not sure where that is.
HUNCO 4 Posted April 22 Posted April 22 When we open any media library folder containing TV series, there's a "Coming Soon" tab (screenshot 1). Currently, upcoming episodes are displayed in a single column, which looks unsightly and takes up too much space. Is it possible to display them in 3 (or maybe even 4) columns, like you did with the filmography? (screenshot 2)
Aleas 81 Posted April 22 Author Posted April 22 (edited) 1 hour ago, HUNCO said: When we open any media library folder containing TV series, there's a "Coming Soon" tab (screenshot 1). Currently, upcoming episodes are displayed in a single column, which looks unsightly and takes up too much space. Is it possible to display them in 3 (or maybe even 4) columns, like you did with the filmography? (screenshot 2) You can have this; I will not be adding it into the main base as I'm not really trying to transform the look of Emby too much and i don't really like it. But you can add this to the bottom of section 12 (Hotfix Zone). Also, there's the arrow to scroll on a line, I was unable to shift those cells to a newline, it was a fight with the backend JavaScript and I lost. But this should do what you want. or close enough. HOTFIX - Cells for Upcomming.css Edited April 22 by Aleas 1
MediaEmby1968 71 Posted April 22 Posted April 22 In this menu, the background image or color changes when you select an option. Could you tell me how to change the color?
Aleas 81 Posted April 22 Author Posted April 22 (edited) 5 hours ago, MediaEmby1968 said: In this menu, the background image or color changes when you select an option. Could you tell me how to change the color? It's using --white-alpha-10, you can change it, but I don't remember what all else uses it. You can use the developer tools to look around at the variables and see what changes what. Edited April 22 by Aleas
Aleas 81 Posted April 22 Author Posted April 22 (edited) Just a small quality of life update. Updates: Feature: Implemented center-snapping for the primary spotlight card. Fix: Resolved miscellaneous minor issues. Section 1 Changes: If you customized your CSS, you could keep your section 1 and just update section 2 on down. but here are the important things that were added or changed so you can modify accordingly. New variable under the spotlight section --spotlight-center-snap: enabled; /* Set to 'enabled' to center the primary card, or 'disabled' to turn it off */ /* NOTE: FIREFOX COMPATABILITY ISSUE WITH THIS - Bugzilla Bug #1795622 - actively being worked on */ TIP: Scaling the spotlight down to show two or more cards? You’ll likely want to turn this off to ensure the cards align correctly across the container. This option also does not currently work in Firefox, but their developers are working hard to implement the feature needed to make it work. Emby Navy and Gold v5.7.css And for fun here's a JavaScript file to auto scroll the spotlight images. I offer NO support OR installation help with this. But if you search around you should find the answers. spotlight.js Edited April 23 by Aleas
Aleas 81 Posted April 23 Author Posted April 23 (edited) Just some small updates to that JavaScript file I posted above. It will now detect when the cards are not on-screen or if you are in another browser tab and pause the scrolling, then resume when it's back in the view. For the most part I'm feeling good and think I can finally take a break, at least until the Devs break something or add/change features. Now onto other projects that have felt neglected. spotlight.js Edited April 23 by Aleas
MediaEmby1968 71 Posted April 24 Posted April 24 And that break is well-deserved. Rest and dedicate time to those projects. Just one question. Does this theme, as it is, work for both 4.9.3 servers and the next version, 4.10? Thanks for the theme and best regards.
Aleas 81 Posted April 24 Author Posted April 24 (edited) 5 hours ago, MediaEmby1968 said: And that break is well-deserved. Rest and dedicate time to those projects. Just one question. Does this theme, as it is, work for both 4.9.3 servers and the next version, 4.10? Thanks for the theme and best regards. Yes, all my testing has been extensively on 4.10-beta, but since it's beta the developers can change things at any moment between releases. I do have something I'm toying around with. But I'm not really set on the style, very undecided on this. But the primary headers and media footers need something. I just can't decide on what I like yet. Maybe @visproductionhas some ideas, he's pretty good at design. Edited April 24 by Aleas
MediaEmby1968 71 Posted April 24 Posted April 24 I have to say that as it is, I don't dislike it at all. If the "Continue Watching" section could be displayed across two rows, it would look better, so you wouldn't have to scroll to the right. Another question: I've run into this small problem. Where do I change the text color when hovering over the buttons? I've attached a screenshot so you can see what I mean.
Aleas 81 Posted April 24 Author Posted April 24 (edited) 2 hours ago, MediaEmby1968 said: Another question: I've run into this small problem. Where do I change the text color when hovering over the buttons? I've attached a screenshot so you can see what I mean. There's a whole section on it. /* --- NAVIGATION PILL BARS --- */ Quote I have to say that as it is, I don't dislike it at all. If the "Continue Watching" section could be displayed across two rows, it would look better, so you wouldn't have to scroll to the right. 4.10 Beta already has this feature. And I think I have my test code looking nice now. It just needs some tweaks here and there. Edited April 24 by Aleas
Aleas 81 Posted April 25 Author Posted April 25 (edited) Here we go, if you don't like the new stuff, it can be disabled, just read the comments. Updates: Moved a bunch of variable sections around. New Section title options New Media footer options Fixed some text muted color issues. Section 1 Changes: If you customized your CSS, you could keep your section 1 and just update section 2 on down. but here are the important things that were added or changed so you can modify accordingly. Lots of re-ordering. Changed this variable default. --text-muted: var(--white-alpha-70); /* Soft white used globally for primary paragraph/body text */ More blur options added in (Extra light, and Medium) /* --- EFFECTS & ANIMATIONS --- */ --transition-speed: 0.3s; /* Global speed for all UI transitions */ --blur-extra-light: blur(5px); /* Extra light background blur */ --blur-light: blur(10px); /* Soft background blur */ --blur-medium: blur(15px); /* Medium background blur */ --blur-heavy: blur(20px); /* Strong background blur */ --blur-extreme: blur(30px); /* Maximum depth blur */ New section "Section Title Options" /* --- SECTION TITLE OPTIONS --- */ --header-line-display: block; /* Set to 'block' to show the glowing line under primary headers, or 'none' to hide it */ --header-line-color: var(--theme-primary-color); /* Color of the glowing line under primary headers */ --header-line-background: linear-gradient(90deg, var(--header-line-color) 0%, color-mix(in srgb, var(--header-line-color) 25%, transparent) 40%, transparent 100%); /* The actual line fill. Can be changed to a solid color or custom gradient */ --header-accent-display: none; /* Set to none to hide or inline-block to display an accent. Usable paramaters: [--header-accent-display], [--header-accent-width], [--header-accent-height], [--header-accent-radius], [--header-accent-transform] */ /*--header-accent-display: inline-block; --header-accent-width: 6px; --header-accent-height: 1em; --header-accent-radius: 1px; --header-accent-transform: skewX(-20deg) translateY(-2px); /* The Cinematic Slash (Aggressive, forward-leaning cut) */ /*--header-accent-display: inline-block; --header-accent-width: 9px; --header-accent-height: 9px; --header-accent-radius: 1px; --header-accent-transform: rotate(45deg) translateY(-2px); /* The Neon Diamond (Minimalist, sci-fi bullet point) */ /*--header-accent-display: inline-block; --header-accent-width: 5px; --header-accent-height: 1.1em; --header-accent-radius: 4px; --header-accent-transform: translateY(-2px); /* The Classic Pill (Soft, rounded, traditional) */ /*--header-accent-display: inline-block; --header-accent-width: 2px; --header-accent-height: 1.2em; --header-accent-radius: 0px; --header-accent-transform: translateY(-2px); /* The Razor Blade (Ultra-thin, tall, sharp line) */ New section "Media footer options" /* --- MEDIA FOOTER OPTIONS --- */ --media-footer-bg: var(--navy-light-alpha-60); /* Frost transparency intensity: var(--navy-base-alpha-75), var(--black-alpha-80), var(--black-alpha-95), etc, or var(--retro-navy-light) or transparent to disable */ --media-footer-blur: var(--blur-medium); /* Frost blur intensity:var(--blur-extra-light), var(--blur-light), var(--blur-medium), var(--blur-heavy), var(--blur-extreme), or none */ --media-footer-border: 1px solid var(--pure-black); /* Border of thickness of media card footers (Good options are --gold-alpha-15 or --pure-black) */ --media-footer-shadow: 0 10px 25px -5px var(--black-alpha-70); /* Shadow used for media card footers, none to disable */ Enjoy! Emby Navy and Gold v5.8.css Edited April 25 by Aleas
MediaEmby1968 71 Posted April 25 Posted April 25 Thanks, it's working. I don't have the 4.10 beta version, and even when the official version is released, I won't have it immediately, since I use Manjaro Linux, and updates arrive a month or two after release. Testing the new version
MediaEmby1968 71 Posted April 25 Posted April 25 The new version is simply --- FANTASTIC --- Now I just need to adjust the colors to my liking. 1
Aleas 81 Posted April 25 Author Posted April 25 (edited) 47 minutes ago, Eigeplackter said: <deleted> Try this. I did make a couple adjustments that should also help w/ tearing when switching between those 2 states. Emby Navy and Gold v5.8.1.css Edited April 25 by Aleas 1
Eigeplackter 102 Posted April 25 Posted April 25 Awww sorry, thought noone had read it before. After clearing the cache the behaviour was back to normal. 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now