Blue & Orange Theme

[Aleas 29]

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 29]

Small Update and fixes

Emby Theme.css

 

Edited Tuesday at 06:45 PM by Aleas

[Aleas 29]

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 Tuesday at 08:42 PM by Aleas

[Aleas 29]

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

Emby Navy and Gold v2.css

 

Edited Thursday at 05:42 PM by Aleas

[Aleas 29]

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 Thursday at 10:51 PM by Aleas

[Aleas 29]

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 Friday at 03:12 PM by Aleas

[Aleas 29]

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 Friday at 08:10 PM 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 29]

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 29]

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 2]

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 9 hours ago by jerkrl

[Aleas 29]

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

[visproduction 328]

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 2 hours ago by visproduction

[jerkrl 2]

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;
}