I’ve set myself a challenge today: creating a visually appealing post-it notes report in Oracle APEX with minimal coding.

After some initial research and not finding exactly what I needed, I decided to tackle the problem myself. As I've mentioned before, I prefer to use as many native classes as possible and aim to create sustainable code that remains intact through any theme updates. This approach involves avoiding hardcoded values for sizes, colors, or other CSS properties.

Here is the result.

And here are the steps:

1. Make sure your Card Region has a Static ID. In my example, card-post-it.

2. In your Card Report, set the CSS Classes attribute to one of the color classes from the palette. For this case, use u-color-6.

3. Add the following custom CSS class in Theme Roller:

/* Post-it Notes CSS */
#card-post-it .a-CardView-items {
  --a-cv-shadow: 0 0px 0px 0px rgba(0, 0, 0);
}

#card-post-it .a-CardView {
    border: 2px solid var(--u-color-36);
}

#card-post-it .a-CardView:before {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;       
  border-top: 20px solid var(--u-color-36);
  border-right: 20px solid var(--a-cv-background-color); 
}

To improve the appearance of the notes, follow these steps:

• Remove the Card Shadow: To remove the card shadow, override the --a-cv-shadow variable with 0 0px 0px 0px rgba(0, 0, 0). This change applies only to this report by using the Static ID #card-post-it .a-CardView-items.

• Set the Card Border: Adjust the border of the cards to a darker version of the selected color by using the CSS variable var(--u-color-36). Here's the breakdown of the color palette:

  • u-color-6 is the base color.

  • u-color-21 is a lighter version of the base color.

  • u-color-36 is a darker version of the base color.

• Apply the Folded Effect: For the folded effect on the bottom right corner, use CSS variables to ensure color adjustments don't disrupt the design. In the top section, apply the dark color (--u-color-36), while in the right section, use the --a-cv-background-color. This approach keeps the design consistent with any color changes.

You can learn more about colors in the Universal Themehere.

Enjoy Life.