About background in manual login screen - ES 4790 (Update)

June 25, 2022

Hi,
I would like to have a background image only on the manual login screen.
The CSS codes I used don't work in the current version.
Thank you so much for this.

Edited November 9, 2022 by CarlosLima

June 25, 2022

The Background for the sign in page does not have an unique div, but the Please Sign in does. You can add this with a preferred image.

.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.verticalSection.flex-shrink-zero.flex.flex-direction-column.padded-bottom > div > h1 {
    width: 720px;
    height: 80px;
    padding: 220px;
    background-image: url(http://localhost:8096/emby/Users/75efc4d…/Images/Primary?maxHeight=200&maxWidth=200&tag=536da0a…&quality=90);
}

To make it work for online visitors, you can put the background image in the same directory as index.html so it would work for everyone. Or to change the image url to match your remote IP address for the server, or use some other online image source where you have control.

Edited June 25, 2022 by visproduction

June 25, 2022

What code are you using as you are already readding page id it can be targeted?

June 26, 2022

Happy,

Aha. I did not know that.

I tried to assign a CSS style to the backgroundContainer to the serverid value in the URL and it's not working. No style is added to the page. I don't see a unique id or class in the body of the signup page. How can you assign a background image style just to the Sign-up page? CSS does not want to read the server id without some extra .js to pull the parameter.

I tried clearing cache inbetween each test.:

page-id-b715,.[full serverid number]. .backgroundContainer {background-image:url(someimage);
server-id-b715... serverid b715...
adding >
adding div>
Starting with body

or body >

All these fail. What's the trick when there is no page-id in the html DOM?

June 26, 2022

10 minutes ago, visproduction said:

What's the trick when there is no page-id in the html DOM?

There are no options that I know of without reapplying pageid.

June 26, 2022

@visproduction Looks like this will work for Manual and Login pages but have not looked too much if it actually affects other areas.

First selector for Manual and second selector for Login.

Quote

div.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll div.scrollSlider.flex-grow.flex-direction-column.padded-left.padded-right.padded-top-page.padded-bottom-page.scrollSliderY:not(.settingsContainer), div.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll div.scrollSlider.flex.flex-grow.flex-direction-column.padded-top-page.padded-bottom-page.scrollSliderY {
background-image: url(https://imgur.com/eGfYBvk.jpg);
}

Only issue I see so far is the Auto Organizer plugin, at least from my install testing so I added another not variable.

Quote

div.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll:not([data-controller="__plugin/AutoOrganizeLogJs"]) div.scrollSlider.flex-grow.flex-direction-column.padded-left.padded-right.padded-top-page.padded-bottom-page.scrollSliderY:not(.settingsContainer), div.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll div.scrollSlider.flex.flex-grow.flex-direction-column.padded-top-page.padded-bottom-page.scrollSliderY {
background-image: url(https://imgur.com/eGfYBvk.jpg);
}

Edited June 26, 2022 by Happy2Play
added update

June 27, 2022

Aha... Sneaking in to the scrollslider for Login is very clever. It would be nice to have each page get it's own page-id wrap like the plug in apparently offers. Then the CSS customizers can spend even more time styling out pages, that probably no one will see... Ha!

individual page id's do seem a little over the top. The templates need to work for every browser and screensize. If you break that down further into individual pages, then there will probably be more cross browser errors that will be nearly impossible to fix. My custom CSS is already 1066 lines, non-optimized with comments.

Another way to do it would be to add .js to look at the URL and pull the variable parameter. Then pass this variable into js dynamic updating the CSS, in this case add a background if the parameter matches. It's a little complex but works well.

I've noticed that any inline .js in index.html is locked out and the script is turned into a comment. This is some security choice. I have not tried adding a js. script reference link, but I would guess that may be locked out as well. There is probably a proper way to do this with a plugin. It's doesn't seem important enough for me to go any further. The options above look pretty good.

June 27, 2022

Hi,
Thank you for the discussion and in fact it seems to be a bit complex, at least for those who don't know programming.
The solution I found today was to use a background image for the login screen (only) locally, stored in the themes folder. Worked perfectly.

June 27, 2022

@CarlosLima so you did something like this?

#manualloginPage {background-image: url(/web/modules/themes/login-backdrop.jpg);}

June 28, 2022

Using this one. I would like your approval, please.

/* #07 */
#manualloginPage { background:url(/web/modules/themes/background.jpg);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center;
}

June 28, 2022

@CarlosLima Yes that looks good.

June 28, 2022

You don't have to use an image from the interweb then ? a url can point to an image on your own pc ?

June 28, 2022

Yeah !!!

June 28, 2022

2 minutes ago, arrbee99 said:

You don't have to use an image from the interweb then ? a url can point to an image on your own pc ?

Yes you can place images in Emby install and point to them or use a web url. You just have to copy the images to that location with every update.

Would be /web/path to image "/web/css/images/login-backdrop.jpg" (css/images folder) or Themes folder "/web/modules/themes/login-backdrop.jpg".

Or just create your own folder that can be copied into \system\dashboard-ui, ensure name does not have spaces. (/web/Custom_Images/login-backdrop.jpg)

June 28, 2022

Taking advantage, would it be possible to use local images and rotate them, that is, change from one image to another every 30 seconds?

June 28, 2022

3 minutes ago, CarlosLima said:

Taking advantage, would it be possible to use local images and rotate them, that is, change from one image to another every 30 seconds?

As far as I know it would require a script to rotate the images like the backdrop.js does.

June 28, 2022

I have a script but I haven't tested it in the new stable version, however mine has 15 web images. If I use local images can it work?

June 28, 2022

13 minutes ago, CarlosLima said:

I have a script but I haven't tested it in the new stable version, however mine has 15 web images. If I use local images can it work?

I just tested the scripted @rechigoprovided and updated pageid and "var backgroundList" to path and they rotated. Remember to disable/delete the applied static image above.

var backgroundList = ["/web/Custom_Images/login-backdrop.jpg", "/web/Custom_Images/fanart.jpg", "/web/Custom_Images/fanart1.jpg", "/web/Custom_Images/fanart2.jpg", "/web/Custom_Images/fanart3.jpg"];

June 28, 2022

I'm not sure if I understood correctly. Would you happen to have the complete full updated script?

About the delete you referred to from the fixed image is my CSS code that I showed above?

June 28, 2022

2 minutes ago, CarlosLima said:

I'm not sure if I understood correctly. Would you happen to have the complete full updated script?

About the delete you referred to from the fixed image is my CSS code that I showed above?

As the topic says I copied that script into index.html

and changed #loginpage to #manualloginPage

Then changed the backgroundList

var backgroundList = ["/web/Custom_Images/login-backdrop.jpg", "/web/Custom_Images/fanart.jpg", "/web/Custom_Images/fanart1.jpg", "/web/Custom_Images/fanart2.jpg", "/web/Custom_Images/fanart3.jpg"];

The index.html

Spoiler

<!DOCTYPE html>
<html class="preload" data-appmode="standalone">
<head>

.app-splash {
background-image: url(modules/themes/logowhite.png);
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
position: fixed;
top: 30%;
left: 30%;
right: 30%;
height: 20%;
contain: strict;
content-visibility: auto;
}

.hide {
display: none !important;
}

@media (orientation: landscape) {

.app-splash {
left: 37.5%;
right: 37.5%;
}
}
</style>

</head>
<body class="mainAnimatedPages skinBody">
<div class="backdropContainer"></div>
<div class="backgroundContainer"></div>
<div class="mainDrawer hide focuscontainer-y" is="emby-scroller" data-horizontal="false" data-centerfocus="true" data-navcommands="card" data-bindheader="false" data-skipfocuswhenvisible="true">
<div class="scrollSlider mainDrawerScrollSlider"></div>
</div>
<div class="skinHeader focuscontainer-x headroom flex align-items-center flex-grow headerTop">
<div class="headerLeft">
</div>
<div class="headerMiddle sectionTabs">
</div>
<div class="headerRight focuscontainer-right">
</div>
</div>

image.onload = function () {
return resolve();
};
});
};

var setBackground = function setBackground() {
// create an array from the nodeList of loginPages
var loginPages = Array.from(document.querySelectorAll("#manualloginPage")); // only proceed if there are login pages that are visible

if (loginPages.filter(function (page) {
return page.classList.contains("hide");
}).length < loginPages.length) {
// go through each login page and apply the styling
loginPages.forEach(function (page) {
return page.style = "\n background: url(".concat(backgroundList[Math.floor(Math.random() * backgroundList.length)], ") no-repeat center center fixed; \n -webkit-background-size: cover; \n -moz-background-size: cover; \n -o-background-size: cover; \n transition: background-image 0.5s ease-in-out; \n -webkit-transition: background-image 0.5s ease-in-out;\n ");
});
}
};

document.arrive("#manualloginPage", setBackground); // preload all images

for (var _i = 0, _backgroundList = backgroundList; _i < _backgroundList.length; _i++) {
var backgroundImg = _backgroundList[_i];
await loadImage(backgroundImg);
} // update via interval we set

setInterval(setBackground, backgroundChangeIntervalSeconds * 1000);
})();
</script>

</body>
</html>

And yes, you need to delete/remove your /* #07 */ code.

40 minutes ago, CarlosLima said:

I have a script but I haven't tested it in the new stable version, however mine has 15 web images. If I use local images can it work?

Is this the same script or do you have something different?

October 31, 2022

/* #06AOK - Login background unico - Happy2Play-100821 */
#manualloginPage {
	background:url(/web/modules/themes/loginhd.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
}

Hi,
When upgrading to version ES 4780 I applied the above CSS, using a custom locally hosted image in .jpg format.
Turns out, I've tried it on three sizes and they all don't look good.
Test 1 - 3840x2160 - It was too big and I tested this size because I use my 4K TV as a monitor.
Test 2 - 1920x1080 - It was also too big.
Test 3 - 1280x720 - It was small in the center of the screen with big black borders.

Image 1 is perfect on a pc, and it was extracted when I was using the previous version of ES.
Image 2 is how the same image is being displayed on a pc.
Image 3 is how the same image is being displayed on a cell phone.

So I ask for help to know the ideal size for the image on the login screen to be suitable on PC and also on mobile. Thanks.

Edited October 31, 2022 by CarlosLima

October 31, 2022

Checked your page and add this depending on the effect you want. As you will get different results.

background-size: cover;

or

background-size: 100%;

or

background-size: 100% 100%;

But may need something different for small screen.

October 31, 2022

Due to the horizontal screen of a PC and the vertical screen of a cell phone, I believe that there should be an image for each device, because a single image will never have the same visual effect.
Would this be possible to obtain via CSS? It would be perfect.

cover;

I believe it is the best option.
Thank you very much.

Edited October 31, 2022 by CarlosLima

October 31, 2022

Something like this just assign a portrait image.

@media (min-width: 20em){
#manualloginPage {
	background:url(/web/modules/themes/loginhd-portrait.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	}
}

@media (min-width: 80em){
#manualloginPage {
	background:url(/web/modules/themes/loginhd.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	}
}

image.png.c1e66a92e4b0b36a82ad077949f1076a.png

November 2, 2022

I added the image in portrait format and it was perfect. Thank you so much for all your time.

About background in manual login screen - ES 4790 (Update)

Recommended Posts

CarlosLima 148

Link to comment

Share on other sites

visproduction 122

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

visproduction 122

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

visproduction 122

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

arrbee99 1559

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Happy2Play 8281

Link to comment

Share on other sites

CarlosLima 148

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in