forrest-svn mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
Subject svn commit: rev 57074 - in forrest/trunk/site/content/xdocs: . howto
Date Tue, 09 Nov 2004 19:28:53 GMT
Author: rgardler
Date: Tue Nov  9 11:28:52 2004
New Revision: 57074

   forrest/trunk/site/content/xdocs/howto/howto-editcss.xml   (contents, props changed)
How to Edit CSS in a WYSIWYG style (Contributed by Ferdinand Soethe)

Added: forrest/trunk/site/content/xdocs/howto/howto-editcss.xml
--- (empty file)
+++ forrest/trunk/site/content/xdocs/howto/howto-editcss.xml	Tue Nov  9 11:28:52 2004
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+  Copyright 2002-2004 The Apache Software Foundation
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  See the License for the specific language governing permissions and
+  limitations under the License.
+<!DOCTYPE howto PUBLIC "-//APACHE//DTD How-to V2.0//EN" "">
+	<header>
+		<title>How to customize Forrest CSS 
+			WYSIWYG-style</title>
+		<abstract> This How-To shows how to use Mozilla 
+			Firebird and the free EditCSS-Plugin to 
+			customize your Forrest design in a 
+			WYSIWYG-way.</abstract>
+		<last-modified-content-date date="2004-11-05"/>
+	</header>
+	<audience title="Intended Audience">
+		<p> Users who want to customize the Forrest look 
+			and feel or simply experiment with changing 
+			certain CSS-styles settings to see what 
+			happens.</p>
+	</audience>
+	<purpose title="Purpose">
+		<p> 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.</p>
+		<p> 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.</p>
+	</purpose>
+	<prerequisites title="Prerequisites">
+		<p>To follow these instructions you will need:</p>
+		<ol>
+			<li>Browser-access to the Forrest-site you want 
+				to experiment with.<note>You can even 
+				experiment with Forrest's that are read-only 
+				for you (although you obviously won't be 
+				able to make those changes 
+				permanent).</note> </li>
+			<li>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 <a 
+				href=""></a>

+				</li>
+			<li>The Firefox-PlugIn EditCSS. It downloads 
+				and installs in just a few seconds from the 
+				Install-Link at <a 
+				href=""></a> 
+				<note>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.</note> </li>
+			<li>A basic understanding of CSS and access to 
+				a good CSS-reference. Tutorials and 
+				Reference can be found at <a 
+				href=""></a>.</li>
+		</ol>
+	</prerequisites>
+	<steps title="Steps">
+		<section id="openForrest">
+			<title>Open your Forrest</title>
+			<p class="instruction">Start your Firefox 
+				Browser and open the Forrest you'd like to 
+				work on/play with.</p>
+			<p>The page you have pointed to will show up in 
+				Firefox's main window.</p>
+		</section>
+		<section id="OpenEditCSS">
+			<title>Open the EditCSS-Sidebar</title>
+			<p class="instruction">Select 
+				View-Sidebar-EditCSS from Firefox's main 
+				menu to open the EditCSS sidebar.</p>
+			<p>The EditCSS sidebar will show next to the 
+				main window and load all the styles from 
+				the main page.</p>
+		</section>
+		<section id="changeCSS">
+			<title>Change any CSS</title>
+			<p class="instruction">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.</p>
+			<p>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.</p>
+			<note>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.</note>
+		</section>
+		<section id="saveChanges">
+			<title>How to save changes?</title>
+			<p>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"</p>
+		</section>
+	</steps>
+	<feedback 
+		title="Feedback and further development of this How-To">
+		<p> Please provide feedback about this document via 
+			the <a href="site:mail-lists">mailing 
+			lists</a>. </p>
+	</feedback>

Modified: forrest/trunk/site/content/xdocs/howto/index.xml
--- forrest/trunk/site/content/xdocs/howto/index.xml	(original)
+++ forrest/trunk/site/content/xdocs/howto/index.xml	Tue Nov  9 11:28:52 2004
@@ -37,6 +37,10 @@
         - Describes the generation of a PDF document for each
         group of documents that is defined by a tab.
+      <li><link href="site:howto/editcss">How to edit Forrest's CSS in a WYSIWYG
+        - Describes the use of Mozilla Firebird and the free EditCSS-Plugin to 
+        customize your Forrest design in a WYSIWYG-way.
+      </li>
       <li><link href="site:howto/corner-css">How to modify the color of generated
corner images</link>
         - Describes the use of CSS values from the skinconf.xml configuration
         file to change the color of the corner images to be suitable for

Modified: forrest/trunk/site/content/xdocs/site.xml
--- forrest/trunk/site/content/xdocs/site.xml	(original)
+++ forrest/trunk/site/content/xdocs/site.xml	Tue Nov  9 11:28:52 2004
@@ -117,6 +117,7 @@
     <write-howto label="Write a How-to" href="howto-howto.html"/>
     <asf-mirror label="Download mirror" href="howto-asf-mirror.html"/>
     <pdf-tab label="Create tab PDF" href="howto-pdf-tab.html"/>
+    <editcss label="Edit CSS (WYSIWYG)" href="howto-editcss.html"/>
     <corner-css label="CSS corner SVG" href="howto-corner-images.html"/>

View raw message