Learn Oracle

Shout out to my newest followers! Excited to have you onboard! Dewan Reza, Ramijuddin Azim, MD Shariful Islam, Srk Khan

Welcome to my newest followers! Excited to have you onboard! Minhajul Abedin, Zhang Peng

Optimize Oracle APEX 23.2 Login Page Design: Step-by-Step JavaScript Tutorial.

Optimize Oracle APEX 23.2 Login Page Design: Step-by-Step JavaScript Tutorial Oracle Apex Tutorial 2024Welcome to our comprehensive tutorial on optimizing the design of your Oracle APEX 23.2 Login Page! In this step-by-step guide, we'l...

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. Add below javascript code to your login page -> page level -> inline -> paste the code

5. Code explanation :

Javascript code:

t-PageBody--login form {
background:url( .jpg);
background-repeat:no-repeat;
background-Size:cover;
}

Span.t-Login-logo{
background-image : url( .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: ;
border-left-color: ;
border-bottom-color: ;
border-right-color: ;
border-radius:5%;
}

t-Login-containerBody {
flex-grow: 0;
BACKGROUND-COLOR: ;
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: ;
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: ;
}

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: ;
}
a-Icon {
color: yellow;
}

6. Finally Save and run this page.

Enjoy !!

Create report in Jasper studio & publish to jasper server part-3 report in Jasper studio & publish to jasper server part-...

Validation in oracle apex (button validation) Learn Oracle video i have made for a subscriber request as he said that:Can you make a video of below scen...

How to install jasperstudio server in windows part-2 to install Jasper studio in windows part-2 | 2022 step by s...

Install jasperreports server on windows part-1 to install Jasper server in windows part 1 | 2022 step by step Learn Orac...