CarlosLima 148 Posted June 25, 2022 Share Posted June 25, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
visproduction 123 Posted June 25, 2022 Share Posted June 25, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 25, 2022 Share Posted June 25, 2022 What code are you using as you are already readding page id it can be targeted? 1 Link to comment Share on other sites More sharing options...
visproduction 123 Posted June 26, 2022 Share Posted 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? Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 26, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 26, 2022 Share Posted June 26, 2022 (edited) @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 Link to comment Share on other sites More sharing options...
visproduction 123 Posted June 27, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 27, 2022 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 27, 2022 Share Posted June 27, 2022 @CarlosLima so you did something like this? #manualloginPage {background-image: url(/web/modules/themes/login-backdrop.jpg);} Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 28, 2022 Author Share Posted 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; } Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 28, 2022 Share Posted June 28, 2022 @CarlosLima Yes that looks good. 1 Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted June 28, 2022 Share Posted 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 ? 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 28, 2022 Author Share Posted June 28, 2022 Yeah !!! Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 28, 2022 Share Posted 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) 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 28, 2022 Author Share Posted 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? Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 28, 2022 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 28, 2022 Author Share Posted 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? Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 28, 2022 Share Posted 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"]; Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted June 28, 2022 Author Share Posted 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? Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted June 28, 2022 Share Posted 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> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <link rel="preload" href="modules/fonts/material-icons/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_3.woff2" as="font" type="font/woff2" crossorigin> <link rel="manifest" href="manifest.json"> <meta name="description" content="Emby Server"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta http-equiv="X-UA-Compatibility" content="IE=Edge"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="application-name" content="Emby"> <meta name="robots" content="noindex, nofollow, noarchive"> <meta property="og:title" content="Emby"> <meta property="og:site_name" content="Emby"> <meta property="og:url" content="https://emby.media"> <meta property="og:description" content="Energize your media."> <meta property="og:type" content="article"> <meta property="fb:app_id" content="1618309211750238"> <meta name="apple-itunes-app" content="app-id=992180193"> <link rel="apple-touch-icon" href="images/icon-192x192.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="images/icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="images/icon-152x152.png"> <link rel="apple-touch-icon" sizes="192x192" href="images/icon-192x192.png"> <link rel="apple-touch-icon" sizes="384x384" href="images/icon-384x384.png"> <link rel="apple-touch-icon" sizes="512x512" href="images/icon-512x512.png"> <link rel="apple-touch-startup-image" href="images/splash.png"> <link rel="shortcut icon" href="favicon.ico"> <meta name="msapplication-TileImage" content="images/touchicon144.png"> <meta name="msapplication-TileColor" content="#333333"> <meta name="theme-color" content="#43A047"> <title>Emby</title> <style> .preload { background-color: #000; } .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> <div class="app-splash"></div> <script src="apploader.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script> <script> (async function () { 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"]; var backgroundChangeIntervalSeconds = 5; // promisify image loading var loadImage = function loadImage(source) { return new Promise(function (resolve) { var image = new Image(); image.src = source; 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? 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 31, 2022 Author Share Posted October 31, 2022 (edited) /* #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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted October 31, 2022 Share Posted 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. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted October 31, 2022 Author Share Posted October 31, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted October 31, 2022 Share Posted 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%; } } 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted November 2, 2022 Author Share Posted November 2, 2022 I added the image in portrait format and it was perfect. Thank you so much for all your time. 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now