Setting Up The Pro-Footer IFrame Footer

Editing website template footer files

Applicable Templates
Information on this page is only for templates with a "footer.htm" inside the main template folder. If your "footer.htm" is inside the includes folder see: jQuery includes footer editing.


Editing the footer.htm
Edit this webpage the same way as you would any template HTML page. You can use a plain text editor or wysiwyg software. The "footer.htm" is not responsive and will hide on smartphones in responsive templates that include a "media-queries.css" using the class ".footerhide".


IFrame height, width & colors
Edit the ".footer-height" or ".footer-frame" class in the "FOOTER OPTIONS" section in your .css file(s) to adjust the footer height. All other footer css code (colors, fonts) will also be in the css "FOOTER OPTIONS" section.


Troubleshooting:

• Missing or cut off text or images: Edit the height of the ".footer-height" or ".footer-frame" class.
• Footer not displaying correctly after an edit: You may have a jQuery include style footer. See jQuery includes.
• Areas not aligned: Perhaps you are using an image or element that is too wide for the footer. Try making your footer image smaller. Shorten really long link names. Use smaller text for long titles.
• Areas not aligned: Your HTML editor is adding fixed widths in pixels to the tables in the "footer.htm" page. See the margins support page for help.
• Items not visible or cut off: Perhaps your footer IFrame is too short in height. Edit the height of the ".footer-height" or ".footer-frame" class.
• Links open directly inside the footer: You need to use target link "_top" for all "footer.htm" links. Edit links with target code like the following:
  
  <a href="index.html" target="_top">Home</a>
  
  See: Target links support