Introduction
There have been a few posts on fancying up the login page for your APEX Applications. e.g. APEX 5 Pimping the Login Page by Dimitri Gielis. Another area where you can add some pizazz to the login page is the background.
APEX 5 Checked Background
As you can see, APEX team has done a nice job with the APEX 5 Developer login page so let's use that as a target for our login page.
I am going to assume you have followed the post above to get the logo and the icons for the username and password fields. If this is the case, you should be starting with something like the following:
In order to apply our css correctly, we need to understand a little about the structure of the login page. If we inspect the login page with Chrome we can see that the body is encompassed by a class named t-Body.
Now that we know the class to apply it to, here is the CSS that is going to give us the checkered look:
I lifted the background color, gradients and background sizes directly from the APEX 5 Developer Login Page css. I also added the logo at the top left of the screen and used 'fixed' to ensure it stays at the top of the page even if we scroll down. Obviously you will want to add your own logo.
All that is left to be done is to add the css to the inline css of the login page. An even better idea would be to include this in a css file and reference it. That way you can use it in the login page of all your applications and only have to change it in one place if you get tired of it and want to change it.
All that is left to be done is to add the css to the inline css of the login page. An even better idea would be to include this in a css file and reference it. That way you can use it in the login page of all your applications and only have to change it in one place if you get tired of it and want to change it.
The finished product should look something like this:
Conclusion
No rocket science there, although combining gradients and images can be confusing at first. You will also notice I didn't cover browser compatibility which is an additional minefield where linear-gradient is concerned. To finish off, I will leave you with some links to some sites that helped me:
RSS Feed