Custom Page Headers and Footers

Headers

You can add custom HTML to appear above every forum page. For example, you might want to provide links or a logo. Keep in mind that any images have to be hosted on a site that you provide, as there is no means to upload it into POP Forums. Also keep in mind that POP Forums will strip out any script or iframe tags, so they don't interfere with the operation of the forum or introduce a vulnerability. You can however take advnatage of Bootstrap styling and menus, since they're already loaded into the forum.

To insert custom HTML:

  • Log in to manage.popforums.com.
  • Click the "manage" button next to the forum you want to add a custom header to.
  • Click the "customize" tab.
  • Click "custom HTML header."
  • Paste the HTML that you want to display into the box.
  • Click the "save" button.
  • Visit your live forum and see the results. If it doesn't look right, please follow the steps above to edit your HTML.

POP Forums does not support debugging your custom HTML. It's up to you (and your designers and code gurus) to get the look right.

Integrating with existing navigation

POP Forums has a consistent navigation bar at the top of every page that uses Bootstrap's responsive navbar system. It's easy to integrate your own navigation with it. To do this, you'll need to implement two things. First, you'll need a nav element with all of the subelements and CSS as required by Bootstrap (see the Bootstrap documentation) in your custom header. Be sure to include the navbar-toggler button with the attribute data-target=".navbar-collapse", because that's what will expand/contract both the native forum navigation and your own.

Second, you'll need to add custom CSS. The resulting markup will mean there are two "hamburger" buttons when you're viewing on small screens, so you'll have to hide the one that is part of the forum itself using CSS:

#ForumContainer .navbar-toggler {
  display: none;
}
        

Including your own CSS can be achieved using Custom CSS.

Footers

Footers work in exactly the same way, but you'll navigate to "custom HTML footer" in the steps above.