Blue & Orange Theme

[Aleas 31]

Just starting to get my hands wet w/ Emby themes and trying to design my own for once.  Mostly used AI to help generate this but I feel it looks good so far but still a work in progress...

Feel free to share any updates you make..  (Currently only works properly on the 4.9 Stable release.)

 

 

 

Edit: Updated to fix backdrop bleeding.

 

 

Emby Theme.css

Edited March 10 by Aleas

[Aleas 31]

Small Update and fixes

Emby Theme.css

 

Edited March 10 by Aleas

[Aleas 31]

Working on 4.10 Beta compatibility, should also work with 4.9-stable..  

you may want to set the site theme and settings theme to black, otherwise it gets kinda ugly.

 

 

 

Emby Theme 4.10 Release.css

Edited March 10 by Aleas

[Aleas 31]

Bunch of fixes and elements updated..  Looks much better now.

Emby Navy and Gold v2.css

 

Edited March 12 by Aleas

[Aleas 31]

Another update, various improvements.

Live TV looks better, updated the tabs and pills, and other fixes.  trying to make more elements fit into the overall theme.

suggestions welcome..

 

 

 

Emby Navy and Gold v2.css

 

Edited March 12 by Aleas

[Aleas 31]

Few fixes and adjustment, etc...  Also removed the pop-up hover effect over media cards (it started to annoy me.).

Enjoy..

Emby Navy and Gold v2.4.css

 

Edited March 13 by Aleas

[Aleas 31]

Updates:

• Fixed right shift
• Dimming of backdrop photos and videos
• removed blur from backdrops
• search box fix
• updated cast and crew to be ovals, better actor text.  (see below)
• Live TV: removed hover pop-out effects
• etc...

Side note: I think I rushed into posting this theme.  but it's not bad right now.  give me a bit I'll pause posting constant updates and post a final version. 

But feedback is always welcome, things you want to see, bugs, do you like it, hate it, etc...  

 

 

Emby Navy and Gold v2.5.css

Edited March 13 by Aleas

[szymonSamsung 0]

Nice work ! But i have 1 question. Do you have any idea how to swap the seasons folder under the series photo ?

[Aleas 31]

Trying to visualize what you mean.  Give this updated version and look around section 7 in these blocks to reorder things...

If that's not what you meant, I might need a little more clarity.

Quote

 

/* ============================================================
   07. VIEWS: MEDIA DETAIL PAGE
   ============================================================ */

....... container stuff here ..........

/* --- Layout Order --- */
div.verticalSection.seriesItemsSection { order: 1 !important; } /* Seasons */
div.verticalSection.itemNextUpSection { order: 2 !important; } /* Next Up */
div.verticalSection.peopleSection { order: 3 !important; margin-top: 20px; } /* Cast & Crew */
div.verticalSection.similarSection { order: 4 !important; } /* More Like This */

 

 

Emby Navy and Gold v2.7.css

[Aleas 31]

Updated to add in ordering for About,  and fixed that ugly orange box around the episode season/title as shown in the screenshot above.

Emby Navy and Gold v2.8.css

 

[jerkrl 4]

I absolutely love this theme!
Thanks for all the effort.

I do have two odd things I cannot manage myself, I think:

In some desciptions, like woth Actors: the 'rounded' style cuts of the text fater several characters. (See: rounded issue.jpg)

The other thing is that when in 'Movies' (in my setup, that is my Movies catalog), it gives me options in the top of the screen that I seem not to be able to change. When I turn this CSS of, several optyions aren't visible. (See: Options issue.jpg)
For me, options I do not need to see are: 'Shows'; 'Photo's'; 'Album Artists'; 'Artists'; 'Album'; ''Tags'.

In the CSS file, I do not find them. I don't really know how this happens and how this can be changed?

 

Edited March 16 by jerkrl

[Aleas 31]

I've noticed those issues, I'm out of the country now but will have a fix out next week 

[visproduction 332]

Aleas,

Nice work.  You can also use variables in CSS to let the user decide if they want a hover pop-up or not.  They would have to go in and change a variable declaration, which can be at the top of the CSS style. I mention this, because I see you are making choices that maybe users want to have an option.

I also have an extensive custom CSS style.  With a lot of variables, it does get rather complex and is not as user friendly.

  https://emby.media/community/topic/133592-custom-theme-state-street-theater-ver-1-desktops-notebooks-mobile/page/2/

:root {
  	/*** Style settings available to user. Only change the values to the right of the variable names: (--hpPromo:, --hpPromo-bgsize: ...) */
  --hpPromo: url(https://www.slashfilm.com/img/gallery/rocky-has-the-greatest-training-montage-of-all-time/l-intro-1677777434.jpg);
  --hpPromo-bgsize: cover;		/* cover; */
  --hpPromoBorderWidth: 3px;		/* 3px; */
  --hpPromoBorderColor: #50668F;	/* #50668F; */
  --hpPromoBorderLine: solid;		/* solid; Or dotted, dashed, groove, double, ridge, inset, outset or multiple in the order: top right bottom left */
  --hpPromoBorderRadius: 1em;		/* 1em; Promo images corner rounding */
}

/* Line 3763 */
 .view-home-home > div.scrollFrameY.flex.flex-grow.tabContent.tabContent-positioned.emby-scroller.scrollY.overflowYScroll.flex-direction-column.is-active.homeSectionsContainer.focuscontainer-x.focuscontainer-y.navout-up > div > div:nth-child(1) > div.emby-scrollbuttons {
   background-image: var(--hpPromo);
   background-size:var(--hpPromo-bgsize);
   border-width: var(--hpPromoBorderWidth);
   border-color: var(--hpPromoBorderColor);
   border-style: var(--hpPromoBorderLine);
   border-radius: var(--hpPromoBorderRadius);
 }

 

Edited March 16 by visproduction

[jerkrl 4]

7 hours ago, Aleas said:

I've noticed those issues, I'm out of the country now but will have a fix out next week 

Hi Aleas,

I Used the app "Cursor" (with AI integration) to try to fix the cut-off issue with the oval shaped photo's after pasting the CSS file content into Cursor.
It did work for me

Here is what Cursor gave me:
 

Fix applied (cast text no longer cut off)

The clipping was caused by the oval border-radius being applied to the entire cast card (.peopleSection .card), which also contains the text. I changed it so:

• Only the portrait image stays oval
• The card wrapper is square and allows overflow, so text can’t be masked

Here are the relevant lines in your CSS now:

/* --- Cast Portraits (Oval) --- */
/* IMPORTANT: Do NOT round the whole card (it clips the text). */
.peopleSection .card,
.personCard,
.peopleSection .cardPadder-portrait,
.peopleSection .cardBox,
.personCard .cardBox {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Round ONLY the portrait image containers. */
.peopleSection .cardContent-background,
.peopleSection .cardImageContainer {
  /* This creates the oval by making the height greater than the width */
  border-radius: 50% / 40% !important;
}

.peopleSection .cardContent-background, .peopleSection .cardImageContainer {
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7) !important;
  border-radius: 999px !important; /* Ensures the container follows the oval */
  overflow: hidden !important;
}

/* ... */

/* Optional: Centers the text perfectly under the ovals */
.peopleSection .cardText {
    text-align: center !important;
    width: 100%;
}

/* Safety: ensure cast text area is never clipped */
.peopleSection .cardText,
.peopleSection .cardText-first,
.peopleSection .cardText-secondary {
  overflow: visible !important;
  text-overflow: clip !important;
}

[szymonSamsung 0]

Also i noticed that the subs are turning off like 10% before ending. Turning off and on fixes it but its quite annoying i turned off css and it started to work i'm not sure if anyone else have similar issue

[visproduction 332]

SS,

Sub timings are not adjusted with CSS styles.  They are timed from either the separate subtitle file or inside the embedded subtitles in the media with a .mkv format container (H.265).

Do you mean that some text is being cut from view?  Are these subtitles, titles of actors, media content or something else.  Subs usually means subtitles, like English appearing in the media when characters speak another language.

[Aleas 31]

Here's a fix for:

- Removed pill buttons that should not be there

- Removed oval for actor's names

- Fixed music artists, would be a square when you hovered over them.

 I'll look into adding in some variables (I like that idea) and looking into a couple other small things. But trying to squash the bugs before I add in a few more theme elements.  

Emby Navy and Gold v2.10.css

Thanks!

Edited yesterday at 07:28 PM by Aleas

[Aleas 31]

Updates:

- Some Variables you can easily control at the top of the CSS (Thanks visproduction!), more to come later. It's a start though.

- added in music player mini-osd to reflect the theme. (Music is still a work in progress.)

 

  /* Custom Master Palette (Source of Truth) */
  --my-gold: #ffb900;                             /* Main accent color for text, borders, and buttons */
  --my-gold-transparent: rgba(255, 185, 0, 0.2);  /* Used for selected items, hover backgrounds, and subtle highlights */
  --retro-navy: #000814;                          /* Primary dark background color (used for sidebars, headers) */
  --retro-navy-light: #001d3d;                    /* Lighter background accent (used for panels, popups) */
  --retro-glow: rgba(255, 185, 0, 0.4);           /* Color and opacity of the glowing drop shadows */
  
  /* UI Dimensions & Shapes */
  --hover-border-thickness: 2px;                  /* Thickness of borders when hovering over cards and inputs */
  --standard-border-thickness: 1px;               /* Thickness of static borders on panels, dialogs, and banners */
  --border-radius-sm: 6px;                        /* Slight rounding for inputs and small badges */
  --border-radius-md: 10px;                       /* Moderate rounding for scrollbars and dialog boxes */
  --border-radius-lg: 12px;                       /* Pronounced rounding for media cards and info banners */
  --border-radius-xl: 15px;                       /* Heavy rounding for large info panels and login boxes */
  --border-radius-pill: 50px;                     /* Fully rounded edges for navigation tabs and pill buttons */

  /* Effects & Animations */
  --transition-speed: 0.2s;                       /* How fast hover effects and animations occur */
  --blur-light: blur(10px);                       /* Subtle frosted glass effect for headers and tabs */
  --blur-heavy: blur(20px);                       /* Strong frosted glass effect for dialogs and media panels */
  --blur-extreme: blur(30px);                     /* Very strong frosted glass for main popup action sheets */
  --shadow-glow-standard: 0 0 15px var(--retro-glow); /* The core glow effect applied to active tabs and hovered items */

  /* Layout & Ordering */
  --order-seasons: 1;                             /* Media Detail Page: Seasons layout order */
  --order-next-up: 2;                             /* Media Detail Page: Next Up layout order */
  --order-cast-crew: 3;                           /* Media Detail Page: Cast & Crew layout order */
  --order-similar: 4;                             /* Media Detail Page: More Like This layout order */
  --order-about: 5;                               /* Media Detail Page: About layout order */

 

Emby Navy and Gold v2.11.css

 

Enjoy!

Edited 6 hours ago by Aleas

[jerkrl 4]

Thanks!

One qusetion: where can I adjust the cast's radius of the oval. I like it to be a bit more rectangle instead of it being an oval.

 

[Veector 0]

So, I've cut and pasted all the contents of the CSS file into the section of the General tab, restarted the server and refreshed the page, but still nothing is showing. Am I missing a step?

[arrbee99 1835]

Personally I find swearing to myself helps, otherwise maybe/possibly clear browser cache ?

[Veector 0]

1 hour ago, arrbee99 said:

Personally I find swearing to myself helps, otherwise maybe/possibly clear browser cache ?

Yep. That was done as well.

I've inspected the HTML/CSS as well. The code is not making it to the page. I also see that any login disclaimer I enter does not show. Going to have to investigate some more.

Edited 1 hour ago by Veector
Added text

[Veector 0]

Ok, I figured it out, definitely not the fault of the CSS.

When a page loads and it detects that some content is http and some content is https, it disallows the http content. When I login from the URL https://app.emby.media, it will disallow all my other content served from http://myipaddress

So the JS that enables the disclaimer and the CSS injection via javascript don't work.

However, when I load the page from http://myipaddress from the beginning, all the content and the CSS is displayed correctly. Hope this helps someone else.