Built with Apache Lenya

Look and Feel How-To

Table of Contents

Changing fonts and colors
Replacing the page header
Altering navigational components (Tabs, Breadcrumbs and Menus)

To change your copy of the Default publication into your publication and have some first successes, you probably want to work on two things:

Change the color scheme and fonts to your own taste.
Replace the page header with your own one.

More advanced topics that are not (yet) covered here might be:

Put the menu somewhere else
Use a different menu style
Define different and more complex page templates

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.

Changing fonts and colors

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.

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.

Make any changes, reload in your browser and you will see them. That's it for here.

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 NYPL online Style Guide, for other good tutorials a list apart and for invaluable hints and quirks css-discuss.

Replacing the page header

Have a look at the file $LENYA_DIR/your_pub_name/xslt/page2xhtml.xsl and look for this piece in it:

      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td id="publication-title">Welcome to the Default Publication!</td>

          <td id="project-logo"><img src="{$root}/images/project-logo.png"/></td>
        </tr>
      </table>

This is the page header. Put in what you want. It's that simple!

Altering navigational components (Tabs, Breadcrumbs and Menus)

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.

But in case you want to change the behaviour 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.

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.

All it takes is to create the files

$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

which will be used in favor of the core files

$LENYA_DIR/lenya/lenya/xslt/navigation/breadcrumbs.xsl
$LENYA_DIR/lenya/lenya/xslt/navigation/tabs.xsl
$LENYA_DIR/lenya/lenya/xslt/navigation/menu.xsl

Usually, you will not want to use a completely different version of the stylesheet. So it is recommended to include the core file using <xsl:import/>.

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 Navigation Framework for details on this.