Introduction
This guide outlines a simplified approach to create a basic custom footer for your PublicInput portal. It emphasizes structure over style, allowing you to easily integrate it with your site's existing design.
Implementation Steps
1. Basic Structure
Start by defining the footer's basic HTML structure. The example below includes sections for social media links, contact information, and additional resources.
<footer id="footer" class="footer bg-dark">
<div class="text-center">
<!-- Social Media Links -->
<h4>Follow Us</h4>
<a href="https://www.facebook.com/YourPage" target="_blank">Facebook</a> |
<a href="https://www.instagram.com/YourPage" target="_blank">Instagram</a> |
<a href="https://www.twitter.com/YourPage" target="_blank">Twitter</a>
<!-- Contact Information -->
<h4>Contact Us</h4>
<p>Email: <a href="mailto:info@yourdomain.com">info@yourdomain.com</a></p>
<p>Phone: (123) 456-7890</p>
<!-- Additional Links -->
<h4>Quick Links</h4>
<a href="/about">About Us</a> |
<a href="/services">Services</a> |
<a href="/contact">Contact</a>
</div>
</footer>
2. External Scripts (Optional)
If you're integrating external services like social media feeds or widgets, you can include the provided scripts before the <footer> block.
3. Simplify and Customize
The provided template is deliberately minimalistic, allowing for easy customization. You can add more sections as needed or modify the links to match your specific requirements.
Footers can leverage default Bootstrap 3 classes. If you need to add custom CSS rules, we recommend making these highly specific, i.e. #footer .some-class { }. If you intend to apply these classes across both portals and standard project and board pages, you can add these style to the sitewide custom CSS rules in the Settings -> Custom Styles admin interface. See Custom colors, CSS styling, headers, and footers.
4. Integration
Paste the HTML code into the footer section of your PublicInput portal's HTML/CSS editor. Adjust the placement and any specific identifiers based on your portal's structure.
There are two places to configure custom footers and headers:
For project pages, boards, and meetings: use the Custom Style tab of the Customer Settings page.
For public portals: Use the portal editor page for the portal for which you are creating the footer.