May 25, 2009

Add CSS link in page header for Maven project site

Using Maven's site plugin is very powerful. It is so easy to generate a site with links to documentation and write our own documentation in APT or XDoc format. To keep a consistent look-and-feel it is a good idea to use a CSS file and define the look-and-feel of the site in this file. If we create the file src/site/resources/css/site.css Maven will automatically include it. In the generated pages we find a reference to the site.css:

<style type="text/css" media="all">
      @import url("./css/maven-base.css");
      @import url("./css/maven-theme.css");
      @import url("./css/site.css");

Notice the relative reference that is used. This means subprojects or submodules of our Mavenized application cannot reach this file. One way to deal with this is to write our own Maven site skin. We can create the look-and-feel in the site skin and use it among the several submodules.

But what if the company already provides a skin we must use? We cannot use more than one skin, so we need another way out. We add a reference to site.css in our HTML head section which can be recognized by all submodules. In the src/site/site.xml file we add the following:

    <link rel="stylesheet" href="/css/site.css" type="text/css" />

Now all generated pages will have the <link> tag in the HTML head section.