Jump to content

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


Recommended Posts

visproduction
Posted

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. 
     

 

State Street Theater CSS theme (v1) - Home page.jpg

State Street Theater CSS theme (v1) - Home page lower.jpg

State Street Theater CSS theme (v1) - Library.jpg

State Street Theater CSS theme (v1) - Media Page.jpg

State Street Theater CSS theme (v1) - Playlist normal browser width.jpg

State Street Theater CSS theme (v1) - Playlist with side screen browser.jpg

State Street Theater CSS theme (v1) - TV Show Episodes.jpg

State Street Theater CSS theme (v1) - Collection.jpg

State Street Theater CSS theme (v1) - Large Mobile Media Page.jpg

State Street Theater CSS theme (v1) - Small Mobile Artist page.jpg

State Street Theater CSS theme (v1) - Settings.jpg

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

  • 2 weeks later...
visproduction
Posted

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

Posted (edited)

Looks quite good from testing, one thing I did notice

image.png.a7bc054292ad44d57fd2acc82bb23ea0.png

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?

image.thumb.png.d54c5c685df43aed65118c181a9d465e.png

Edited by grimevil
visproduction
Posted (edited)

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!

 

Long titles appear in theme.jpg

 

Side menu affects the background main page.jpg

QA test with long title.jpg

Edited by visproduction
visproduction
Posted (edited)

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 by visproduction
  • 2 weeks later...
visproduction
Posted

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.

Sign in disclosure optional image.jpg

v1.03 State Street Theater Custom CSS mobile examples.jpg

Custom CSS comments and code folding.jpg

State Street v1.03 Emby custom theme.css

  • Like 2
visproduction
Posted (edited)

Removed...

 

Edited by visproduction
visproduction
Posted

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

  • 2 weeks later...
visproduction
Posted (edited)

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 by visproduction
  • 5 weeks later...
visproduction
Posted (edited)

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 update version 1.04 homepage.jpg

State Street Custom background repeat options.jpg

State Street ver 1.04 Emby Custom theme.css

Edited by visproduction
  • Thanks 1

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...