How to Create Custom Headers and Footers

From AMember Pro Manual

Jump to: navigation, search

The easiest way to create custom header and footer files is to start with an existing HTML page from your site. Follow these steps:

  • Open an existing page on your site and save it in a new name - say amtemplate.html
  • Remove all the content you do not wish to include in the aMember pages (keep it just common header and footer).
  • You need to change all the urls in the HTML from relative to absolute. Links, image paths and so on must all be changed. For example if you have a link to your home page that reads <a href="index.html"> this must be changed to <a href="http://www.yoursite.com/index.html">
  • Similarly if you have an image called using <img src="../images/image.gif"> it needs to be amended to <img src="image.gif"> (Alternatively you can edit all URLs to be relative from the root. This means all will begin with a forward slash - eg /images/image.gif)
  • From the aMember template file /templates/header.html, copy the CSS information into the head area of your page.
  • Now write the word HERE in the part of the page where you want the script pages to appear, this is usually the main part of the page.
  • Edit your file and add somewhere between <head> and </head> : 
<link rel="stylesheet" type="text/css" 
        href="{$config.root_surl}/templates/css/reset.css" />
    <link rel="stylesheet" type="text/css" 
        href="{$config.root_surl}/templates/css/amember.css" />
    <link rel="stylesheet" type="text/css" 
        href="{$config.root_surl}/templates/css/site.css" />
  • Open your page with a text editor.
  • The content of the page which appears above the word HERE is your header - copy it into a new file and save as header.html
  • The content of the page which appears below the word HERE is your footer - copy it into a new file and save as footer.html
  • Replace the aMember files amember/templates/header.html and amember/templates/footer.html with your new ones - don't forget to back up the originals first!
Retrieved from "http://manual.amember.com/How_to_Create_Custom_Headers_and_Footers"