Google Git
Sign in
apache / lenya / a5d955479e9b18e95769f2e099895787404c4036 / . / docs / 1_2_x / how-to / look_and_feel.html
blob: 658af2d3ec223822601b267f3b1766b381d6b8c5 [file] [log] [blame]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="Apache Forrest" name="Generator">
<meta name="Forrest-version" content="0.9-dev">
<meta name="Forrest-skin-name" content="pelt">
<title>Look and Feel How-To</title>
<link type="text/css" href="../../../skin/basic.css" rel="stylesheet">
<link media="screen" type="text/css" href="../../../skin/screen.css" rel="stylesheet">
<link media="print" type="text/css" href="../../../skin/print.css" rel="stylesheet">
<link type="text/css" href="../../../skin/profile.css" rel="stylesheet">
<script src="../../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
<link rel="shortcut icon" href="../../../favicon.ico">
</head>
<body onload="init()">
<script type="text/javascript">ndeSetTextSize();</script>
<div id="top">
<!--+
|breadtrail
+-->
<div class="breadtrail">
<a href="http://www.apache.org/">apache</a> &gt; <a href="http://lenya.apache.org/">lenya</a><script src="../../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
</div>
<!--+
|header
+-->
<div class="header">
<!--+
|start group logo
+-->
<div class="grouplogo">
<a href=""><img class="logoImage" alt="Lenya" src="../../../images/apache-lenya-light.png" title=""></a>
</div>
<!--+
|end group logo
+-->
<!--+
|start Project Logo
+-->
<div class="projectlogo">
<a href=""></a>
</div>
<!--+
|end Project Logo
+-->
<!--+
|start Search
+-->
<div class="searchbox">
<form action="http://www.google.com/search" method="get" class="roundtopsmall">
<input value="lenya.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with ');" size="25" name="q" id="query" type="text" value="Search the site with ">&nbsp;
<input name="Search" value="Search" type="submit">
</form>
</div>
<!--+
|end search
+-->
<!--+
|start Tabs
+-->
<ul id="tabs">
<li>
<a class="unselected" href="../../../index.html">Project</a>
</li>
<li>
<a class="unselected" href="../../../docs/index.html">Developer</a>
</li>
<li>
<a class="unselected" href="../../../community/index.html">Community</a>
</li>
<li>
<a class="unselected" href="../../../docs/2_0_x/index.html">Version 2.0</a>
</li>
<li class="current">
<a class="selected" href="../../../docs/1_2_x/index.html">Version 1.2</a>
</li>
</ul>
<!--+
|end Tabs
+-->
</div>
</div>
<div id="main">
<div id="publishedStrip">
<!--+
|start Subtabs
+-->
<div id="level2tabs"></div>
<!--+
|end Endtabs
+-->
<script type="text/javascript"><!--
document.write("Last Published: " + document.lastModified);
// --></script>
</div>
<!--+
|breadtrail
+-->
<div class="breadtrail">
&nbsp;
</div>
<!--+
|start Menu, mainarea
+-->
<!--+
|start Menu
+-->
<div id="menu">
<div onclick="SwitchMenu('menu_selected_1.1', '../../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../../skin/images/chapter_open.gif');">Version 1.2</div>
<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
<div class="menuitem">
<a href="../../../docs/1_2_x/index.html">Index</a>
</div>
<div onclick="SwitchMenu('menu_1.1.2', '../../../skin/')" id="menu_1.1.2Title" class="menutitle">Installation</div>
<div id="menu_1.1.2" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/installation/index.html">Download</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/installation/subversion.html">Subversion Access</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/installation/source_version.html">Install Instructions</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.3', '../../../skin/')" id="menu_1.1.3Title" class="menutitle">Tutorial</div>
<div id="menu_1.1.3" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/index.html">Introduction</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/understanding_lenya.html">1. Understanding Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/installing_lenya.html">2. Installing Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/anatomy_of_the_pipeline.html">3. Anatomy of the Pipeline</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/editing_in_lenya.html">4. Editing in Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/custom_navigation.html">5. Custom Navigation in Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/mod_proxy_and_lenya.html">6a. Mod Proxy and Lenya</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/tutorial/mod_proxy_and_lenya_continued.html">6b. Mod Proxy and Lenya</a>
</div>
</div>
<div onclick="SwitchMenu('menu_selected_1.1.4', '../../../skin/')" id="menu_selected_1.1.4Title" class="menutitle" style="background-image: url('../../../skin/images/chapter_open.gif');">How-To</div>
<div id="menu_selected_1.1.4" class="selectedmenuitemgroup" style="display: block;">
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/faq.html">FAQ</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/new_publication.html">New Publication</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/deploy_publication.html">Deploy Publication</a>
</div>
<div class="menupage">
<div class="menupagetitle">Look and Feel</div>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/custom_resourcetype.html">Custom Resource Type</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/new_mime_type.html">Adding Mime Types</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/site_navigation.html">Site Navigation</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/ldap_authentication.html">LDAP Authentication</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/cms_menus.html">CMS Menus</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/cms_screens.html">CMS Screens</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/search.html">Search Publications</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/external_data.html">External Data</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/how-to/unittests.html">Unit Tests</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5', '../../../skin/')" id="menu_1.1.5Title" class="menutitle">Components</div>
<div id="menu_1.1.5" class="menuitemgroup">
<div onclick="SwitchMenu('menu_1.1.5.1', '../../../skin/')" id="menu_1.1.5.1Title" class="menutitle">Access&nbsp;Control</div>
<div id="menu_1.1.5.1" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/terms.html">Basic Terms</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/accesscontrollers.html">Access&nbsp;Controllers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/accesscontrollerresolvers.html">Access Controller Resolvers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/authenticators.html">Authenticators</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/authorizers.html">Authorizers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/policymanagers.html">Policies and Policy&nbsp;Managers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/accreditablemanagers.html">Accreditable&nbsp;Managers</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/accesscontrol/ssl.html">SSL Encryption</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.2', '../../../skin/')" id="menu_1.1.5.2Title" class="menutitle">Authoring</div>
<div id="menu_1.1.5.2" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/authoring/adding-document-creator.html">Adding a new document creator</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/authoring/image-upload.html">Image Upload</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/authoring/openoffice.html">OpenOffice</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.3', '../../../skin/')" id="menu_1.1.5.3Title" class="menutitle">Deployment</div>
<div id="menu_1.1.5.3" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/deployment/proxying.html">Proxying</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.4', '../../../skin/')" id="menu_1.1.5.4Title" class="menutitle">Editors</div>
<div id="menu_1.1.5.4" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/htmlform.html">HTML Form Editor</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/1form.html">HTML One Form Editor</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/bxe.html">Bitflux Editor</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/kupu.html">Kupu</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/editors/xopus.html">Xopus</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.5', '../../../skin/')" id="menu_1.1.5.5Title" class="menutitle">Layout</div>
<div id="menu_1.1.5.5" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/navigation.html">Navigation</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/xhtml-templating.html">XHTML templating</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/static-resources.html">Serving static resources</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/layout/lenya-menubar.html">Lenya Menubar</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.6', '../../../skin/')" id="menu_1.1.5.6Title" class="menutitle">Publication</div>
<div id="menu_1.1.5.6" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/publication/pageenvelopemodule.html">PageEnvelopeModule</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/publication/siteTree.html">Site tree</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.7', '../../../skin/')" id="menu_1.1.5.7Title" class="menutitle">Resource&nbsp;Types</div>
<div id="menu_1.1.5.7" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/resource-types/resource-types.html">Resource&nbsp;Types</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.8', '../../../skin/')" id="menu_1.1.5.8Title" class="menutitle">Revision Control</div>
<div id="menu_1.1.5.8" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/revisioncontroller.html">Revision Controller</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/rcml.html">RCML</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/checkin.html">Check In</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/checkout.html">Check Out</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/version.html">Revisions</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/revisioncontrol/rollback.html">Rollback</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.9', '../../../skin/')" id="menu_1.1.5.9Title" class="menutitle">Repository</div>
<div id="menu_1.1.5.9" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/repository/index.html">WebDAV Servers</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.10', '../../../skin/')" id="menu_1.1.5.10Title" class="menutitle">Search</div>
<div id="menu_1.1.5.10" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/search/lucene.html">Searching with Lucene</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.11', '../../../skin/')" id="menu_1.1.5.11Title" class="menutitle">URI Handling</div>
<div id="menu_1.1.5.11" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/uri-handling/URIParametrizer.html">URI Parametrizer</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/uri-handling/standardURI.html">URI Scheme</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/uri-handling/usecases.html">Usecases</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.12', '../../../skin/')" id="menu_1.1.5.12Title" class="menutitle">Asset Management</div>
<div id="menu_1.1.5.12" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/asset-management/management.html">Asset Management</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.13', '../../../skin/')" id="menu_1.1.5.13Title" class="menutitle">Link Management</div>
<div id="menu_1.1.5.13" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/link-management/link-management.html">Link Management</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.14', '../../../skin/')" id="menu_1.1.5.14Title" class="menutitle">Meta Data</div>
<div id="menu_1.1.5.14" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/metadata/metadata.html">Meta Data Handling</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.15', '../../../skin/')" id="menu_1.1.5.15Title" class="menutitle">Multilingual Documents</div>
<div id="menu_1.1.5.15" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/multilingual/multilingual.html">Multilingual Document Handling</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.16', '../../../skin/')" id="menu_1.1.5.16Title" class="menutitle">Tasks</div>
<div id="menu_1.1.5.16" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/concept.html">The Task Concept</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/defining.html">Defining Tasks</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/taskaction.html">The TaskAction</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/scheduling.html">Scheduling a Task</a>
</div>
<div onclick="SwitchMenu('menu_1.1.5.16.5', '../../../skin/')" id="menu_1.1.5.16.5Title" class="menutitle">Included tasks</div>
<div id="menu_1.1.5.16.5" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/anttask.html">AntTask</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/publisher.html">DefaultFilePublisher</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/exporter.html">StaticHTMLExporter</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/mailtask.html">MailTask</a>
</div>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/tasks/development.html">Developing Tasks</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.17', '../../../skin/')" id="menu_1.1.5.17Title" class="menutitle">Workflow</div>
<div id="menu_1.1.5.17" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/terms.html">Terms</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/state-machine.html">The State Machine</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/configuration.html">Configuration</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/workflow/implementation.html">Implementation</a>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.5.18', '../../../skin/')" id="menu_1.1.5.18Title" class="menutitle">Site Management</div>
<div id="menu_1.1.5.18" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/archive.html">Archive</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/copy.html">Copy</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/deactivate.html">Deactivate</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/delete.html">Delete</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/deletetrash.html">Delete the trash</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/move.html">Move</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/moveupdown.html">Move Up/Down</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/rename.html">Rename</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/components/sitemanagement/restore.html">Restore</a>
</div>
</div>
</div>
<div onclick="SwitchMenu('menu_1.1.6', '../../../skin/')" id="menu_1.1.6Title" class="menutitle">Miscellaneous</div>
<div id="menu_1.1.6" class="menuitemgroup">
<div class="menuitem">
<a href="../../../docs/1_2_x/misc/namespaces.html">Namespaces</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/misc/reserved_names.html">Reserved Names</a>
</div>
<div class="menuitem">
<a href="../../../docs/1_2_x/misc/xinclude-processor.html">XInclude Processor</a>
</div>
</div>
<div class="menuitem">
<a href="../../../apidocs/1.2/index.html">1.2 API (Javadoc)</a>
</div>
</div>
<div id="credit"></div>
<div id="roundbottom">
<img style="display: none" class="corner" height="15" width="15" alt="" src="../../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
<!--+
|alternative credits
+-->
<div id="credit2">
<a href="http://wiki.apache.org/lenya/MeetingFreiburg2008"><img border="0" title="Meeting Freiburg 2008" alt="Meeting Freiburg 2008 - logo" src="../../../images/apache-lenya-meeting-freiburg-2008.png" style="width: 160px;height: 40px;"></a>
</div>
</div>
<!--+
|end Menu
+-->
<!--+
|start content
+-->
<div id="content">
<div title="Portable Document Format" class="pdflink">
<a class="dida" href="look_and_feel.pdf"><img alt="PDF -icon" src="../../../skin/images/pdfdoc.gif" class="skin"><br>
PDF</a>
</div>
<h1>Look and Feel How-To</h1>
<div id="front-matter">
<div id="minitoc-area">
<ul class="minitoc">
<li>
<a href="#Changing+fonts+and+colors">Changing fonts and colors</a>
</li>
<li>
<a href="#Replacing+the+page+header">Replacing the page header</a>
</li>
<li>
<a href="#Altering+navigational+components+%28Tabs%2C+Breadcrumbs+and+Menus%29">Altering navigational components (Tabs, Breadcrumbs and Menus)</a>
</li>
</ul>
</div>
</div>
<p>To change your copy of the Default publication into your publication and have some first successes, you probably want to work on two things: </p>
<ol>
<li>
<p>Change the color scheme and fonts to your own taste. </p>
</li>
<li>
<p>Replace the page header with your own one. </p>
</li>
</ol>
<p>More advanced topics that are not (yet) covered here might be: </p>
<ul>
<li>
<p> Put the menu somewhere else </p>
</li>
<li>
<p> Use a different menu style </p>
</li>
<li>
<p> Define different and more complex page templates </p>
</li>
</ul>
<p>As a first step you will feel much better once you managed 1. and 2. as you will be able to show your new publication to someone and it will not look like just a sample. </p>
<a name="N10036"></a><a name="Changing+fonts+and+colors"></a>
<h2 class="h3">Changing fonts and colors</h2>
<div class="section">
<p>Fonts and colors are defined by a Cascading Style Sheet (CSS). For now, don't try to understand the nested sitemaps to find it. Go straight to $LENYA_DIR/your_pub_name/resources/shared/css/page.css. </p>
<p>Though it says "resources/shared" this is not shared among different publications. In case you mess with it you can always go ahead and copy $LENYA_DIR/default/resources/shared/css/page.css and you are back to the original one. </p>
<p>Make any changes, reload in your browser and you will see them. That's it for here. </p>
<p>Note: I assume you are familiar with CSS and how to use them to create dynamically looking menus in pure HTML. If not, Google will be your best friend. This is nothing specific to Lenya.
For an introduction to CSS try the <a href="http://www.nypl.org/styleguide/css/"> NYPL online Style Guide</a>, for other good tutorials <a href="http://www.alistapart.com/"> a list apart</a> and for invaluable hints and quirks <a href="http://css-discuss.incutio.com/?page=FrontPage"> css-discuss</a>. </p>
</div>
<a name="N10055"></a><a name="Replacing+the+page+header"></a>
<h2 class="h3">Replacing the page header</h2>
<div class="section">
<p>Have a look at the file $LENYA_DIR/your_pub_name/xslt/page2xhtml.xsl and look for this piece in it: </p>
<pre class="code">
&lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;
&lt;tr&gt;
&lt;td id="publication-title"&gt;Welcome to the Default Publication!&lt;/td&gt;
&lt;td id="project-logo"&gt;&lt;img src="{$root}/images/project-logo.png"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>This is the page header. Put in what you want. It's that simple! </p>
</div>
<a name="N10066"></a><a name="Altering+navigational+components+%28Tabs%2C+Breadcrumbs+and+Menus%29"></a>
<h2 class="h3">Altering navigational components (Tabs, Breadcrumbs and Menus)</h2>
<div class="section">
<p>As long as it is sufficient to change the fonts and colors or navigational elements such as Breadcrumbs, Tabs oder Menus you can get away with changes to the CSS. In case you decide you want to go without some of them (for example you might not even want any breadcrumbs on your site) you can change that by modifying the XSLT as described above. </p>
<p>But in case you want to change the <strong>behaviour</strong> of the navigational elements it's getting a bit more complex. Changing the behaviour would mean for example you would want the whole menu tree to be shown at all times, not just the top level menu items with only the subitems of the currently selected item. </p>
<p>The navigational elements are built from the file sitetree.xml (look for it in the directory structure) using XSLTs that are usually global to Lenya and therefore not part of you publication. But the global XSLTs can be overridden with local ones quite easily. </p>
<p>All it takes is to create the files </p>
<pre class="code">
$LENYA_DIR/lenya/pubs/__your_pub_name__/lenya/xslt/navigation/breadcrumbs.xsl
$LENYA_DIR/lenya/pubs/__your_pub_name__/lenya/xslt/navigation/tabs.xsl
$LENYA_DIR/lenya/pubs/__your_pub_name__/lenya/xslt/navigation/menu.xsl
</pre>
<p>which will be used in favor of the core files </p>
<pre class="code">
$LENYA_DIR/lenya/lenya/xslt/navigation/breadcrumbs.xsl
$LENYA_DIR/lenya/lenya/xslt/navigation/tabs.xsl
$LENYA_DIR/lenya/lenya/xslt/navigation/menu.xsl
</pre>
<p>Usually, you will not want to use a completely different version of the stylesheet. So it is recommended to include the core file using <em>&lt;xsl:import/&gt;</em>. </p>
<p>This is possible because of a built-in fallback mechanism that will make Lenya use the global XSLTs in case there are no local versions inside the publication.
See the <a href="../../../docs/1_2_x/components/layout/navigation.html">Navigation Framework</a> for details on this. </p>
</div>
</div>
<!--+
|end content
+-->
<div class="clearboth">&nbsp;</div>
</div>
<div id="footer">
<!--+
|start bottomstrip
+-->
<div class="lastmodified">
<script type="text/javascript"><!--
document.write("Last Published: " + document.lastModified);
// --></script>
</div>
<div class="copyright">
Copyright &copy;
2002-2007 <a href="http://www.apache.org/licenses/LICENSE-2.0">The Apache Software Foundation.</a>
</div>
<div id="feedback">
Send feedback about the website to:
<a id="feedbackto" href="mailto:dev@lenya.apache.org?subject=Feedback%C2%A0for%C2%A0docs/1_2_x/how-to/look_and_feel.html">dev@lenya.apache.org</a>
</div>
<!--+
|end bottomstrip
+-->
</div>
</body>
</html>