Style FitNesse the way you like (theming).

(new since April 2012)

As of April 2012, FitNesse has a new layout. There are a few reasons for making this (incompatible) change:

So here you are, in your new FitNesse, with a look and feel you're not accustomed to. How to deal with that?

Theming to the rescue

One of the benefits you'll have from the new layout is that the page L&F is easier to change. FitNesse comes with a few styles built-in:

For all styles the HTML remains the same. The default style can be configured through, FitNesse's settings file (this is where you also configure custom symbols). Add the line

(re)start FitNesse and the style will have completely changed.

Apart from the layout style, fitnesse loads a few stylesheets by default: fitnesse_pages.css and fitnesse_wiki.css. Both files serve the boilerplate for pages (like the properties page) and the wiki text.

Rolling your own

FitNesse still has the ability to support custom user styling. In FitNesseRoot/files/fitnesse you can place your own files. Stylesheets go in a css directory, Javascript in javascript and images are filed in the images folder (note: those directories are not present by default, you'll have to create them by hand).

Now say you want to create your own style, named my-style. You'll need to create a stylesheet FitNesseRoot/files/fitnesse/css/my-style.css and an optional Javascript file FitNesseRoot/files/fitnesse/javascript/my-style.js.

The stylesheet can contain just your own styling or a combination of existing styles with your own additions on top of it.

To reuse one of the existing styles as an entry point, create a custom css file and import the base style you like to use, e.g.:

@import url(fitnesse_straight.css); 

Now you can simply add custom elements to it.
For example, changing the logo to something fitting your project can be done by placing a 200 x 37 logo file names fitnesse-logo-small.png file in files/images/ and then shift-f5 reloading the page.

Create a theme based on Bootstrap

The Bootstrap theme took a slightly different route. It's using a subfolder for it's resources. The skeleton.vm template  (files/fitnesse/bootstrap/templates/skeleton.vm) contains the general markup and layout. It also contains references to the other resources used. You can find the resources used to compile the bootstrap style (lesscss templates) in fitnesse.jar: fitnesse/resources/bootstrap/less. Use those as a basis for the custom theme. There are a few more template files that are overwritten by the bootstrap theme. If the theme needs to be reusable, refer (#parse) the the bootstrap templates for a start and add your own customisations along the way.

Packaging themes

It's also possible to distribute themes in jar files (for example if you want to support a corporate theme for all your FitNesse projects). For that, package the css and javascript in a jar file, like this:

Add the jar file to your classpath and define the style (my-style) in your