{"id":10615,"date":"2020-11-12T09:33:35","date_gmt":"2020-11-12T15:33:35","guid":{"rendered":"https:\/\/traust.com\/?p=10615"},"modified":"2020-11-12T09:33:35","modified_gmt":"2020-11-12T15:33:35","slug":"randomize-an-oracle-apex-login-page-background","status":"publish","type":"post","link":"https:\/\/traust.com\/blog\/randomize-an-oracle-apex-login-page-background\/","title":{"rendered":"Randomize an Oracle APEX Login Page Background"},"content":{"rendered":"

This is a blog post about customizing the background of an Oracle APEX login page so that it doesn’t appear so static. We will show you how to randomize background images of your choosing when the page is loaded.<\/p>\n[su_spacer size=”30″]\n

Time to Start<\/h2>\n

Out of the box, an Oracle APEX<\/a> application login screen is attractive, readable and functional. It\u2019s also tremendously flexible because it allows developers to use CSS, JavaScript<\/a> and jQuery to customize pages.<\/p>\n

I\u2019d like to share a post that my colleague, Andrew Schultz, wrote about APEX Login Page Theming<\/a>. That post is a great place to start getting familiar with the workings and layout of that page.<\/p>\n

I started with his sample CSS code and then tailored it for my project. This code lives at 9999 – Login Page > Rendering > Page 9999: Login Page > CSS >Inline:<\/p>\n[su_spacer size=”30″]\n

\r\n.t-Login-region {\r\nbackground-color: rgb(0, 0, 0); max-width: 350px;\r\n}\r\n.t-Login-title {\r\nmargin: -15px 0;\r\nfont-weight: bold;\r\n}\r\n<\/code><\/pre>\n[su_spacer size=”30″]\n
Grab Background Images<\/h2>\n
Next we need to find and upload some background images. I recommend at least 3 images to give a truly random feeling, but you can add as many as you want.<\/p>\n
Three great places to find images that are high quality and free to use are Unsplash.com, Pixabay.com and Pexels.com. After you have selected and downloaded your images, upload them to Shared Components > Static Application Files.<\/p>\n[su_spacer size=”30″]\n
Add a Dynamic Action<\/h2>\n
Now for the fun part. Within Page Designer create a Dynamic Action that is triggered on Page Load.<\/p>\n
Add an Execute JavaScript Code True statement. Paste the following code, substituting the names of your static image files for the three I have named in the images array.<\/p>\n[su_spacer size=”30″]\n
\r\n$(document).ready(function(){\r\nlet images=[ '#APP_IMAGES#background-image-1.jpg',\r\n'#APP_IMAGES#background-image-2.jpg',\r\n'#APP_IMAGES#background-image-3.jpg',];\r\nlet randomNumber = Math.floor(Math.random() * images.length);\r\nlet bgImg = 'url(' + images[randomNumber] + ')';\r\n$('body').css({'background':bgImg, 'background-size':'cover', });\r\n});\r\n<\/code><\/pre>\n[su_spacer size=”30″]\n
Sorcery Explained<\/h2>\n
This code block calls jQuery when the document is ready to run an anonymous function that does four things:<\/p>\n