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:
- <a href="&LOGIN_URL." class="a-Header-logo" title="Oracle Application Express">
- <span class="a-Header-apexLogo"></span>
- </a>
CSS Classes:
- 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.
- .t-PageBody--login {
- background-color: #DEE1E3;
- background-image: linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
- background-size: 96px 96px,96px 96px,24px 24px,24px 24px;
- background-position: -1px -1px;
- min-width: 0;
- }
- .a-Header--login {
- background-color: rgba(255,255,255,.25);
- box-shadow: none;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- transition: background-color .2s;
- z-index: 800;
- }
- .a-Header--login:hover {
- background-color: rgba(255,255,255,.95);
- }
- .a-Header {
- min-height: 40px; /* Change this to match your logo's height and padding */
- }
- .a-Header-logo {
- color: #404040;
- padding: 10px 12px;
- font-size: 14px;
- line-height: 20px; /* Change this to match your image height */
- }
- .a-Header-apexLogo {
- background-image: url('#IMAGE_PREFIX#apex_ui/img/apex-logo.svg'); /* Change this to use your logo */
- background-position: 0 0;
- background-repeat: no-repeat;
- font-weight: 700;
- width: 212px; /* Change this to match your image width */
- height: 20px; /* Change this to match your image height */
- margin: 0;
- }
- .a-Header-apexLogo, .a-Header-logo {
- display: inline-block;
- vertical-align: top;
- }
Demo
https://apex.oracle.com/pls/apex/f?p=61549:101
Keine Kommentare:
Kommentar veröffentlichen