Dienstag, 30. Januar 2018

Login Page like APEX Builder Login


the question has been posted in Oracle Apex community (https://community.oracle.com/thread/4117496) and Maxime give here a easy way to do that.
I'm just doing a blog here to show it. This trick allows you to have the Login Page as in apex builder Login page

1- create the header region

Here's the text so that you can copy paste:
Source:
  1. <a href="&LOGIN_URL." class="a-Header-logo" title="Oracle Application Express">  
  2.   <span class="a-Header-apexLogo"></span>  
  3. </a>  

CSS Classes:
  1. a-Header a-Header--login  






2- Second, we'll need to reuse the same CSS as the APEX Builder Login page and copy that in your login page inline CSS.

  1. .t-PageBody--login {  
  2.     background-color#DEE1E3;  
  3.     background-image: linear-gradient(rgba(0,0,0,.051px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.051px,transparent 1px),linear-gradient(rgba(0,0,0,.0351px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.0351px,transparent 1px);  
  4.     background-size96px 96px,96px 96px,24px 24px,24px 24px;  
  5.     background-position-1px -1px;  
  6.     min-width0;  
  7. }  
  8.   
  9. .a-Header--login {  
  10.     background-color: rgba(255,255,255,.25);  
  11.     box-shadow: none;  
  12.     positionabsolute;  
  13.     left: 0;  
  14.     right: 0;  
  15.     top: 0;  
  16.     transition: background-color .2s;  
  17.     z-index800;  
  18. }  
  19.   
  20. .a-Header--login:hover {  
  21.     background-color: rgba(255,255,255,.95);  
  22. }  
  23.   
  24. .a-Header {  
  25.     min-height40px/* Change this to match your logo's height and padding */  
  26. }  
  27.   
  28. .a-Header-logo {  
  29.     color#404040;  
  30.     padding10px 12px;  
  31.     font-size14px;  
  32.     line-height20px/* Change this to match your image height */  
  33. }  
  34.   
  35. .a-Header-apexLogo {  
  36.     background-imageurl('#IMAGE_PREFIX#apex_ui/img/apex-logo.svg'); /* Change this to use your logo */  
  37.     background-position0 0;  
  38.     background-repeatno-repeat;  
  39.     font-weight700;  
  40.     width212px/* Change this to match your image width */  
  41.     height20px/* Change this to match your image height */  
  42.     margin0;  
  43. }  
  44.   
  45. .a-Header-apexLogo, .a-Header-logo {  
  46.     display: inline-block;  
  47.     vertical-aligntop;  
  48. }  

Demo
https://apex.oracle.com/pls/apex/f?p=61549:101


Keine Kommentare:

Kommentar veröffentlichen