Oracle apex login page beautification Tutorial

 Oracle apex login page beautification Tutorial Script:

1. First create or modify your login page



2. Change login page template as go to page level property -> Appearance -> Template Options -> set template page layout as split



3. Download a background image from freepik.com

4. upload this background image in your apex application shared folder:





4. Add the below javascript code to your login page -> page level -> inline -> paste the code

Javascript code:
.t-PageBody--login form#wwvFlowForm{
background:url(#WORKSPACE_FILES#Capture.jpg);
background-repeat:no-repeat;
background-Size:cover;
}
Span.t-Login-logo{
background-image : url( #WORKSPACE_FILES#logo_learn_oracle.png);
background-Size :cover;
width :75px;
height :75px;
}
.t-Login-region{
position:relative;
width:400px;
--height:300px;
margin:0Auto;
background:rgba(165, 145, 145, 0.3);
padding:20px 22px;
border:1px solid;
border-top-color:#fbce4a;
border-left-color:#fbce4a;
border-bottom-color:#fbce4a;
border-right-color:#fbce4a;
border-radius:5%;
}
.t-Login-containerBody {
flex-grow: 0;
BACKGROUND-COLOR: #2E2E2E;
flex-shrink: 0;
flex-basis: auto;
display: flex;
flex-direction: column;
margin-top: auto;
margin-bottom: px;
align-items: center;
}
.t-LoginPage--split .t-Login-container {
background-color: transparent;
}
body .t-Login-title {
color:#FFFFFF;
border-radius:10%;
font-size: 26px;
font-weight: bold;
}
.t-Form-checkboxLabel, .t-Form-inputContainer .checkbox_group label, .t-Form-inputContainer .radio_group label, .t-Form-label, .t-Form-radioLabel {
color:#fbce4a;
}
.t-Login-region .t-Login-body .apex-item-text {
font-size: 16px;
padding: 4px 36px;
height: 40px;
border-radius: 15px;
}
.a-Button--hot, .t-Button--hot:not(.t-Button--simple), body .ui-button.ui-button--hot, body .ui-state-default.ui-priority-primary {
border-radius: 20px;
}
a-Button--hot:hover, .a-Button--hot:not(:active):focus, .t-Button--hot:not(.t-Button--simple):hover, .t-Button--hot:not(.t-Button--simple):not(:active):focus, body .ui-button.ui-button--hot:hover, body .ui-button.ui-button--hot:not(:active):focus, body .ui-state-default.ui-priority-primary:hover, body .ui-state-default.ui-priority-primary:not(:active):focus {
background-color:#6d5714f2;
}
.a-Icon {
color: yellow;
}
5. Code explanation :

6. Finally Save and run this page.
Enjoy !!
See insights and ads
Boost post
Like
Comment
Share

Comments

Post a Comment

Popular posts from this blog

Image
  Jasper Server and studio complete installation step by step   Step -1   Download 1. jaspersoft studio 2. jasperserver from official TIBCO website   Step-2   Install jaspersoft studio Install jasperserver   Step 3   Jasper Report Integration   First Check your System Environment Variable (For Windows same as linux)   Right clock on: This PC/My Computer icon ->Properties ->Advance System ->Advance ->Environment Variable ->System Variable ->select Path ->edit ->new ->C:\Windows\SysWOW64 ->move up under C:\Windows\System32 position ->apply ok ->ok   Install JDK latest version (if not installed)   again add jre path to environment variable   Right clock on: This PC/My Computer icon ->Properties ->Advance System ->Advance ->Environment Variable ->System Variable ->select Path ->edit -...
Read more
 Create Online Resume using HTML Step-1 Create a page called Online Resume Step-2 Create a static Region called Online Resume in source HTML Code write the following code: <div class="container-fluid cv-page">   <div class="row">     <div class="col-4">       <section class="section__left">         <article class="avatar">           <div class="frame"></div>           <div class="image">             <img src="#APP_FILES#Nasim Vai.jpg">           </div>         </article>         <article class="info">           <p class="name">Nur Nabi Nasim Ahmed</p>           <p class="role">Full Stack Developer (Oracle)</p>         </arti...
Read more