Skinning Lenya

Lenya 2.0 is an Open Source Java/XML Content Management System developed by Apache. In this article I'm going to briefly explain how to apply a CSS theme to the default template structure. There's also an example CSS file to help get you started.

The skin

I've put all the css you'll see below into one stylesheet. I've tried to keep it to a minimum, this is really just a skeleton to override the default css (/default/live/css/page.css) that comes with Lenya, there's obviously much more to do.

The tools

As I mentioned in an earlier article, some great tools for previewing your CSS changes on the fly and navigating the site structure are Firebug and Stylish. These tools allow you to modify the appearance of Lenya without touching any source code.

The layout

I found Lenya to be pretty straight forward and reasonably structured. They use tables, but in a minimalistic way, also there are CSS classes defined throughout making things rather predictable. One thing that was a bit obnoxious is the excessive nested elements inside the navigation tables but there's probably a good reason for this.

Modifying the header

As shown in the above figure, the default template contains the publication title and Lenya project logo. Let's hide these:

td#publication-title, td#project-logo {display:none}

And we'll add some padding at the top of the page div for a logo and header. If we set the background to an image we would adjust the height accordingly. Also, we're making sure that the tables expand to the page width and that the area where content is displayed has a white background.

div#page {
width:980px;
margin:0 auto;
padding:80px 0 0 0;
background:#555;
}
div#page table {width:980px}
div#page table td {background:#fff}

The tabs

/* Clear the stuff that's set by default */
div#tabs, div#tabs table td {background:transparent}
div.tab-pre-separator, div.tab-separator {border-bottom:none;}

/* Manage the gaps in the tabs */
div.tab-pre-separator {width:5px;}
div.tab-separator {width:2px;}
div.tab a, div.tab-selected a {margin-right:2px;}

/* Set the background of the tab table */
div#tabs table {
height:50px;
background:#777;
}

/* Set the appearance of the tabs */
div.tab a, div.tab a span, div.tab-selected a, div.tab-selected a span {
color:#222;
background:#ddd;
border:none;
padding:4px 8px;
}

/* Make the selected tab a unique color */
div.tab-selected a, div.tab-selected a span {
color:#fff;
background:#111;
}

/* The hover style */
div.tab a:hover, div.tab a:hover span {
color:#444;
background:#eee;
}
div.tab a:hover {border-color:#eee}

/* Set the tab borders */
div#tabs {border-bottom:1px solid #111}
div.tab a, div.tab a:hover, div.tab-selected a  {
border:1px solid #D6D6D6;
border-bottom:none;
}
div.tab-selected a {border-color:#111}

The menu

/* Clear the stuff that's set by default and style the menu container */
div#menu {
margin:10px;
padding:3px;
background-image:none;
background-color:#fff;
border:1px solid #ddd;
}

/* Appearance of a menu link */
.menuitem-1, .menuitem-2, .menuitem-3, .menuitem-4, .menuitem-5 {
background:#eee;
border-bottom:1px dotted #ddd;
margin:0;
}

/* And a menu link that's selected */
.menuitem-selected-1, .menuitem-selected-2, .menuitem-selected-3,
.menuitem-selected-4, .menuitem-selected-5 {
color:#222;
margin:0;
background:#ddd;
}

The search box

/* Add style to search box, float right so content can wrap */
div#search {
margin:10px;
padding: 0 5px;
width:230px;
float:right;
background:#eee;
border:1px solid #ddd;
}
/* The search input field */
input.searchfield {
background:#fff;
border:1px solid #ddd;
width:170px;
margin-left:10px;
}
/* And the button */
input.searchsubmit {
background-color:#ddd;
border:1px solid #ccc;
color:#444;
}

Inserting your files

You're going to want to copy your CSS to "/src/pubs/default/resources/shared/css/" in the Lenya installation. Once you re-build Lenya the files you uploaded will be at the following URL "http://localhost/default/live/css/". After we copy theme.css to the server we need to link to it, here's two different ways to do this:

The first method is to place the following line at the bottom of "/src/pubs/default/resources/shared/css/page.css". This CSS file is already linked in the template, so by importing our theme at the bottom we override it by being at the end of the cascade.

@import url("/default/live/css/theme.css"); 

The second method involves editing the main XSL template file, this is located in "/src/pubs/default/xslt/page2xhtml.xsl". Insert the following after the other external CSS links.

<!-- insert themed css -->
<link rel="stylesheet" href="{$root}/css/theme.css" type="text/css" />