Introduction
In Oracle APEX, crafting visually appealing and functional applications often involves customizing various elements to align with your brand or enhance user experience. One such customization is adjusting the colour of report headers, which can significantly impact the readability and overall aesthetic of your reports. Changing the header colour not only helps in distinguishing different sections of a report but also provides a way to incorporate corporate colours or design themes.
The following technology has been used to achieve the expected output.
- CSS
- Oracle Apex
Why we need to do
Customizing the report header colour in Oracle APEX can be more than just an aesthetic choice; it can significantly impact the functionality and user experience of your reports. Here’s why it’s important:
1.Enhanced Visual Appeal: By customizing header colours, you can create a visually appealing interface that aligns with your application’s branding and design guidelines. This not only makes the reports more attractive but also enhances the overall user experience.
2.Improved Readability: Distinctive header colours can make it easier for users to scan and interpret data. By using colour to differentiate sections or categories, you improve the clarity and readability of the information presented.
3.Brand Consistency: Customizing header colours allows you to incorporate your organization’s colour scheme into your reports. This consistency helps reinforce brand identity and makes the application feel more cohesive and professional.
4.Increased User Engagement: A well-designed report can engage users more effectively. When users find the reports visually appealing and easy to navigate, they are more likely to interact with and utilize the data presented.
How do we solve:
Step 1: Create an application in oracle apex workspace
Step 2: Create interactive grid
Step 3: Applying the Customization to the Interactive Grid
To use this CSS code in Oracle APEX, follow these steps:
1.Write below code on static workspace file :
Crete file with our CSS code
/*top right position*/
.rgt_top_div {
margin-top: 4.8%;
margin-right: 0;
position:fixed;
top:0;
right:0;
}
/*For breadcrumb item active*/
ul > li.t-Breadcrumb-item.is-active > h1 {
font-weight: bold;
}
/*For Region header -> accent1*/
.t-Region–accent1>.t-Region-header,
.ui-dialog-titlebar {
/*background-color : #da1b1b !important;*/
background-image: linear-gradient(#004c8f ) !important;
}
/*For Alert box*/
.ui-dialog-title {
color:white !important;
}
.ui-dialog–notification > .ui-dialog-titlebar > span.ui-dialog-title:before {
content: “Alert” !important;
}
/*For Classic Report*/
.t-Report-report > thead > tr, table > thead > tr > th, table > tr > th {
/*background-color:#8fadcc !important; */
background-image: linear-gradient(#004c8f ) !important;
color : white !important;
}
.t-Report-report > thead > tr > a, table > thead > tr > th > a, table > tr > th > a {
color : white !important;
}
/*
.t-Report-report > tbody > tr,table > tbody > tr > td {
background-color:white;
}*/
/*button css*/
.buttoncss {
border-radius: 56px;
box-shadow: 0 5px 15px rgb(145 92 182 / 40%);
background-image: linear-gradient(to right,#004c8f ) !important;
color : black !important;
}
/*.t-Region {
background-color: #dfe3ee !important;
}
.t-Body-main ,.t-Dialog{
background-color: #DCE1E3 !important;
}*/
/*For Header region*/
.t-Header-branding, .t-HeroRegion-icon{
/*background-color: #da1b1b;*/
background-image: linear-gradient(#004c8f 90%, white ) !important;
}
.t-Header-branding {
height: 42px !important;
}
Step 4: Copy the reference id and paste it under user interface CSS Section
Conclusion:
customizing report header colors in Oracle APEX offers more than just aesthetic improvements. It plays a crucial role in enhancing the overall user experience by making reports visually appealing, improving readability, and maintaining brand consistency.
