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

[visproduction 322]

Sam,

Just go to Admin dashbaord / General / and paste the code into the Custom CSS.  The theme includes many options, so you will need to follow the instructions in the code to pick the background images, featues and colors you like.  It is not a plug-in so come careful text editing is required.  Use a proper text editor that saves only text without any extra formatting.

Hope you like it.

[SamuelBenevides 1]

Ola!

 

eu não consegui mudar o bg da login page, eu estou usando esse codigo

:root {
    --homebg: url(../web/images/home.png);
    --homebgsize: contain;                /* Home Background fits browser window, contain (default), cover or 100% */         
    --hrepeat: no-repeat;
    --disclam: url(../web/images/home.png);3

 

tem alguma outra parte do codigo que fala sobre o bg da login page?

[SamuelBenevides 1]

eu queria que a imagem ficasse em tela cheia 

[visproduction 322]

Sam,

You have to have an image in the images directory, and normally there isn't a images directory.You have to create it, if you want to use local images. Also, web is just a link rename. It represents the system folder. Don't make a system/web/images subfolder. Just add system/images.

Be aware that every time Emby system updates, those images will disappear.

You also have an extra ;3 in the link. Perhaps that's just a typo.

There is an example batch file above in this posting, that would let you automatically refresh any images that you put specially in images.

You would need to customize the batch file to fit your needs. It works for window servers.

Changing the custom style should work immediately, but you may need to force refresh the page to see the changes. For Windows, this is Shift F5.

There are also a couple of tips you can use to place your image somewhere, where they will not be removed with an Emby upgrade.

Info for those tips are further up in the posting.

Jpg files will load faster than .png because they are much smaller.

Hope that helps.

Edited August 26, 2025 by visproduction

[SamuelBenevides 1]

Eu consegui que o arquivo fosse carregado mais ele não fica na tela toda (fullscreen) fica, queria essa imagem preenchese a tela toda

[visproduction 322]

Sam,

I think it looks fantastic.  Nice image. I set the login page image to always be smaller and centered.  You have the option to add more instructions text in the Admin page for login notifications.  With the style theme, you can either push the image down so the text does not overlap, or you can have the text overlap the image.

I did not add an option to make this image fullscreen.  I think my thought was this would make the login page a little more confusing and might be too much for a new user.  I can look into adding this option for a future release, if you really think it would be something you would use.  I think it looks cleaner with a centered smaller image with no confusion for the username and password entries.

[JIsenhour247 2]

this only works on web app / browsers correct?

 

[visproduction 322]

Yes. Only web has the custom css styles.

[visproduction 322]

New Update to fix the Home Page Promo image v. 1.06d2  
Emby version 4.9.2.6 beta and the latest release has changed a div name, which made the home promo feature no longer work.  This version fixes that.  This kind of issue can happen with new updates.  The 4 different demo pictures can be replaced with your own choices.

• Sign up page for user login, when password is not saved
• Home page background
• Home page promo image --- (Replace this with a custom ad about your site - Tip: Pick a photo that looks good when it's top only wide and short height.  Some user's monitor or window size can auto scale the promo image by cropping the bottom.)
• Mouseover / hover home page promo picture (browsers only).

Read the instructions at the top of the css file and there is still a valid .pdf illustrated guide download in a post on page 1 which helps a lot.  This is a very custom, full featured theme.

Enjoy.

 

State Street ver 1.06d2 Emby Custom theme.css

Edited November 16, 2025 by visproduction

[visproduction 322]

Update:  I have a few fixes in progress, for minor style issues and hope to have a new release by May.

Mobile @media rules that work

Of interest for anyone trying to make a theme...  here are the CSS @media rules I use to find all the mobile sizes.  I put this at the end of the css theme, listing the smallest mobile first to optimize code delivery.  Desktop sizes just ignore everything until the largest size at the end.  Small phones, I would assume, are not very fast, get their code sooner and then ignore other mobile sizes.  Faster phones with larger screens sort through a few media rules to find their assigned styles.  Getting @media to work was tricky.

Getting the mobile to show updates - is an issue

I have to warn you that most mobile phones will not update their styles easily, so when you make a code change and test it on a phone, your phone won't see the change because, by default, it is stuck using the CSS in browser cache and it's very difficult to get it to forget that, even with incognito or forcing a cache clear.  The only work around I found to clear all cache and any cookies or add version parameters at the end of URL links (somedomain.com/index.html?mar-9-26)  but you can't do the parameters with Emby.  If you have a Browserstack.com account, you can use that to switch to a new phone and get around this issue.  If you have a VPN on your phone, switching locations might work.  It's a pain to test on the phone.  Browser simulation on desktops with Chrome is not exact...  so... good luck.  If you want to see style changes I used for mobile on my theme, look at the end of the latest version style upload from line 2427 to 3805 which is 1378 lines of @mobile rules!  Yikes!  Maybe I should have mentioned that first.  It's scary.

I've added the @media rule code, in case anyone would like to use it to make their own theme. The style in each media size just adds a color to the bottom border of the search icon.  This helps you see the @media size changes as you change the browser size on a desktop or test with mobile.  Some sizes, I've ignored and they are commented here because Emby uses these sizes in their styles.  If you want to change or add colors, here is an online guide:
https://www.tutorialrepublic.com/css-reference/css-color-names.php

/* 320px width - red bottom border color of round search icon shows this mobile mode: iPhone 5e and some older smaller phones */
  @media (max-width: 320px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid red;
	}	
  }

/* 321-432px   - white: Portrait iPhone XR, 12 to 14, 5, 5e, 6/7/8 & plus, Samsung S12:  */ 
  @media (min-width: 321px) AND (max-width: 432px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid white;
	}
 }

/* 433-480px   - blue */ 
 @media (min-width: 433px) AND (max-width: 480px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #0000FF;
	}
 }

/* 481-549px   - Pale green: portrait phones up to 540 width Surface Duo. */ 
 @media (min-width: 481px) AND (max-width: 540px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #98FB98;
	}
 }

/* @media (width >=  31.25em) { } (This is 500px and a size used in Emby code) */

/* 541-640px   - brown: portrait e-readers (Nook/Kindle), 600 or @ 640 wide. */ 
 @media (min-width: 541px) AND (max-width: 640px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #A52A2A;
	}
 }

/* @media (width >=  36em) { } (This is 576px and used in Emby code) */
/* @media (width >=  40em) { } (This is 640px and used in Emby code) */

/* 641-799px   - teal: portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
 @media (min-width: 641px) AND (max-width: 799px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #008080;
	}
 }

/* @media (width >=  45em) { } (This is 720px and used in Emby code) */
/* @media (width >=  50em) { } (This is 800px and used in Emby code) */
/* @media (width >=  55em) { } (This is 880px and used in Emby code) */

/* 800-1024px  - Dark Orange: TV 1080P monitor, tablets, landscape iPad, lo-res laptops ands desktops */ 
 @media (min-width: 800px) AND (max-width: 1024px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #FF8C00;
	}
 } 

/* @media (width >=  62.5em) { } (This is 1000px and used in Emby code) */

/* 1025-1280px - indigo: big landscape tablets, laptops, and desktops */ 
 @media (min-width: 1025px) AND (max-width: 1280px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #4B0082;
	}
 }

/* === Large desktop or notebook bowser windows - gold */
	@media (min-width: 1280px) {
	.headerSearchButton.headerButton.md-icon.paper-icon-button-light.hiddenWhenBottomNavVisible {
		border-bottom: 1px solid #FFD700;
	}
}