How to customize Forrest CSS WYSIWYG-style
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.
Purpose
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.
Prerequisites
To follow these instructions you will need:
- Browser-access to the Forrest-site you want
to experiment with. Starting with a new 'forrest seed' site is
good for your first attempt.
NoteYou can even experiment with Forrest's core skins CSS. Please send patches if you enhance something.
- 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/
- The Firefox-PlugIn EditCSS. It downloads
and installs in just a few seconds from the
Install-Link at http://editcss.mozdev.org/
NoteWith 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.
- 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/.
Steps
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.
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.