Skip to main content
All CollectionsPublic | ENGAGEMENT HUBSetup
Basic Footer Structure Template for PublicInput Portals
Basic Footer Structure Template for PublicInput Portals
R
Written by Robert Torres
Updated over 9 months ago

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:

  1. For project pages, boards, and meetings: use the Custom Style tab of the Customer Settings page.

  2. For public portals: Use the portal editor page for the portal for which you are creating the footer.

Related

Did this answer your question?