How do I Add Styling the Tree with CSS

 

Introduction
Styling the Tree region in Oracle APEX using CSS allows you to customize the appearance to better match your application's branding and improve user experience. By applying CSS rules, you can change colors, fonts, spacing, icons, and hover effects, making the tree easier to navigate and visually appealing. This blog will guide you through the process of adding custom CSS styles to your tree components in Oracle APEX.

How to Add Styling to the Tree with CSS in Oracle APEX

1. Identify the Tree Region CSS Classes
   Oracle APEX Tree regions use standard CSS classes such as .t-TreeView, .a-TreeView-node, and .a-TreeView-label for various elements. Inspect these elements using your browser's developer tools to understand which parts you want to style.

2. Create Custom CSS
   Prepare your CSS rules targeting these classes. For example, to change the font color and add spacing, you might write:

.t-TreeView {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.a-TreeView-node {
  padding: 5px 10px;
}

.a-TreeView-label {
  color: #0055a5;
  font-weight: bold;
}

.a-TreeView-node:hover {
  background-color: #e0e7ff;
  cursor: pointer;
}

3. Add CSS to Your APEX Application

• Go to Shared Components > Cascading Style Sheets.

• Click on "Create" and add your CSS in a new file or directly in Inline CSS in the Page or Application-level Inline CSS property.

• Alternatively, you can add the CSS in the "Inline CSS" section of the page or in the application’s User Interface Attributes under the “CSS” property.

4. Test and Refine
   Run your application, verify the styles are applied, and adjust as needed. Use browser developer tools to debug any style conflicts.

Best Practices

• Scope your CSS to only affect the tree region to avoid unintended styling elsewhere; use region-specific selectors if needed.

• Use consistent fonts and colors aligned with your application branding.

• Test across different browsers and devices for compatibility.

• Avoid overly complex CSS that may impact page load performance.

• Document your CSS changes for future maintenance.

Oracle APEX Documentation
Refer to the official documentation for UI and theming here:
https://docs.oracle.com/en/database/oracle/application-express/

To improve the appearance of the tree, add custom CSS.

1. Go to Shared Components → Themes → Custom CSS.

2. Add the following CSS code:

.a-TreeView .a-TreeView-node {

    font-size: 14px;

    padding: 5px;

}

3. 
   

.a-TreeView .a-TreeView-content:hover {

    background-color: #f4f4f4;

}

4. 
   

.a-TreeView .a-TreeView-content-selected {

    background-color: #0073e6;

    color: white;

}

Click Save and refresh the page.

 Conclusion
Customizing the appearance of tree regions with CSS in Oracle APEX empowers you to create intuitive and attractive navigation components tailored to your application's design standards. By carefully crafting and applying CSS, you enhance both the aesthetics and usability of your app. Following best practices and leveraging APEX’s flexible styling options ensures a maintainable and polished user interface.