Document processing with LyX and SGML:
Prev	Chapter 4. Required preliminary steps	Next

4.12. Set up custom headers and footers

Use part1, part2 and part3 to customize your headers and footers. You will not need to touch part1, unless you wish to change the DOCTYPE setting. You will, however, certainly want to adapt part2 (for the headers) and part3 (for the footers). These files are full-blown examples that demonstrate what you can do to enhance navigation and searching:

For the header (part2):

Add META tags, for example for the character encoding (Chapter 11), the CSS (Section 4.14) or favicon:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="ck-style.css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

Add a logo image:

<a href="http://www.karakas-online.de" target="_top"><img src="images/karakas-online.png" alt="Karakas Online" border="0"></a>

Add a site search field that lets your visitors do a site-specific Google search. First some Javascript constants:

<div align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-2303179107222659";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_color_border = "B4D0DC";
google_color_bg = "ECF8FF";
google_color_link = "0000CC";
google_color_url = "008000";
google_color_text = "6F6F6F";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

and then a few lines further down, the actual search field:

<div class="BREADCRUMBS">
<table summary="Breadcrumbs" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30%" align="left" valign="bottom">
  <a href="http://_DOMAIN_" accesskey="S">Start</a>
  <img src="images/small.arrow.outline.gif" alt="->" width="18" height="9" hspace="2" />
  <a href="_HOMEFILE_" accesskey="H" target="_top">_TITLE_</a>
  <img src="images/small.arrow.outline.gif" alt="->" width="18" height="9" hspace="2" />
  <a href="_FILENAME_" accesskey="T" target="_top">This page</a>
</td>
<td width="40%" align="center" valign="bottom">
  <!-- SiteSearch Google -->
  <FORM method=GET action='http://www.google.com/custom'>
  <input type=hidden name=domains value='karakas-online.de'><INPUT TYPE=text name=q size=31 maxlength=255 value=''>
  <INPUT type=submit name=sa VALUE='Search'>
  <input type=hidden name=sitesearch value='karakas-online.de'>
  <input type=hidden name=client value='pub-2303179107222659'>
  <input type=hidden name=forid value='1'>
  <input type=hidden name=channel value='5156821179'>
  <input type=hidden name=ie value='ISO-8859-1'>
  <input type=hidden name=oe value='ISO-8859-1'>
  <input type=hidden name=safe value='active'>
  <input type=hidden name=cof value='GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:44;LW:468;L:http://_DOMAIN_/_DIRNAME_/images/karakas-online.png;S:http://www.karakas-online.de;FORID:1;'>
  <input type=hidden name=hl value='en'>
  </FORM>
  <!-- SiteSearch Google -->
</td>
<td width="30%" align="right" valign="bottom">
  <a href="./" accesskey="M" target="_top">Display Sitemenu</a>
</td>
</tr>
</table>
</div>

Add translation links for the current page. But how does the header know the link to the current page? Here's where the constants DOMAIN, DIRNAME and FILENAME come into play:

<div class="translatelink" align="right">
<a href="http://babelfish.altavista.com/babelfish/tr?doit=done&amp;url=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;lp=en_zh">chinese</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cfr&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">french</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cde&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">german</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cit&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">italian</a>
 |
<a href="http://babelfish.altavista.com/babelfish/tr?doit=done&amp;url=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;lp=en_ja">japanese</a>
 |
<a href="http://babelfish.altavista.com/babelfish/tr?doit=done&amp;url=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;lp=en_ko">korean</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cpt&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">portuguese</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Ces&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">spanish</a>
</div>

DOMAIN is set in the .start file (see Section 4.11), DIRNAME is replaced in lyxtox with the parameter you passed it:

${SED} -e "s/_DIRNAME_/$1/g" part2_1.tmp > part2_2.tmp

Since the parameter you pass to lyxtox is supposed to be the basename of your .lyx file, which will also become the name of the directory where everything is going to be placed, you can see that DIRNAME will be replaced with the right directory name (actually, what will be replaced is _DIRNAME_, but the underscores are there only to make sure there is no other DIRNAME variable by accident there). Finally, FILENAME is determined in lyxtox as the basename of the HTML file:

${SED} -e "s/_FILENAME_/${BASENAME}/g" part2_2.tmp > part2_3.tmp

Add some “breadcrumbs”, i.e. navigation links separated by a “|”. Here the links point to the various formats of the document, with a nice example of how to mail the current page to a friend using a custom text and the right page link:

<div class="BREADCRUMBS">
<table summary="Breadcrumbs" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom">
</td>
<td width="10%" align="center" valign="bottom">
</td>
<td width="45%" align="right" valign="bottom">
<a href="mailto:?Subject=Page%20recommendation&amp;Body=I%20thought%20you%20might%20find%20this%20URL%20interesting:%20http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_" onMouseover="window.status='Recommend this page to a friend'; return true;" onMouseout="window.status=''; return true" title="Recommend this page to a friend">Send to a friend&nbsp;</a>&nbsp;|&nbsp;<a href="_DIRNAME_.pdf" title="The *whole* document in PDF format">PDF&nbsp;</a>&nbsp;|&nbsp;<a href="_DIRNAME_.rtf" title="The *whole* document in RTF format">RTF&nbsp;</a>&nbsp;|&nbsp;<a href="_DIRNAME_.ps.gz" title="The *whole* document in gzipped Postscript (PS.GZ) format">PS&nbsp;</a>&nbsp;|&nbsp;<a href="_DIRNAME_.txt" title="The *whole* document in plain text (TXT) format">TXT&nbsp;</a>&nbsp;|&nbsp;<a href="_FORMATSFILE_" title="Other formats of this document">Other formats</a>
</td>
</tr>
</table>
</div>

For the footer:

Add a timestamp and a “permalink” (a permanent link, which people can use to link to the page):

<div class="colophon">
<table summary="Colophon" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30%" align="left" valign="bottom">
Last updated _DATE_
</td>
<td width="40%" align="center" valign="bottom">
Permalink: <a href="http://_DOMAIN_/_DIRNAME_/_FILENAME_" title="Permanent link to this page">http://_DOMAIN_/_DIRNAME_/_FILENAME_</a>
</td>
<td width="30%" align="right" valign="bottom">
_COPYRIGHT_
</td>
</tr>
</table>
</div>

Add breadcrumb navigation links (“Start”, “Document title”, “This page”) and Google site search:

<div class="BREADCRUMBS">
<table summary="Breadcrumbs" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30%" align="left" valign="bottom">
  <a href="http://_DOMAIN_" accesskey="S">Start</a>
  <img src="images/small.arrow.outline.gif" alt="->" width="18" height="9" hspace="2" />
  <a href="_HOMEFILE_" accesskey="H" target="_top">_TITLE_</a>
  <img src="images/small.arrow.outline.gif" alt="->" width="18" height="9" hspace="2" />
  <a href="_FILENAME_" accesskey="T" target="_top">This page</a>
</td>
<td width="40%" align="center" valign="bottom">
  <!-- SiteSearch Google -->
  <FORM method=GET action='http://www.google.com/custom'>
  <input type=hidden name=domains value='karakas-online.de'><INPUT TYPE=text name=q size=31 maxlength=255 value=''>
  <INPUT type=submit name=sa VALUE='Search'>
  <input type=hidden name=sitesearch value='karakas-online.de'>
  <input type=hidden name=client value='pub-2303179107222659'>
  <input type=hidden name=forid value='1'>
  <input type=hidden name=channel value='5156821179'>
  <input type=hidden name=ie value='ISO-8859-1'>
  <input type=hidden name=oe value='ISO-8859-1'>
  <input type=hidden name=safe value='active'>
  <input type=hidden name=cof value='GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:44;LW:468;L:http://_DOMAIN_/_DIRNAME_/images/karakas-online.png;S:http://_DOMAIN_;FORID:1;'>
  <input type=hidden name=hl value='en'>
  </FORM>
  <!-- SiteSearch Google -->
</td>
<td width="30%" align="right" valign="bottom">
  <a href="./" accesskey="M" target="_top">Display Sitemenu</a>
</td>
</tr>
</table>
</div>

Add translation links to the current page. These are the same as the ones for the header, only that they are centered instead of being aligned to the right of the page:

<div class="translatelink" align="center">
<a href="http://babelfish.altavista.com/babelfish/tr?doit=done&amp;url=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;lp=en_zh">chinese</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cfr&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">french</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cde&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">german</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cit&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">italian</a>
 |
<a href="http://babelfish.altavista.com/babelfish/tr?doit=done&amp;url=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;lp=en_ja">japanese</a>
 |
<a href="http://babelfish.altavista.com/babelfish/tr?doit=done&amp;url=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;lp=en_ko">korean</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Cpt&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">portuguese</a>
 |
<a href="http://translate.google.com/translate?u=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;langpair=en%7Ces&amp;hl=en&amp;ie=ISO-8859-1&amp;prev=%2Flanguage_tools">spanish</a>
</div>
Once again, the DOMAIN, DIRNAME and FILENAME constants come into play.

Finally, add some icons. Some of them point to the validator services of the W3C (see Chapter 8). These are also nice examples of how to compute the right link that is to be sent to the validator so that it will be able to validate the current page: you have to use “http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_” for the CSS validator, but is is enough to use “http://validator.w3.org/check/referer” for the HTML validator. And don't miss the special link to “validate your browser”! :-)

<div class="imagelink">
<table width="100%">
<tr align="center">
<td width="30%" align="left" valign="middle">
<a href="http://validator.w3.org/check/referer" target="_top">
<img border="0" src="images/valid-html401.png" alt="Valid HTML 4.01! Click here to validate current page." title="Click here to validate the HTML code of this page"></a>
</td>
<td width="40%" align="center" valign="middle" colspan="3">
<a href="http://www.anybrowser.org/campaign/" target="_top">
<img border="0" src="images/w3c_ab.png" alt="Best viewed with ANY browser!" title="Click here to validate your browser"></a>
</td>
<td width="30%" align="right" valign="middle">
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F_DOMAIN_%2F_DIRNAME_%2F_FILENAME_&amp;warning=1&amp;profile=css3&amp;usermedium=all" target="_top">
<img border="0" src="images/valid-css.png" alt="Valid CSS! Click here to validate current CSS." title="Click here to validate the CSS of this page"></a>
</td>
</tr>
<tr align="center">
<td align="left" valign="middle">
</td>
<td align="center" valign="middle">
<a href="http://www.gnu.org/copyleft/fdl.html" target="_top">
<img border="0" src="images/gnu-fdl.png" alt="This is a free document, published under the <acronym>GNU</acronym> Free Documentation Licence" title="GNU Free Documentation Licence"></a>
</td>
<td align="center" valign="middle">
<a href="http://counter.li.org" target="_top">
<img border="0" src="images/linux_user_314103.png" alt="Linux Counter icon. Chris Karakas is  <productname>Linux</productname> Counter registered user #314103" title="Linux Counter"></a>
</td>
<td align="center" valign="middle">
<a href="http://www.fsf.org" target="_top">
<img border="0" src="images/powered-by-free-software.png" alt="This is a free document, made with free software" title="Free Software"></a>
</td>
<td align="right" valign="middle">
</td>
</tr>
</table>
</div>

	*How to set the constants in the part files**
	Do not set the DOMAIN, DIRNAME and FILENAME constants in the part* files. Set only TITLE, DOMAIN, FORMATSFILE, COPYRIGHT and HOMEFILE in the .start file. DIRNAME and FILENAME are computed automatically in lyxtox.

Prev	Home	Next
Set up your start and end scripts	Up	Set up your bibliographic database