Apache Software Foundation > Apache Forrest
Font size:      

How to customize Forrest CSS WYSIWYG-style

This is documentation for development version v0.10-dev (More)
This How-To shows how to use Mozilla Firefox and the free EditCSS-Plugin to customize your Forrest design in a WYSIWYG-way.

Intended Audience

Users who want to customize the Forrest look and feel or simply experiment with changing certain CSS-styles settings to see what happens.


A major part of Forrest's look and feel is controlled by a few CSS style sheets. Since Forrest allows you to override these settings, changing the CSS is a quick and easy alternative to creating (and maintaining) a whole new skin.

You'll learn how to use free tools to change and experiment with styles in a WYSIWYG way, so that you can immediately see what effect changing a CSS property will have on the look and feel of your Forrest.


To follow these instructions you will need:

  1. Browser-access to the Forrest-site you want to experiment with. Starting with a new 'forrest seed' site is good for your first attempt.
    You can even experiment with Forrest's core skins CSS. Please send patches if you enhance something.
  2. The current version of the free Mozilla Firefox-Browser installed on your system. If you don't already use it, you can download it from http://www.mozilla.org/products/firefox/
  3. The Firefox-PlugIn EditCSS. It downloads and installs in just a few seconds from the Install-Link at http://editcss.mozdev.org/
    With standard security settings in place, Firefox will pop up a line at the top of the window because this site has by default no permission to install plugins on your computer. Click "Edit Options" and then "Allow" to change that, then click on the Install-link again. Don't forget to close and restart Firebird when the installation is finished.
  4. A basic understanding of CSS and access to a good CSS-reference. Tutorials and Reference can be found at http://www.htmlhelp.com/reference/css/.


Open your Forrest

Start your Firefox Browser and open the Forrest you'd like to work on/play with.

The page you have pointed to will show up in Firefox's main window.

Open the EditCSS-Sidebar

Select View-Sidebar-EditCSS from Firefox's main menu to open the EditCSS sidebar.

The EditCSS sidebar will show next to the main window and load all the styles from the main page.

Change any CSS

Change any style you'd like to experiment with or add new settings and styles of your choice by simply editing the text of the sidebar.

EditCSS pushes any change you make in the sidebar right back into the style-settings of the main window, so that effects will show right away.

On slow systems or when inserting big changes it might be a good idea to paste these from the clipboard to avoid a zillion updates to the main windows for every character you type.

How to save changes?

Since it takes a few explanations to apply the changes to your Forrest, I've made this the topic of yet another HowTo called "Howto change and extend Forrest-CSS"

Feedback and further development of this How-To

Please provide feedback about this document via the mailing lists.