Emby Theme: Retro Navy & Gold (W/ Seasonal Themes)

Thursday at 09:28 PM

The text headings h1 to h6 are not working now; they all appear blank. The background image is working perfectly now.

Thursday at 09:36 PM

And s orry, fix to the blue on the backdrop. Sometimes I rush things.

Edited Thursday at 09:58 PM by Aleas

Thursday at 09:46 PM

Don't worry, I'm just mentioning it to help, don't rush things. Haste makes waste. The theme you created is very nice, and regardless of personal taste, I have to say I prefer blue to gold, as it gives it a different touch. Besides, the other theme I was using, from here, also has gold tones.

Thanks for your help.

I installed this latest version 96 and it looks the same; everything is still white in the settings options. I've attached a screenshot.

Thursday at 10:01 PM

23 minutes ago, MediaEmby1968 said:

Don't worry, I'm just mentioning it to help, don't rush things. Haste makes waste. The theme you created is very nice, and regardless of personal taste, I have to say I prefer blue to gold, as it gives it a different touch. Besides, the other theme I was using, from here, also has gold tones.

Thanks for your help.

I installed this latest version 96 and it looks the same; everything is still white in the settings options. I've attached a screenshot.

Update the H5 variable to this:

I kinda prefer the white, so right now that's the default

  --h5-color: var(--my-gold);                                   /* Setting Titles, Deep Metadata & Plugins */

Also just to be sure you are on the latest version here it is again. And I have not really found everything that's using H5, so you might find gold text where it should not be modifying that. If you find something let me know, I might need to remap additional stuff.

Emby Navy and Gold v4.97.css

Edited Thursday at 10:12 PM by Aleas

Friday at 01:24 AM

Updates:

Remapped some heading colors to fix some text issues

Pillbar text will be uppercase by default, added in new variables to control that.

  /* --- TYPOGRAPHY BUTTON TOGGLES (PILLBARS, SUBMIT) --- */
  --button-text-transform: uppercase;                              /* Set to 'uppercase' for all-caps, or 'none' for title-case */
  --button-text-weight: 700;                                       /* Set to 700 for uppercase, or 600 for title-case */
  --button-letter-spacing: 1px;                                  /* Set to 1px for uppercase, or 0.5px for title-case */

Removed the variable backdrop-opacity. since we moved to rgba with --backdrop-bg-color it was pulling double duty.
Removed that backdrop blur option. (it was a misunderstanding, it was ugly, and I don't ever see anybody doing that)

Emby Navy and Gold v4.100.css

Edited Friday at 01:38 AM by Aleas

Friday at 06:31 AM

Thank you. Everything is fine.

Friday at 10:20 AM

Thank you very much for your work. The theme looks absolutely wonderful, although the CSS code seems overloaded due to the large number of seasonal features. However, it's great that you bring something new to the theme with each update. In this regard, I have a few questions and suggestions that you could perhaps implement in future revisions.

1. Is it possible to restore the background animation as it was in the first revisions? This animation gave the theme more life and looked very stylish.
2. Is there a way to change the opacity of the header? In the default theme, the header background was gray. Now, when you scroll the page, the buttons and logos overlap other elements.
3. Is there a way to change the display of the seasons? So that they are displayed in a single line instead of a drop-down list?

Otherwise, I rely on your ideas and solutions. Thank you very much again.

Friday at 12:34 PM

4 hours ago, HUNCO said:

Thank you very much for your work. The theme looks absolutely wonderful, although the CSS code seems overloaded due to the large number of seasonal features. However, it's great that you bring something new to the theme with each update.

Yeah, with seasons it's sort of many themes in 1, so bloat is unavoidable. I do have an idea in mind that I might try out later, where we just activate the seasons by doing an import off my GitHub to an active theme. But I'm still undecided on that approach.

4 hours ago, HUNCO said:

1. Is it possible to restore the background animation as it was in the first revisions? This animation gave the theme more life and looked very stylish.

You got it! I think you are referring to the backdrop posters?

4 hours ago, HUNCO said:

2. Is there a way to change the opacity of the header? In the default theme, the header background was gray. Now, when you scroll the page, the buttons and logos overlap other elements.

I will add that option in, no problem.

4 hours ago, HUNCO said:

3. Is there a way to change the display of the seasons? So that they are displayed in a single line instead of a drop-down list?

I'll see what I can do there to clean it up some, recently I did reduce the number of variables in those.

Edited Friday at 02:50 PM by Aleas

Friday at 10:44 PM

Updates:

Return of the header, you can change the frost, disable it, etc. from this area in the variables, I also added in a variable for padding in the media details areas, so it does not sit right up against it.

  /* EFFECTS (SIDEBAR, HEADER, AND DIALOG POPUPS*/
  --sidebar-blur: var(--blur-heavy);                               /* Frost blur intensity: var(--blur-heavy), var(--blur-light), or none */
  --sidebar-bg: var(--navy-base-alpha-75);                         /* Frost transparency intensity: var(--navy-base-alpha-75), var(--black-alpha-80), var(--black-alpha-95), etc, or var(--retro-navy) to disable */
  --header-blur: var(--blur-heavy);                                /* Set to 'none' for a completely clear header, or var(--blur-heavy) / var(--blur-light) to enable frost */
  --header-bg: var(--navy-base-alpha-75);                          /* Set to 'transparent' for a completely clear header, or use a translucent color to enable frost */
  --header-border: var(--standard-border-thickness) solid var(--gold-alpha-15);  /* Set to 'none' to disable, or var(--standard-border-thickness) solid var(--gold-alpha-15) to enable */
  --header-content-padding: 20px;                                  /* Media details header padding, push the content down from the header */

Fixed more random icons that did not receive the gold color
If a filter is applied the filter icon will now have the gold color around it indicating a filter is in use.

Backdrop poster animations, and new variables added for that

  --backdrop-anim-toggle: imgZoomFadeIn;                           /* Set to 'imgZoomFadeIn' to ENABLE the backdrop animation, or 'none' to DISABLE it */
  --anim-backdrop-mask: linear-gradient(to right, transparent 0%, var(--pure-black) 40%), linear-gradient(to top, transparent 0%, var(--pure-black) 40%);
  --backdrop-image-scale: 80%;                                     /* Percentage of screen to use for backdrop posters (It will always pin to the top right of the screen) */

Bugfix for the list view star hover
Media card hover shadow fix
Reduced seasonal variable lines to easily enable/disable.
Some Live TV fixes
And many more bug fixes.

I know the variables have been changing a lot lately, I'll try to be better on showing section 1 changes going forward, so you can just update section 2 downwards.

Got an idea or found an issue? I'm always listening. Feedback is always welcome.

Emby Navy and Gold v4.108.css

Edited Friday at 11:30 PM by Aleas

2026-04-11T18:23:14Z

I've downloaded the latest version and I'll try it out.

But I wanted to ask you a question.

At the end of a movie's information page, for example, in the multimedia section.

How can I change the font size in that specific area?

I've attached a screenshot with the text circled, and I'm referring to the part that's in blue.

Thanks

2026-04-11T21:22:46Z

2 hours ago, MediaEmby1968 said:

How can I change the font size in that specific area?

I Agree, the font size is too small,

I'll push out an update hopefully tomorrow (If I don't find anything else), the update addresses a bunch of things, typical bug fixes, some enhancements, return of disabled features that needed refinements, etc.

I've pretty much completed it, but need to QA check it, then I want to do another round of QA checks tomorrow when I haven't been drinking

2026-04-12T12:54:07Z

Updates:

Re-enabled media card popouts, this needed a lot of refinements, it was overkill before. so now certain items/areas will no longer receive this effect. (@HUNCO I think this another animation you were missing) This is enabled by default now, see section 1 updates on how to disable it if you prefer it that way.
Fixed a hover issue with the ratings star in the table view
Cleaned up seasonal variable lines just a little bit.
Changed the opacity of the LiveTV guide timeline indicator
Removed hover effect on media descriptions, in the media details page and the OSD
Added note on top of section 1 about enabling/disabling variables.
Music mini-OSD gets the frost/transparency effect (new variables for that)
Fix for popout effect borders on cast & crew picture shapes not respecting the shape of the picture
Softened up shadows, removed shadows in a hover state (variable updated)
Shadows should be better at respecting the media-card-radius variable
Fix for Cast & crew and music artists "More" button being hidden in a non-rectangular state. (It's now centered on the bottom)
Unknown actor images have a better look now.
Fixed the play button in the OSD
Increased the media stream information font size @MediaEmby1968
Fixed the triangle color of "Play from Beginning" in the OSD on a hovered state
Fixed the "Played" indicator in a list view in a hover state
Make the "More" and Directors links in the media details page gold.
Added the ability to hide the Emby logo on the sidebar in a docked state (new variable for that)
Fixed the Emby logo when the user theme is set to a Light theme.
When a filter is applied, that filter button will now be gold to reflect it's in an active state.

Section 1 Updates:

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.

The Note at the top about enabling/disabling variables
Trimmed the seasonal variables to use the logic the note says.

Popout variables changes to enable by default

  /* MEDIA CARD POPOUT EFFECTS --- */
  --popout-perspective: 1000px;                                      /* Effects can be made when hovering over media cards to disable use "none" or to enable use "1000px" */
  --popout-transform: scale(1.05) rotateX(4deg) translateY(-5px);   /* Effects can be made when hovering over media cards to disable use "none" or to enable use "scale(1.05) rotateX(4deg) translateY(-5px)" */
  --popout-shadow: 0px 20px 30px var(--black-alpha-90), var(--shadow-glow-standard);  /* Effects can be made when hovering over media cards to disable use "none" or to enable use "0px 20px 30px var(--black-alpha-90), var(--shadow-glow-standard)" */

Effects area changed for showing/hiding the Emby logo and mini-OSD for music frost treatments.

  /* EFFECTS (SIDEBAR, HEADER, DIALOG POPUPS, MINI-OSD */
  --sidebar-blur: var(--blur-heavy);                               /* Frost blur intensity: var(--blur-heavy), var(--blur-light), or none */
  --sidebar-bg: var(--navy-base-alpha-75);                         /* Frost transparency intensity: var(--navy-base-alpha-75), var(--black-alpha-80), var(--black-alpha-95), etc, or var(--retro-navy) to disable */
  --header-blur: var(--blur-heavy);                                /* Set to 'none' for a completely clear header, or var(--blur-heavy) / var(--blur-light) to enable frost */
  --header-bg: var(--navy-base-alpha-75);                          /* Set to 'transparent' for a completely clear header, or use a translucent color to enable frost */
  --header-border: var(--standard-border-thickness) solid var(--gold-alpha-15);  /* Set to 'none' to disable, or var(--standard-border-thickness) solid var(--gold-alpha-15) to enable */
  --header-content-padding: 20px;                                  /* Media details header padding, push the content down from the header */
  --header-logo-display: block;                                     /* Set to 'block' to show the top left Emby logo, or 'none' to hide it */
  --osd-mini-blur: var(--blur-heavy);                              /* Frost blur intensity for the bottom mini music player */
  --osd-mini-bg: var(--navy-base-alpha-75);                        /* Background transparency for the bottom mini music player */

Shadow hover state disabled via this variable

--shadow-glow-standard: transparent;                             /* The primary gold glow seen on hovered media cards */

Enjoy!

Emby Navy and Gold v4.112.css

EDIT: Just snuck in a quick fix for the double logo.

EDIT2: Snuck in another fix for S00:E00 text in the media details page.

Edited 9 hours ago by Aleas

2026-04-12T16:19:12Z

I have tried this new version with its changes and it does not particularly appeal to me, I have gone back to the 100th version that I had, which I liked how it turned out.

Just one question.

Could you tell me what to edit so that the multimedia information appears in larger text?

Thank you

2026-04-12T16:35:07Z

28 minutes ago, MediaEmby1968 said:

I have tried this new version with its changes and it does not particularly appeal to me, I have gone back to the 100th version that I had, which I liked how it turned out.

If you are talking about the popout effects, as the comments and update notes say you can totally disable that effect. Just change these variables to this:

 /* MEDIA CARD POPOUT EFFECTS --- */
  --popout-perspective: none;                                      /* Effects can be made when hovering over media cards to disable use "none" or to enable use "1000px" */
  --popout-transform: none;   /* Effects can be made when hovering over media cards to disable use "none" or to enable use "scale(1.05) rotateX(4deg) translateY(-5px)" */
  --popout-shadow: none;  /* Effects can be made when hovering over media cards to disable use "none" or to enable use "0px 20px 30px var(--black-alpha-90), var(--shadow-glow-standard)" */

If it's something else, please let me know what the issue is so I can address it. But just about every change that happened you have the ability to control.

For the font size you can drop this at the end of section 12.

/* ============================================================
   HOTFIX: MEDIA STREAM INFO FONT RESIZING
   ============================================================ */
html[class*="theme-"] body .mediaInfoAttributeLabel,
html[class*="theme-"] body .mediaInfoAttributeValue {
    font-size: 1.15em !important;
    line-height: 1.5 !important;
}

html[class*="theme-"] body .mediaStreamInnerCardFooter h3 {
    font-size: 1.45em !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
}

html[class*="theme-"] body .mediaStreamInnerCardFooter {
    padding: 1.2em !important;
}

html[class*="theme-"] body .mediaInfoAttributeValue {
    white-space: normal !important;
    word-break: break-all !important;
}

Edited 6 hours ago by Aleas

2026-04-12T18:07:03Z

Hi, it's not just the animations, which I personally don't like very much. There are several changes I've noticed that led me to revert to version 100, which is the one I used and still use.

In this latest version, the background is animated. On the home screen, when scrolling down, a window appears at the top, in the Home and Favorites section, which didn't appear before. When I changed the main color, the icons also changed, but not here (I don't know if it's because I partially removed that image when scrolling, but it wasn't appearing). And some colors in general haven't changed either...

I haven't been able to set a background image in settings; I used to be able to. And the background images appear darker underneath.

Because of these things, I decided to stay on version 100, but please don't take it the wrong way; the theme is very well done. We all have our own tastes, and that's why changes are better on a personal level. It's better to ask how to change something and set it up to my liking.

Thanks for all your hard work.

I use it as a theme for working on the server; I don't watch movies or series on the PC, which is where I have it.

2026-04-12T18:27:05Z

26 minutes ago, MediaEmby1968 said:

In this latest version, the background is animated.

Update this variable to none

--backdrop-anim-toggle: none;                           /* Set to 'imgZoomFadeIn' to ENABLE the backdrop animation, or 'none' to DISABLE it */

26 minutes ago, MediaEmby1968 said:

a window appears at the top, in the Home and Favorites section, which didn't appear before.

That was the header changes set these variables:

  --header-blur: var(--retro-navy);                                /* Set to 'none' for a completely clear header, or var(--blur-heavy) / var(--blur-light) to enable frost */
  --header-bg: transparent;                          /* Set to 'transparent' for a completely clear header, or use a translucent color to enable frost */
  --header-border: none;  /* Set to 'none' to disable, or var(--standard-border-thickness) solid var(--gold-alpha-15) to enable */
  --header-content-padding: 0px;                                  /* Media details header padding, push the content down from the header */

26 minutes ago, MediaEmby1968 said:

When I changed the main color, the icons also changed, but not here

Can you show me a screenshot where the icons are not changing colors?

26 minutes ago, MediaEmby1968 said:

I haven't been able to set a background image in settings; I used to be able to. And the background images appear darker underneath.

How are you setting the background image?

If there are opacity issues with backdrops (being too dark or too light) you can adjust this, comments explain, just change the 0.5 to a lower value to brighten it up.

--backdrop-bg-color: rgba(var(--pure-black-rgb), 0.5);           /* DIMMING - COLOR / OPACITY (Increase to 0.8 for darker, decrease to 0.4 for lighter) */

So, these are a lot of changes you are doing to your variables, which is exactly why moving forward on any updates I'm highlighting what has changed in section 1, so you only need to update section 2 on down. but you do need to pay close attention to the new section 1 update notes to make changes

Edited 4 hours ago by Aleas

2026-04-12T18:33:26Z

I'll run those tests you mentioned, but tomorrow.

This is the code I use for the background image in settings.

/* ------------------------- Añadir imagen de fondo en - Inicio y Configuracion -------------------- */
div.homeSectionsContainer, div.view-settings-settings, div.settingsContainer
{background-image: url("/web/modules/themes/ballerina-1080.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

2026-04-12T18:37:59Z

Updates:

Fixed an issue with the watched / favorites having an odd halo effect on the media details page (Hover State)
Fixed table view watched / unwatched / favorites indicator. (Hover State)
Fixed watched background when hovering over media cards.

Section 1 Updates:

None

Emby Navy and Gold v4.114.css

Edited 4 hours ago by Aleas

2026-04-12T18:46:33Z

1 hour ago, MediaEmby1968 said:

I'll run those tests you mentioned, but tomorrow.

This is the code I use for the background image in settings.

/* ------------------------- Añadir imagen de fondo en - Inicio y Configuracion -------------------- */
div.homeSectionsContainer, div.view-settings-settings, div.settingsContainer
{background-image: url("/web/modules/themes/ballerina-1080.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

Drop this hotfix at the bottom of section 12 and adjust to the image you want. Anything custom should be in section 12, or the very bottom of the CSS. I'll look into making background images a variable.

** Removed Hotfix It's in the Update Below, plus it didn't take into account when a backdrop was being shown so the 2 images bled into each other. **

If you have other issues, please let me know, and also if all this resolves the features you did not like.

Edited 3 hours ago by Aleas

2026-04-12T18:50:28Z

Ok. I'll try it tomorrow. I'll let you know.

2026-04-12T19:23:49Z

Updates:

Ability to set a custom background image.

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 variables added

  /* --- GLOBAL BACKGROUND IMAGE --- */
  /* OPTION 1  Use Theme Defaults */
  --global-bg-image: radial-gradient(circle, var(--navy-mid-solid) 25%, var(--navy-base-solid) 85%);  /* Default Theme Colors */

  /* OPTION 2: Use a background image at full brightness (Set to your prefered image)*/
  /* --global-bg-image: url("https://static.vecteezy.com/system/resources/previews/024/396/102/large_2x/a-view-from-space-to-a-galaxy-and-stars-universe-filled-with-stars-nebula-and-galaxy-panoramic-shot-wide-format-elements-of-this-image-furnished-by-nasa-free-photo.jpg");  /* Full brightness image */

  /* OPTION 3: Use a background image but dimmed down (Set to your prefered image) */
  /* --global-bg-image: linear-gradient(rgba(0,8,20,0.7), rgba(0,8,20,0.7)), url("https://static.vecteezy.com/system/resources/previews/024/396/102/large_2x/a-view-from-space-to-a-galaxy-and-stars-universe-filled-with-stars-nebula-and-galaxy-panoramic-shot-wide-format-elements-of-this-image-furnished-by-nasa-free-photo.jpg");  /* Image with 70% Navy dimming */

Emby Navy and Gold v4.115.css

Edited 3 hours ago by Aleas

2026-04-12T20:41:50Z

As was rightly said: everyone has their own tastes. For example, I don't like the overabundance of yellow. Personally, I'd prefer to keep the icons and movie titles white. I'd also like to see TV series seasons displayed as a solid line rather than a drop-down list. That said, I offer my deepest gratitude and respect to the theme's author, as after my own tweaks, it looks a hundred times better to me than Emby's default settings. Thanks again for all your hard work!

2026-04-12T21:00:35Z

1 hour ago, HUNCO said:

As was rightly said: everyone has their own tastes. For example, I don't like the overabundance of yellow. Personally, I'd prefer to keep the icons and movie titles white. I'd also like to see TV series seasons displayed as a solid line rather than a drop-down list. That said, I offer my deepest gratitude and respect to the theme's author, as after my own tweaks, it looks a hundred times better to me than Emby's default settings. Thanks again for all your hard work!

I can work on text/icon color mappings through the H variables, tell me more about what you prefer white (screenshots would be nice). The more detail I know the better it can be. but can you show me by what you mean by the TV seasons as a solid line vs drop down list?

And no rush, I need a break from this right now, but will look into this later in the week.

And yes I'm getting a little gold fatigue myself. I mapped out the admin areas pretty good I think, but have not done much mapping in the main areas yet.

Edited 1 hour ago by Aleas

Sign In

Emby Theme: Retro Navy & Gold (W/ Seasonal Themes)

Recommended Posts

MediaEmby1968 60

Aleas 57

MediaEmby1968 60

Aleas 57

Aleas 57

MediaEmby1968 60

HUNCO 0

Aleas 57

Aleas 57

MediaEmby1968 60

Aleas 57

Aleas 57

MediaEmby1968 60

Aleas 57

MediaEmby1968 60

Aleas 57

MediaEmby1968 60

Aleas 57

Aleas 57

MediaEmby1968 60

Aleas 57

HUNCO 0

Aleas 57

Create an account or sign in to comment

Create an account

Sign in

Activity