JMJ CLOUD
  • Home
  • Projects
  • Blog
  • About Us
  • Contact Us

Our Blog

Oracle APEX Login Page - Checkered Background

10/20/2016

0 Comments

 

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

Picture
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:
Picture
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.
Picture
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. 
Picture
The finished product should look something like this:
Picture

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:
  • CSS Gradients from CSS Tricks
  • Mozilla - Using Multiple CSS Backgrounds
  • Setting Backgrounds & Gradients
  • Example Gradients
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    RSS Feed

    Popular Posts

    - APEX Dog Food
    - Cloud ERP & APEX Mashup
    - Modernizing EBS with APEX
    - Easy APEX_WEB_SERVICE
    - Running APEX in RDS
    - ORDS What & Why?

    Categories

    All
    APEX
    AWS
    Fusion Cloud ERP
    INTEGRATION
    OCI
    ORDS
    PaaS
    RAD
    REST
    SOAP

    Archives

    January 2021
    October 2020
    September 2020
    June 2020
    May 2020
    April 2020
    February 2020
    January 2020
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    September 2017
    August 2017
    July 2017
    June 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016

Company

About
Contact
Blog
  • Home
  • Projects
  • Blog
  • About Us
  • Contact Us