1. Introduction/ Issue:
Creating a custom footer in Oracle Application Express (APEX) is a valuable skill for enhancing the look and feel of your applications. A well-designed footer can provide important information, navigation links, and a consistent user experience across different pages of your application. In this blog, we’ll explore how to create and implement a custom footer in Oracle APEX, along with tips to make it responsive and visually appealing.
The following technologies are used to achieve this functionality.
- Oracle APEX
- JavaScript
- HTML & CSS
2. Why we need to do / Cause of the issue:
Imagine you’re building an enterprise application in Oracle APEX where consistency and branding are crucial. You want every page to have a footer that contains:
- Company branding (e.g., logo and tagline).
- Important links like “Contact Us,” “Privacy Policy,” and “Terms of Service.”
- Social media icons linking to your company’s profiles.
- Dynamic content like the current year or user-specific information.
The goal is to create a footer that not only aligns with your brand’s identity but also enhances user engagement by providing easy access to essential information.
3. How do we solve:
Step1: Clone the page level Standard template and name as Copy of Standard.
Step2: Add the below piece of code inside the div.t-Footer-apex like the below.
<div class=”sub-footer”>
<div class=”sub-footer-col sub-footer-col-dept”>
<h5>DOYENSYS</h5>
<img class=”tn-foo-logo” src=”#APP_FILES#Doyensys-Logo.png” width=”50px” height=”50px”>
<p> Doyensys is a technology services company that provides <br>
innovative solutions around the Oracle platform.<br>
Having 3.4 Million Man hours of Oracle experience.
</p>
</div>
<div class=”sub-footer-col sub-footer-col-office”>
<h5>Office</h5>
<p><span class=”strng”>Plot No. 1 & 2, 6th Floor, The Lords, Block-2, <br>
Tiru Vi Ka Industrial Estate Northern Extension Area, <br>
Ekkatuthangal, Guindy, Chennai, Tamil Nadu 600032</p>
</div>
<div class=”sub-footer-col sub-footer-col-locateus”>
<h5>Locate us</h5>
<iframe class=”gmap” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d971.801073483 7497!2d80.20646416947167!3d13.022658605819503!2m3!1f0!2f0!3f0!3m2!1i1024!2i7 68!4f13.1!3m3!1m2!1s0x11056f88813e8be9%3A0x13ba6902d885a85!2sDoyensys%2 0%7C%20Oracle%20Consulting%20Services!5e0!3m2!1sen!2sin!4v1723373108613! 5m2!1sen!2sin” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>
</div>
</div>
This sub-footer contains three columns with information about a company, including a logo, an office address, and an embedded Google Map showing the company’s location.
Step3: Created a CSS file named customFooter and added the below code inside that.
.sub-footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
column-gap: 1rem;
text-align: start;
margin-bottom: 2rem;
border-radius: 2rem 0rem 0rem 0rem;
}
.t-Footer-top {
display: none;
}
.sub-footer-col {
width: 33.3%;
display: flex;
flex-direction: column;
align-items: center;
}
.gmap {
border-radius: 80px;
width: 75%;
height: 125px;
}
.t-Footer {
background-color: #0e0a31;
padding: 0;
color: #fff;
}
.sub-footer-col.sub-footer-col-dept p {
text-align: center;
}
Step4: Linked the CSS file with the Copy of standard template like the below.
Step5: The final output will be like the below.
4. Conclusion:
A custom footer is more than just an aesthetic addition to your Oracle APEX applications; it’s a functional element that enhances user experience and reinforces your brand’s identity. By following the steps outlined in this blog, you can create a footer that is both visually appealing and highly functional, providing users with important information and easy access to key links.
Implementing a custom footer in Oracle APEX not only adds polish to your application but also ensures a consistent look and feel across all pages. With the right combination of HTML, CSS, and JavaScript, you can create a footer that meets the unique needs of your application and contributes to a seamless user experience.
