Flyspray themes

While many web applications rely upon complex templating to achieve different visual styles, Flyspray uses the w3c CSS standard to achieve different layouts and colours. Almost anything can be achieved using CSS, just look at the CSS Zen Garden for examples and inspiration.

The default Flyspray theme is 'Bluey'. It has a basic layout with a colour scheme that won't hurt your eyes.

Flyspray comes with only the Bluey theme. Other available themes can be downloaded from the download page. To install a theme, extract it from the compressed archive into Flyspray's themes/ directory. Then go to the Project Manager's Toolbox, select it and save preferences.

If you would like to create your own theme, simply copy the themes/Bluey/ directory to themes/YourThemeName/. From there, open themes/YourThemeName/theme.css and start editing.

Almost all elements in Flyspray have id or class tags. You can read which element has which tag by viewing the source code to a Flyspray page, but there is an easier way. To easily see the tag names for each element, install the Web Developer Extension for the Firefox web browser. It contains an option under the 'Outline' menu, called 'Outline Selected Element'. You can then hover your mouse pointer around Flyspray, and each element and tag name will be displayed in the status bar.

You can use CSS to not only change Flyspray's colours, but also to move elements around the page. An example of this is div#toolboxmenu, which displays vertically on the left instead of horizontally across the page.

While you are free to create themes for your own use, we would love for you to show us your work. Contact us on our mailing list and show the world what you've done. Don't send files larger than 40kB in size to the mailing list, as we have subscribers on dialup internet. If you would like us to host your theme on the download page, please let us know. We can arrange to get it from you outside the mailing list.