Oracle Apex Login Page Design Trends You Need to Know About - Template 1

Detailed Guide: Creating an Oracle APEX Login Design

• Upload Image
• Step 1: Navigate to the static files section in your Oracle APEX application.
• Step 2: Upload an image that you want to use as a background, e.g., bg_image.jpeg.
• Step 3: Copy the path of the uploaded image. This path is usually displayed in the form #APP_FILES#bg_image.jpeg.
• Create Static Region
• Step 1: Go to the page where you want to create the login design.
• Step 2: Create a new region and select the region type Static.
• Step 3: Position this region so that it serves as the background image.
• Enter Image URL
• Step 1: In the properties of the static region, find the option Template.
• Step 2: Choose the template type Image.
• Step 3: Enter the path # APP_FILES# bg_image.jpeg in the Image or File URL field that you copied earlier.
• Add CSS Class
• Step 1: Go to the properties of the login region.
• Step 2: Under the section Appearance, find the field CSS Class.
• Step 3: Enter the CSS class my_custom_login_design in this field. This is important to ensure the CSS styles are applied correctly.
• Add CSS Code
• Option 1: Directly on the page in the CSS section
• Step 1: Go to the page properties and find the section for custom CSS.
• Step 2: Add the following CSS code:

 

CSS/SCSS

xxxxxxxxxx

15

 

1

/* Styling for the login region */

2

.my_custom_login_design {

3

  background: transparent; /* Transparent background */

4

  color: white; /* White text color */

5

  border: 5px solid; /* 5px solid border */

6

  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); /* Inset box shadow for 3D effect */

7

  border-top-left-radius: 100px; /* Large round corner at the top-left */

8

  border-bottom-right-radius: 100px; /* Large round corner at the bottom-right */

9

}

10

​

11

/* Styling for text input and buttons only inside the my_custom_login_design div */

12

.my_custom_login_design .apex-item-text, 

13

.my_custom_login_design .t-Button {

14

  border-radius: 20px; /* Rounded corners with a 20px radius */

15

}

• Option 2: Upload as a file in the static files
• Step 1: Create a CSS file (e.g., custom_login_design.css) with the above CSS code.
• Step 2: Upload this file to the static files of your application.
• Step 3: Go to the application settings and link the uploaded CSS file in the CSS section.
• Completion
• Step 1: Verify that all changes have been applied correctly.
• Step 2: Test the login design to ensure it looks and functions as desired.

Additional Notes:

• Path Verification: Ensure that the path to the image is correct. An incorrect path will result in the image not being loaded.
• Clear Browser Cache: If changes are not immediately visible, clear the browser cache or perform a hard refresh.
• Responsive Design: Check the design on different devices and screen sizes to ensure it looks good everywhere.

Call to Action:

• Follow the Steps: To create a similar layout, simply follow the steps described above.
• Verify Your Work: Ensure that all changes have been applied correctly and the layout looks as desired.
• Provide Feedback: Share your feedback or questions to receive support or suggest improvements.

Good luck with creating your Oracle APEX login design!

 {fullWidth}