Customize Headers and Footers with App Framework

You can customize headers and footers to give your application an individualized and unique look.

Custom Headers:
There are two ways to customize the header.

1. Using data-header attribute: You can use data-header attribute on panel div and set it to the custome header tag, it will load the custom header tag with that ID for the panel. So, create a separate header tag inside the afui container and place id attribute on it and then reference the header on the panel using data-header attribute. You can populate the header tag with whatever you like to see in your header, in this example a simple button with home icon on left. With this method you can create the header once and can reference it from any panel you want or you can create separate headers for multiple panels.

Creating header once and using across multiple panels:


        <div id="afui"> 

            <div id="content">

                <div id="home" class="panel" selected="true" data-header="customheader">

                    <h3>home</h3>

                    <p>Home panel

                    </p>

                </div>

                <div id="sketch" class="panel" data-header="customheader" >

                     <h3>Sketch Pad</h3>

                     <p>Sketch Pad panel

                    </p>

                </div>

                 <div id="picture" class="panel" data-header="customheader">

                     <h3>Pictures</h3>

                     <p>Pictures panel

                    </p>

                </div>

            </div>

           

            <header id="customheader">

                <h1>Custom Header</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

      </div>

  

 
 
 
Here is how it looks:
 

Creating separate headers for multiple panels:


        <div id="afui"> 

            <div id="content">

                <div id="home" class="panel" selected="true" data-header="homeheader">

                    <h3>home</h3>

                    <p>Home panel

                    </p>

                </div>

                <div id="sketch" class="panel" data-header="sketchheader" >

                     <h3>Sketch Pad</h3>

                     <p>Sketch Pad panel

                    </p>

                </div>

                 <div id="picture" class="panel" data-header="pictureheader">

                     <h3>Pictures</h3>

                     <p>Pictures panel

                    </p>

                </div>

            </div>

           

            <header id="homeheader">

                <h1>Home</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

             <header id="sketchheader">

                <h1>Sketch</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

            <header id="pictureheader">

                <h1>Picture</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

            <div id="navbar">

                <a href="#home" id='navbar_home' class='icon home'>Home</a>

                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>

                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>

            </div>

        </div>

 

 

With this you will have separate headers like this:
 
 
 
 
 
 
2.Inlining header: Another way to create custom header is to inline the header tag in the panel content. This allows you to have unique custom header only for the panel you define the header in. With this method you don't have to create them in the afui div and reference using data-header attribute.
 


	        <div id="afui"> 

	            <div id="content">

	                <div id="home" class="panel" selected="true" data-header="homeheader">

	                    <header id="homeheader">

	                        <h1>Home</h1>

	                    </header>

	                    <h3>home</h3>

	                    <p>Home panel

	                    </p>

	                </div>

	                <div id="sketch" class="panel" data-header="sketchheader" >

	                     <header id="sketchheader">

	                        <h1>Sketch</h1>

	                        <a id="backButton" href="javascript:;" class="button" ></a>

	                    </header>

	                     <h3>Sketch Pad</h3>

	                     <p>Sketch Pad panel

	                    </p>

	                </div>

	                 <div id="picture" class="panel" data-header="pictureheader">

	                    <header id="pictureheader">

	                        <h1>Picture</h1>

	                        <a id="backButton" href="javascript:;" class="button" ></a>

	                    </header>

	                     <h3>Pictures</h3>

	                     <p>Pictures panel

	                    </p>

	                </div>

	            </div>

	           

	            <div id="navbar">

	                <a href="#home" id='navbar_home' class='icon home'>Home</a>

	                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>

	                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>

	            </div>

	        </div>

	 


 
 
 
 
Custom Footers:
The footers can also be customized in two ways similar to headers.
 
1. Using data-footer attribute: For custom footers, create a footer tag inside the afui div and reference it from the panel using data-footer attribute. 


	<div id="afui">

	<div id="content">

	    <div class="panel" id="panel1" data-footer="myfooter">

	        <h3>panel contents</h3>

	    </div>

	</div>

	<footer id="myfooter">

	    <h1>Custom footer</h1>

	    <a class="button" style="float:left;" class="icon home"></a>

	</footer>

	</div>

	
 
2. Inlining footer: Similar to header another way to create custom footer is to inline the footer tag in the panel content. This allows you to have unique custom footer only for the panel you define the footer in. With this method you don't have to create them in the afui div and reference using data-footer attribute.
 

<div id="afui">


	<div id="content">

	    <div class="panel" id="panel1">

	        

	        <footer>

	            <h1>Custom Footer</h1>

	            <a class="button" style="float:left;" class="icon home"></a>

	        </footer>

	 

	        <h3>Panel content </h3>

	    </div>

	</div>

	</div>

	
 
 
 
To learn more about App Framework and links to related articles, visit Getting Started with App Framework.