Custom Theme: State Street Theater (ver 1) Desktops, Notebooks, mobile

[visproduction 284]

CSS custom style sheet for Emby by James - Visproduction on Emby Forum

Theme: State Street Theater (ver 1) for Desktop / Notebook and some mobile

1. Changeable Home Page background image
2. Adjustable home page menus thumbnail sizes
3. Backdrop changeable multi-color blended themes
4. Colorful styling
5. Clear background images with no shaded masks
6. Interactive mouse hover effects for desktops and notebooks
7. Hover slightly enlarge header icons
8. Back button
9. Delete button removed – Still available in Metadata pop-up menu
10. Media Page file location removed
11. Color coded buttons
12. Soft focus behind media names and director
13. Admin settings – Form positions and overlaps fixed
14. TV shows and episodes boxes adjusted for desktop with alternating dark blue / green
15. Adjusted for some mobile views
16. Search area suggested links styled
17. Buttons styled and fit for desktop, browser window sizes and some mobile.
18. Metadata Save button moved up to stay in view (sometimes overlaps and made partially transparent)
19. Home page background demo picture is from https://imgur.com/  .  Please find your own background image. imgur.com site has extended image features and services.

Notes: Getting all mobile types to work is complex and I am unable to test all screen sizes.  Users can easily make use of the standard Emby mobile app, instead. 

The clear background without dark masks can make some texts more difficult to read.  Desktops and notebooks have mouse over hover areas that change to a solid background color.  Mobile users have some color changes to also help.  Using less complex background can also make it easier to view the text. I like a lot of color and full, bright background images.

The theme also includes extra space at the bottom of pages to view the entire background, without thumbnails in the way.  Just scroll all the way down if you want to see the background.

The custom.css file has a guide at the top with options to change:

• Home Page Background, from either online or a local image on your server.
• Adjust Home page menu thumbnail sizes.
• Change background blended colors for all pages without images; Libraries, Admin and user settings with various color blended themes.  Examples are listed inside custom.css as comments.
  
  Be aware that this type of theme can possibly break with future emby updates.
  Enjoy and comments are welcome. 
   

 

Emby Web custom CSS theme - State Street Theater ver 1.0 - visproduction - emby forum.css

[visproduction 284]

Updates Nov 18 2024:

1. Home header icon fixed with green hover color
2. TV episode play button fixed in correct position. it was lost below the image area.
3. TV epsiode bars flip to 2 columns screen change at 1500px width fixed.  
4. Tablet portrait alignment styled for many pages.  This should work now for portrait tablets.
5. Mobile Media TV show pages styled for larger phones.
6. Color hover over checkmarks less transparent green to match other mouse over effects.
7. Some minor code clean up.
   
   Comments are welcome.

 

 

State Street v1.02 Emby custom theme.css

[grimevil 63]

Looks quite good from testing, one thing I did notice

As you can see if the title wraps to the next line, it looks out of place, but this could be an emby issue maybe?

Also background images do not look to scale correctly?

Edited November 19, 2024 by grimevil

[visproduction 284]

GE,

Thanks for your comment.  The long title wrapping to the next line is a design choice.  There were several people who complained that the title was cut off with the elipses ...  This theme style makes the entire title visible.  You would need a really long title to overlap the next row.  I can fix that, but does anyone have a title this long?

What screen / tablet size are you using to get the media posters to overlap the left menu?  What do you mean scale?  Is it missing the top.  When you open the left menu there are three separate options,  you can show it, you can lock it and you use small icons and no longer overlap the background.  These options are in the top of the left menu.  This is an Emby fixed design option.

The background is set to always show a full height, no matter how low you bring the height.  So a thin wide browser will force the background image on the home page to get left and right background color bars.  Also changing the left menu state from overlap to side to small icons will update the homepage style.  If you refresh or change the browser width, the background image will reset.  This side menu multiple state is an Emby default design.  Most people probably don't even notice you can change the side like this.

If you wanted to always have a very wide Emby window, you could choose a wide panoramic image and then you would not get the shaded side bars.  The image would always show full height.  I hope that makes sense.  I am getting a little lost trying to explain it.. Ha!

 

 

Edited November 19, 2024 by visproduction

[visproduction 284]

Known issues - in progress
I just noticed the middle sized mobile phones need styling help for media and TV show pages.  It's difficult to get mobile perfect, without the different size actual phones to test it on. 

Is anyone interested in having adjustable positions for subtitles?   I can make that a settable option in the top area of the css style sheet.  It's sort of an obscure thing, so unless someone says they want it, I probably will not bother.  Let me know...

 I will work on an update, perhaps by December. 

Edited November 19, 2024 by visproduction

[visproduction 284]

State Street Theater Custom CSS
Version 1.03 - Dec 3, 2024 - (Be sure to upgrade. This replaces the older versions)

1. Added optional image to the login page, disclaimer area with user controlled options for image selection, text positioning above or ontop of the image and text color.
2. Fixed many mobile style issues for iPhone 6 and larger, portrait and landscape.
3. Adjusted tablet styles, portrait and landscape.
4. Adjusted overview text 'More' button to not disappear in some artist pages.
5. Mobile aligned media title names under main photo for media, TV and Music videos. (no change for desktop / notebook)
6. More minor code clean up.
   
   Notes:

• Putting mobile styles at the bottom of the css file and inside 'if' functions causes a known CSS bug. 
• Sometimes these styles are not refreshed when the user returns to a page.  Apparently, styles listed higher in the CSS file and not inside the mobile 'if' functions override the mobile styles and the page needs a refresh to look correct again.  The fix is either to adjust the cache from the server or place the call to the mobile css inside each html page header.  Neither of these fixes are possible when using custom style css. Coming back to some pages, particularly an Actor's page, makes mobile look occasionally broken. A page refresh will fix this.
• Due to similar class names, it is hard to fix a style for media page areas and not break similar TV series or Actor's pages. 
• This version has  266 "!important" declarations, which is not ideal.  Many "!important" are duplicated inside 'if' functions for different mobile sizes. Many are needed to override Emby css that also has '!important'.
• Ideally, renaming the classes to have different names for Media, Music, TV shows, episodes, Actors, Artists templates would be nice. With separate class names, I could more easily ungroup style commands per template.  This does create a page optimization hit on Emby's css styles.  There are ways to optimize using discreet class names per template and call separate css style files based on hardware.  But updating Emby's css is more work and maybe not worth it for such low use.
• Finally,  I only had two phone sizes to test. Hopefully, the styles in the new version will work with all mobile sizes.  If not, you can easily just use the Android or iOS Emby app instead for mobile.
  
  Enjoy and comments are welcome.

State Street v1.03 Emby custom theme.css

[visproduction 284]

Removed...

 

Edited December 5, 2024 by visproduction

[visproduction 284]

Latest version is v.1.03.  Scroll down to find the new upload.

[visproduction 284]

Still working on a new version to try to fix some mobile styles.
Remember to download the latest version 1.03 theme, above, to get all the updates.

Here is a batch file for anyone who uses local images for the disclaimer image and Homepage background.  You can edit the batch file to match your image storage and server folder locations.  Every time Emby updates, the two local theme images are deleted.  This doesn't apply for people using online images.  The demo theme uses online images links.

If you have updated the custom style settings to point to local images in the dashboard-ui directory,  this batch file can help auto restore the images. Anyway, it's a very obscure need, just for this custom theme.  I wonder if anyone will actually use it. Ha!...  Comments are welcome.

redoBgHPage.bat

Edited December 24, 2024 by visproduction

[visproduction 284]

New version with some extras and tweaks.
Version 1.04 (this version replaces the previous releases.)

Change log 1.04

•         Mobile iPhone updates to allow more iPhones and Android mobile phones to work with this custom style. 
•         Fixed alpha sort letter spacing on collections and libraries
•         Narrow Window browser - admin / User (non admin) / Edit / [Link] Edit this user's profile / Home page - Fix overlap of form on top of 'Home Page' Title for narrow browsers - push the forms down 36px; to stop form overlapping top title link
•         Fixed overlapping TV show episode title and Tagline and Overview text alignment on all media pages
•         Fixed admin Edit Metadata and Images icons be clickable at the very top of the page with z-index: 9; 
•         Adjusted media and actor info pop-up top bar image size and text position.
•         Fixed mouseover media page lower info subtitles to allow 3 dots option to appear
•         Turned on search icon lower border silver for large browsers
•         Adjusted playback on 1080P TV monitors to have smaller menus which helps TV Browser app
•         Admin / Dashboard User playback screen - adjust title to have enough padding and not be cut off
•         Minor text shadow change for date of birth
•         Adjusted Search page positions

New user feature:

• Added no-repeat choice for home background image.

Home page background can now be easily set to repeat or not.  The redoBGHPage.bat from the above post, will still work with this release.  See the guide section inside the top part of the custom .css style sheet for more information.

Enjoy and comments are welcome.
 

State Street ver 1.04 Emby Custom theme.css

Edited January 23 by visproduction

[visproduction 284]

New version with some extras and tweaks.
Version 1.05 (this version replaces the previous releases.)

Change log 1.05

• Alpha alignment sort by title moved a little to the right
• Filter pop-up window "Clear Filter" button link too close to the right margin - moved 24px to the left
• Removed 0.8 opacity from Check box to help visibility
• Adjusted bottom margin spacing from Tag to overview text
• Small mobile recentered TV episode page,  episode title screen to stop left side border from being cut off.
• TV series episode rows on small mobile adjusted to fit screen better.
• Small mobile ratings alignment update
• Adjusted many div style / positions for mid-small mobile <430px width
• Admin Profile Pin text made color Ivory with text-shadow
• New User Control: Play buttons animation fade in for monitors / windows > 800px width
  
   

State Street ver 1.05 Emby Custom theme.css

[visproduction 284]

Verison 1.05 code notes:
Home Page - My Media bottom font and border color styling:

Aha, did anyone notice this yet?  I forgot to mention that if you happen to want the Home Page - My Media thumbnails to appear at the top and again at the bottom of the home page, then the small style adjustments for their bottom titles and border line color style is in the theme css file under *** Home Page & favorities ***, lines 576 to 584.

Quote

    /* Home Page: Menu thumbs - Title area of menus - background color and font - Change '.section#' to match wherever the menus are. This example shows menu rows are section0 (first row), section5 (sixth row).  You do not need the second class (.section5) declaration, if there is no lower duplicate Menu row.  This will fail if users make their own home page row order. */

    .section0.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-left-page.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX.flex-direction-row > div > div > div > div.cardText.cardText-first.cardText-first-padded,
    /* 6th section Menu row (.section5 counting from 0), if needed.  (All the 'Latest' rows are counted as one section). */
    .section5.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-left-page.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX.flex-direction-row > div > div > div > div.cardText.cardText-first.cardText-first-padded 
        {
        background-color: #0b3f6c;
        border-bottom:3px solid #304531;
        letter-spacing: 0.2em;
    }
 

The v. 1.05 assumes the menu buttons are in the first (section0)  and 6th (section5) rows.

Since these positions are setup for users, first by the admin, but the order can be changed by the user, the background-color, border-bottom and letter-spacing won't always line up correctly.  Oh well.  If you, as an admin, choose to setup your users with top library menu only, or on the 2nd row after continue watching, then you can keep

Quote

section0.emby-scrollbuttons-scroller >... 

or move it down one, below a Continued Watching row to 

Quote

section1.emby-scrollbuttons-scroller >... 

If you want to put the My Media menus again at the bottom.  (Maybe I'm the only one that does that.)  Then find the row number (first row is 0). and update the line with section5 (row 6).

Quote

section5.emby-scrollbuttons-scroller >... 

If you don't need it, but want to keep the code, just put a row beyond the number people will use like section20 and then the code will be ignored.

Isn't CSS styling fun!

 

 

Edited March 29 by visproduction

[waelisa 5]

Nice work, thanks.

[OrtizOrtiz 1]

yeah better GUI could help emby alot and easier automation to organize IPTV

[visproduction 284]

Coming soon in a new version 1.06

Many alignment tweaks for mobile and Two new features!

1. Easier setup to customize home page rows bottom title size and colors.  Currently, these can be adjusted, by editing inside the code.  See the note above.  That will be updated to just make changes, inside the top variables instead.
    
2. Top promo image with hover over features.  A lot of people have said they want this in other posts.  Unfortunately, when you add this with CSS styles, you won't get clickable areas.  Only browser hover will work.  To get click to go directly to a media or show a trailer, you need javascript updates and this would need a proper Emby feature.  However, if you are happy with just a promo image, this will work.

I hope to release the new version before the end of May. 

Here is the top promo image mock up with the image change just adds text and hover over shows the full image with no transparency.  You can also change the hover image to something else. You can change it's height, it's left and right margins, the border color and turn the transparency effect to be less or turn it off completely.  It's more a promotion with text and will not be clickable. I hope some people will like it.  Any ideas about this feature are welcome.

 

Edited May 6 by visproduction

[visproduction 284]

New version 1.06 with several new features

There are new complicated features with this update. Customize the home page menu, text area color themes, each row differently.  There is now a Promo Banner image for the home page.  CSS styling makes it quite tricky to do and I can imagine the first response is to request an option to link directly to a page, or show a trailer.  Well, you need javascript and some html page updates to do that.  CSS does not let you.  So, those extras will have to wait for an official Emby update.

The Promo Banner image starts quite large at 580px height.  It also automatically rolls up and fades away after 14 seconds.  The height, the timing, the border colors, the rounded corners, an optional hover image for (computer users) can all be changed to whatever you like.  The method is still editing inside the CSS file.  An interactive GUI click and choose from dropdown menus would be nice.  That's not CSS.  Again, you would need a proper update with changes in javascript.

Since it is now getting comically complex, I've included an illustrated pdf guide, which still makes it complex, but at least the images are colorful...  Also, the guide can be very useful if you want to fall asleep at night, just print it out and read a few pages... Ha!

There are still some issues to fix for mobile users.  This release does fix several buttons and alignments.  I will be stuck trying to fix everything. I only have two phone sizes and the browser simulations of mobile sizes are not perfect.  If anyone would like to volunteer to go through the pages on their phone and see what needs help, you can always do that and report back here.  Thanks.

I hope people enjoy using the Promo banner image.  You can make it the size you like and the animation rollup and fade away seems to work well and looks sort of cool.

As always, comments are welcome.

Enjoy...

    /*    Updates May 24, 2025

•     Admin Pages: Live TV with no license alert - lower it to not be obscured by tighter nav tabs that were moved up
•     Play buttons on media poster centered and made gold
•     Check mark buttons on media poster have slight highlight.  Difficult to code all to be the same.  Needs work.
•     Fixed double column for TV episodes in wide browser > 1466. Before there was overlapping of the episode check circle.
•     Home page and favorites - .Padding-right needs bottom margin 20px to allow for longer collection names
•     Top tabs home and other pages padding adjusted on top of area, so the buttons are not cut off.
•     Updated p font color to be color: #d4d5ba !important; -- sometimes the old theme would pick a dark color in the admin / library area.
•     Moved page title up and to the left, to no longer overlap with number of items on the page
•     Reset button link sizes to default.  TV episodes page without logo looked too small. Forced More button to be font-size: 14px;
•     Tab view Menu bar slider top increased to 13 to align button borders to be visible for narrow browsers.
•     Favorite Section right arrow adjusted to not shift lower rows upward on hover
•     Removed button-link forced line-height 1.2em because some long titled media was causing the year to be cut off.
•     Mobile small and mid width adjust for Media play and collection buttons to be tighter spaced with description and items below.
•     Adjusted top left and right border curves to 2.0 em (more rounded) for tabs-viewmenubar-slider - top navigation tabs
•     New Feature: homebgsize With settings: contain (default), cover, 100%, 100% 100% to change how the background fills the screen
•     New Feature: Updated Home Page row text area styling to be adjustable from root variabiles.  This is tricky to do.  Keep a copy of the default values.
•     New Feature: Promo Images for home page top area for browsers with width > 1024px: Main promo image and hover image with size, position, animation, opacity, timing, fade in / out, hover, roll up, border color and styles.

State Street ver 1.06 Emby Custom theme.css State Street Theater Guide 1.06.pdf redoBgEmbyv1.06.bat

Edited May 24 by visproduction

[visproduction 284]

Found a small typo in the Custom theme.  Here is it the corrected version.  It's very small typo to give the top tab navigation have rounded top corners.

v. 1.06b with correction

This replaces all previous versions

 

State Street ver 1.06b Emby Custom theme.css

Edited May 24 by visproduction

[visproduction 284]

Found another code error. 

v. 1.06c with corrections 

The Promo slide up animation needs the borders animated and removed to make a smooth finish.  The slight hiccup jump, at the end of the animation, is fixed.

Animation start time fix:  (You might want a morning coffee before reading... )

I also noticed you cannot use a variable to change the percent value of when the animation starts. Drat!    But, you can still adjust when the animation starts, by going to the bottom part of the CSS file and change the percentage in two sections of @keyframes after line 3770. The default setting is 90%.  Changing to 80%, for example, will give you a longer animation. Just to be clear, this middle percent is the when the animation will start.  If you have set when the Promo slide up ends (--hpPromoSlideRowsupEnds) to 10 seconds. Making the middle percentage 80% means the animation slide up will start at 8 seconds. 

The default Promo Slide up Ends is set to 14 seconds.  In this case, 90% means the slide up animation starts at 12.6 seconds and lasts 1.4 seconds.  If you changed both middle percentages to 80%, then the slide up animation would start at 11.2 seconds and last 2.8 seconds. I set the Promo Slide Up Ends time longer, if there is a lot to read in the Promo image.  I like 24s and 90% for my site. (Some browsers need the @-webkit-keyframes.  Most browsers just read the @keyframes section.)

The two numbers to change in this code excerpt, below, are the 90% values. Lower means animation starts sooner and lasts longer.  There are charts in the guide to help you pick whatever combination of Promo Slide up End seconds and this Animation Start percentage. The State Street Theater Guide is available, just above. Did you download it? This new percentage update is not yet in the guide.  Wow, another thing to update!

@keyframes slideupRows {
  0% { min-height: var(--hpPromoMinHeight); margin-top: var(--hpPromoMarginTop); opacity:var(--hpPromoOpacity); border-width: var(--hpPromoBorderWidth); }
  90% { min-height: var(--hpPromoMinHeight); margin-top: var(--hpPromoMarginTop); opacity:var(--hpPromoOpacity); border-width: var(--hpPromoBorderWidth); }
  100% { min-height: 0; margin-top: var(--hpPromoTopMarginTotal);  opacity: var(--hpPromoOpacityFinsh); border-width: 0; }  
  /* Local variable: --hpPromoTopMarginTotal = --hpTopMargin -24px minus 6 px border of image (2* --hpPromoBorderWidth) = -30px. */
}
@-webkit-keyframes slideupRows {
  0% { min-height: var(--hpPromoMinHeight); margin-top: var(--hpPromoMarginTop); border-width: var(--hpPromoBorderWidth);  }
  90% { min-height: var(--hpPromoMinHeight); margin-top: var(--hpPromoMarginTop); border-width: var(--hpPromoBorderWidth);  }
  100% { min-height: 0; margin-top: var(--hpPromoTopMarginTotal); opacity: var(--hpPromoOpacityFinsh); border-width: 0; }
}

OK, all for now...  Enjoy...
 

 

State Street ver 1.06c Emby Custom theme.css

Edited June 8 by visproduction

[visproduction 284]

Whoops, another typo fix - very minor.

v. 1.06c2 with corrections 

Webkit browsers were missing some animation code.  This version 1.06c2 fixes that so Safari and other browsers should now have Promo Fade-out working correctly.

CSS code = never ending fiddling

State Street ver 1.06c2 Emby Custom theme.css

Edited June 8 by visproduction

[visproduction 284]

These recent media images work well for promo hover.  Please download and use them elsewhere.  Do not link to them on this server.  Images are purged from older forum postings.

Edited June 14 by visproduction

[RubiTeVe2 1]

This is great!

Could you add all the updates by editing the original post? I think that will be less confusing!

 

Thanks!

[visproduction 284]

1 hour ago, RubiTeVe2 said:

This is great!

Could you add all the updates by editing the original post? I think that will be less confusing!

 

Thanks!

Correct.  I don't have rights to update the original.  Thanks for posting.

[visproduction 284]

Screenshot montage of promo image slide up feature.