How do I Add Customization Using HTML and CSS

 Customizing the look and feel of your Oracle APEX applications can greatly enhance user experience and branding. One of the most effective ways to achieve this is by adding your own HTML and CSS. By using HTML, you can structure and add custom content beyond the default APEX components, while CSS allows you to control styling such as colors, fonts, spacing, and layout. This blog will guide you through the process of integrating custom HTML and CSS into your APEX pages to create visually appealing and personalized applications.

Adding customization using HTML and CSS in Oracle APEX allows you to tailor the look, feel, and behavior of your application beyond the default templates and styles. This flexibility helps you create a unique user interface that aligns with your brand or specific user needs. Here’s a detailed guide on how to add such customizations effectively.

1. Where to Add Custom HTML

   • Static Content Regions: In APEX, you can create a region of type "Static Content" where you can directly enter your custom HTML. This is useful for adding structured content such as custom text, images, tables, or even embedded widgets.

   • Page Templates and Regions: You can modify the HTML markup of page templates or region templates to apply changes globally or for specific pages. This requires editing the template under Shared Components > Templates.

   • Dynamic Actions: Use JavaScript to dynamically manipulate the DOM and inject HTML content if needed.

2. How to Add Custom CSS

   • Inline CSS: You can add CSS directly into a page or region by including <style> tags inside the HTML content or in the page’s HTML header.

   • Page-Level CSS: In the Page Designer, under the "CSS" section, you can add CSS rules that apply only to that page.

   • Application-Level CSS: For broader impact, upload a CSS file through Shared Components > Static Application Files and reference it in the application’s User Interface Attributes under Cascading Style Sheets. This method applies styles across the entire application.

   • Using Themes: You can also customize or override theme styles by creating custom CSS rules that target specific classes or IDs used by APEX components.

3. Best Practices for Custom CSS in APEX

   • Use specific CSS selectors to avoid unintended changes in unrelated areas.

   • Avoid modifying core APEX CSS files directly; instead, override styles with your custom CSS.

   • Test your styles on different browsers and devices to ensure consistent appearance.

   • Use browser developer tools to inspect elements and identify the correct classes or IDs to style.

4. Examples

   • To change the background color of all buttons in your app, add CSS like:

     .t-Button {  
       background-color: #0055a5;  
       color: white;  
     }  
     

   • To add a custom HTML banner in a region, create a Static Content region and enter:

     <div class="custom-banner">  
       <h2>Welcome to Our Application</h2>  
       <p>Enjoy your experience!</p>  
     </div>  
     

   • Then in your CSS, style the banner:

     .custom-banner {  
       background-color: #f0f8ff;  
       padding: 15px;  
       border-radius: 5px;  
       text-align: center;  
     }  
     

5. Adding Custom JavaScript and CSS References

   • Use the “File URLs” section in User Interface Attributes to include external CSS or JavaScript libraries (e.g., Bootstrap, Font Awesome).

   • Alternatively, add links in the page’s “HTML Header” property for page-specific libraries.

6. Testing and Debugging

   • After adding custom HTML and CSS, preview your page to verify the changes.

   • Use browser developer tools (F12) to inspect your customizations and debug any issues.

Classic Reports provide complete control over the HTML structure, allowing developers to modify their appearance using CSS, JavaScript, or APEX templates. This level of flexibility makes it possible to:

• Apply custom styling

• Add icons or images

• Format data presentation based on business rules

Example of Custom Styling in a Classic Report

.report-table tr:nth-child(even) { 

    background-color: #f2f2f2; 

}

.report-table th {

    background-color: #333;

    color: white;

}

Using this CSS, Classic Reports can be made to have striped rows and a custom header style.

By carefully integrating custom HTML and CSS, you gain full control over your Oracle APEX application’s design. This approach enhances usability and brand alignment, while still benefiting from APEX’s powerful declarative development framework.

By mastering the use of HTML and CSS customization in Oracle APEX, developers can go beyond the standard templates and create unique, polished interfaces that better meet business requirements and user expectations. Custom styling not only improves aesthetics but also contributes to usability and accessibility. With these skills, you can ensure your APEX applications stand out, deliver a consistent brand message, and provide an engaging user experience.