Ticker

6/recent/ticker-posts

Design Simple and Attractive Login Page in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Blog Post, We are going Design Simple and Attractive Login Page in Oracle APEX using CSS.

Design Simple and Attractive Login Page in Oracle APEX


Before the proceeding, I will suggest to new beginners please read some topic in CSS which helps to you for better understanding.

  1. Background-Color
  2. Background-image
  3. Box-Shadow
  4. Border
  5. Padding
  6. -webkit-linear-gradient
  7. linear-gradient
  8. deg

Let's Start, We have used some  CSS to design simple and attractive login page. As you can see in the above image, we have added background color, modified text field and add some cursor effect on button.

Note:- Add Static Id on your page button. I will use login as button static id.

You have to add just below CSS code in your login page inline section.

body
{  
  background-color: #f87f73;
  background-image: -webkit-linear-gradient( -30deg, #f87f73 0%, #f87f73 50%, #292423 50%, #292423 100%);
  background-image: linear-gradient( -30deg, #f87f73 0%, #f87f73 50%, #292423 50%, #292423 100%);
}

.t-Login-title{
    color: white;
    font-weight: 300;
}

.t-Login-region
{
background:rgba(255,255,255,0.1);
border-radius:6px;
box-shadow:0 5px 35px rgba(0,0,0,0.2);
}

#P9999_USERNAME,#P9999_PASSWORD
{
outline:none;
border:1px solid rgba(255,255,255,0.2);
background:transparent;
border-radius:6px;
color:#fff;
Font-size:16px;
font-weight:300;
box-shadow:inset 0 0 25px rgba(0,0,0,0.2);
}

#login
{
background:#fff;
color:#111;
max-width:100px;
padding:8px 10px;
box-shadow:none;
font-weight:500;
letter-spacing:1px;
cursor:pointer;
float: right;
}

In the above CSS code, I am not displaying any logo but you can display Logo Image to Oracle APEX Login Region or Logo Top Left Corner in Oracle APEX.

You can modify the above CSS code base on your requirements.That's all for today,today I think this Design Simple and Attractive Login Page in Oracle APEX post will helpful for you.If you like this post then share your view in the comment box.

Post a Comment

0 Comments