Search:     Advanced search

Managing and Customizing Header and Footer

Article ID: 113
Last updated: 05 Aug, 2012
Revision: 7
Views: 0

Headers and footers are areas in the top and bottom margins of each page in a document. 

The HTML5 HEADER and FOOTER elements are new elements added to help web designers better define the semantic structure of their web pages. According to the HTML5 specification, the HEADER element represents a group of introductory or navigational aids. And the FOOTER element represents a footer for the nearest ancestor sectioning content or sectioning root. It typically contains information about the section, including the author, related documents, copyright data, and so on.

The HEADER and FOOTER elements are not sectioning elements. They do not change the outline of the document and they don’t create new sections. But any headings inside of them create implied sections. 

Layout File is located at  application/layouts/scripts/<YourTemplateDir>/layout.phtml 

Managing Header Block(s)

Studies show that the website header is one of the first things a visitor sees on your website. That is mainly due to the way we are used to browser information on the computer presented from top to bottom, and due to the way HTML is built with the header being the first thing it’s loading on the page. Thus the importance of the header.


A Sample Header

Header Source File

A visually appealing header design can assist in this department. To further add to its importance, a header often contains the website’s navigation and logo. Having solid, user-friendly navigation facilitates the browsing of your content and keeps users on your site for longer.

The HEADER typically contains: 

  1. At least one heading element (H1–H6 and HGROUP)
  2. Logo or icon
  3. By-line or authorship information
  4. CSS / JS 

But none of this information is required. You can define a HEADER with whatever content you feel is necessary and semantically part of the header of that section or the page . 


Optional Top Bar

Cascading Style Sheets (CSS)

Managing Footer Block(s)

A website footer is like a book’s foot note. When you need more information, usually you find it there. In the case of a website, a footer usually features copyright information, a second navigation and in some cases contact details. But the footer has a more important role than that. If a visitor has made it to the bottom of the page, that tends to mean they are hooked. They have gone through your offerings, and are now looking for more. So it is important to keep that in mind as you build yours.

A Sample Footer

Footer Source File

TThe FOOTER typically contains:

  1. Copyright information
  2. Sitemap
  3. Contact information
  4. Back to top links
  5. By-line or authorship information
  6. Related documents
  7. CSS  /  JS
And, like the HEADER, none of this information is required. You can define a FOOTER with whatever content you feel is necessary and semantically part of the footer of that section or the page.

A Sample Footer

Footer Source File

Styles and the HEADER and FOOTER Elements

The HEADER and FOOTER elements make no changes to the style of the web page. A HEADER will not automatically display at the top of the page and a FOOTER will not automatically display at the bottom of the page. These elements are semantic to represent certain areas of the page or section. 

Layout File :    

This means that you need to provide styles for your HEADER and FOOTER elements if you want them to have a different look to them.

Custom CSS Coding

Location of image files

Click Here to visit our Video Tutorials for more details.

This article was:  
Also listed in
folder FAQ -> General
folder Modules Wise Documentation -> Introduction
folder Site Building Guide

Prev   Next
Managing comments and feedback     Architecture of Admin Template for CSS Customization.