This tutorial shows you how to set up a header and footer bar using the Leggero-v2 style (FlatPress fp-1.3.dev [master]), so you can also place widgets there later.

1. Create a new file widgetstop.tpl for the header in /fp-interface/themes/leggero.

2. Fill the widgetstop.tpl file with the following content:

	<!-- beginning of Topmenu -->
		<div id="columntop">
		{widgets pos=top}	
			<div id="{$id}">
			{$content}
			</div>
		{/widgets}
 
		</div>
	<!-- end of Topmenu -->

3. Create a new file widgetsbottom.tpl in the directory /fp-interface/themes/leggero for the footer.

4. Fill the widgetstop.tpl file with the following content:

	<!-- beginning of Bottommenu -->
		<div id="columnbottom">
		{widgets pos=bottom}	
			<div id="{$id}">
			{$content}
			</div>
		{/widgets}
 
		</div>
	<!-- end of Bottommenu -->

5. In /fp-interface/themes/leggero, edit the existing files default.tpl, index.tpl, and static.tpl.

{include file="header.tpl"}
{include file="widgetstop.tpl"}
....
{include file="widgetsbottom.tpl"}
{include file="footer.tpl"}

1. Edit the file common.css in the directory /fp-interface/themes/leggero/leggero-v2/res. First, the top edge of div#main must be reduced to make room for the header.

Change the line in the NORMAL DESIGN → MAIN section to:

		margin: 0px 20px 20px 20px;

Change the line in the RESPONSIVE DESIGN → MAIN section to:

		margin: 0px auto;

2. Edit the file column.css in the directory /fp-interface/themes/leggero/leggero-v2/res. Insert the following lines in the NORMAL DESIGN section:

	/* ===== TOP BAR ===== */
	#columntop, #columnbottom {
		margin: 10px;
		background: none;
		border: none;
		font-size: 90%;
		clear: both;
		color: white;
	}
 
	#columntop ul {
		list-style-type: none;
		margin-bottom: .5em;
	}
 
	#columntop li, #columnbottom li  {
		padding: 0px 10px;
	}
 
	#columntop ul  li, #columnbottom ul li { display: inline }
 
	/* ===== BOTTOM BAR ===== */
	#columnbottom {
		text-align: center;
	}
 
	#columnbottom ul {
		list-style-type: none;
	}

Insert the following lines in the RESPONSIVE DESIGN section:

	/* ===== TOP BAR ===== */
	#columntop, #columnbottom {
		margin: 10px;
		background: none;
		border: none;
		font-size: 100%;
		text-align: center;
		color: white;
	}
 
	#columntop ul {
		list-style-type: none;
		margin-bottom: .5em;
	}
 
	#columntop li, #columnbottom li {
		padding: 0px 4px;
	}
 
	#columntop ul li, #columnbottom ul li { display: inline }
 
	/* ===== BOTTOM BAR ===== */
	#columnbottom ul {
		list-style-type: none;
	}

3. You don't want to see the top and bottom menus in the print preview. Therefore edit the file print.css in the directory /fp-interface/themes/leggero/leggero-v2/res/ and add the following at the end (from line 100):

#columntop, /* Topmenu */
#columnbottom { /* Bottommenu */
  display: none;
}

In order to place widgeds in the header and footer bar, you need to modify the file theme.conf.php in the directory /fp-interface/themes/leggero.

1. Add the following lines in the section “register widgetsets”:

register_widgetset('top'); // ad widgetstop.tpl
register_widgetset('bottom'); // ad widgetsbottom.tpl

That should have been it. Now you can e.g. create two static pages, one “topmenu” and once “bottommenu” and place them as BlogParser-Widged.

If you don’t want to do the work, you can download the finished files from the media wiki and upload them to your server.

Good luck and best regards

Frank