How do I Add Styling the Tree with CSS

 Using CSS to style your tree reports in Oracle APEX allows you to create visually appealing and user-friendly hierarchical displays. Customizing the appearance of tree nodes, lines, icons, and hover effects can greatly enhance the overall user experience by making the tree easier to navigate and more aligned with your application’s branding. This blog will guide you through the process of adding CSS styles to your tree components in APEX to achieve a polished and professional look.

Styling a Tree Report in Oracle APEX with CSS allows you to customize the look and feel of your hierarchical data, making it more visually appealing and easier to navigate. To add CSS styling to your tree, you first need to identify the CSS selectors used by the tree region. Oracle APEX tree components typically generate HTML elements with classes such as .a-Tree, .a-Tree-node, and .a-Tree-label which you can target in your CSS.

To begin, open your Oracle APEX application and navigate to the page containing your tree report. In the page designer, locate the tree region and under the “Appearance” section, find the “Custom CSS” attribute where you can directly add your CSS code, or alternatively, you can include CSS in the page’s Inline CSS section or in a shared CSS file if you want to reuse styles across multiple pages.

For example, to change the font size and color of the tree labels, you can use the following CSS code:

.a-Tree-label {
  font-size: 14px;
  color: #2A72D7;
  font-weight: bold;
}

If you want to customize the icons or expand/collapse indicators, target the .a-Tree-icon class. For instance:

.a-Tree-icon {
  color: #FF6600;
  font-size: 16px;
}

You can also add hover effects to highlight nodes when the user moves the mouse over them:

.a-Tree-node:hover {
  background-color: #E0F0FF;
  cursor: pointer;
}

To control indentation or spacing between nodes, you might adjust padding or margins of the .a-Tree-node elements. For example:

.a-Tree-node {
  padding-left: 20px;
}

Remember that your CSS changes are applied when the page renders, so after adding the styles, run your page and verify the tree looks as expected. If you need to override existing APEX styles, you might need to use the !important keyword or increase CSS selector specificity.

In summary, adding styling with CSS to your Oracle APEX tree reports involves targeting the correct CSS classes, adding your custom styles in the appropriate page or application-level CSS areas, and testing the results. This approach lets you create a more intuitive and branded navigation experience in your applications.

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.

By applying CSS to your tree reports, you gain full control over the visual presentation, enabling you to highlight important nodes, adjust spacing, and create custom icons or color schemes. With the flexibility offered by CSS, you can transform a basic tree into an engaging and intuitive navigation tool tailored to your users’ needs and preferences. Mastering tree styling is an important step toward building refined and effective Oracle APEX applications.