forrest-site-svn mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From cross...@apache.org
Subject svn commit: r529910 [11/22] - in /forrest/site: docs_0_90/ docs_0_90/howto/ docs_0_90/howto/cvs-ssh/ docs_0_90/howto/multi/ docs_0_90/images/ pluginDocs/plugins_0_90/
Date Wed, 18 Apr 2007 08:11:05 GMT
Added: forrest/site/docs_0_90/howto/howto-corner-images.html
URL: http://svn.apache.org/viewvc/forrest/site/docs_0_90/howto/howto-corner-images.html?view=auto&rev=529910
==============================================================================
--- forrest/site/docs_0_90/howto/howto-corner-images.html (added)
+++ forrest/site/docs_0_90/howto/howto-corner-images.html Wed Apr 18 01:10:58 2007
@@ -0,0 +1,698 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta content="Apache Forrest" name="Generator">
+<meta name="Forrest-version" content="0.9-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to modify the color of generated corner images (v0.9-dev)</title>
+<link type="text/css" href="../../skin/basic.css" rel="stylesheet">
+<link media="screen" type="text/css" href="../../skin/screen.css" rel="stylesheet">
+<link media="print" type="text/css" href="../../skin/print.css" rel="stylesheet">
+<link type="text/css" href="../../skin/profile.css" rel="stylesheet">
+<script src="../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
+<link rel="shortcut icon" href="../../favicon.ico">
+</head>
+<body onload="init()">
+<script type="text/javascript">ndeSetTextSize();</script>
+<div id="top">
+<!--+
+    |breadtrail
+    +-->
+<div class="breadtrail">
+<a href="http://www.apache.org/">apache</a> &gt; <a href="http://forrest.apache.org/">forrest</a><script src="../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
+</div>
+<!--+
+    |header
+    +-->
+<div class="header">
+<!--+
+    |start group logo
+    +-->
+<div class="grouplogo">
+<a href="http://www.apache.org/"><img class="logoImage" alt="Apache" src="../../images/apache-forrest.png" title="The Apache Software Foundation"></a>
+</div>
+<!--+
+    |end group logo
+    +-->
+<!--+
+    |start Project Logo
+    +-->
+<div class="projectlogo">
+<a href="http://forrest.apache.org/"><img class="logoImage" alt="Forrest" src="../../images/project-logo.gif" title="Apache Forrest"></a>
+</div>
+<!--+
+    |end Project Logo
+    +-->
+<!--+
+    |start Search
+    +-->
+<div class="searchbox">
+<form action="http://www.google.com/search" method="get" class="roundtopsmall">
+<input value="forrest.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with google');" size="25" name="q" id="query" type="text" value="Search the site with google">&nbsp; 
+                    <input name="Search" value="Search" type="submit">
+</form>
+</div>
+<!--+
+    |end search
+    +-->
+<!--+
+    |start Tabs
+    +-->
+<ul id="tabs">
+<li>
+<a class="unselected" href="../../index.html">Welcome</a>
+</li>
+<li>
+<a class="unselected" href="../../contrib.html">Developers</a>
+</li>
+<li class="current">
+<a class="selected" href="../../versions/index.html">Versioned Docs</a>
+</li>
+<li>
+<a class="unselected" href="../../pluginDocs/index.html">Plugins</a>
+</li>
+<li>
+<a class="unselected" href="../../tools/index.html">Tools</a>
+</li>
+</ul>
+<!--+
+    |end Tabs
+    +-->
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<!--+
+    |start Subtabs
+    +-->
+<div id="level2tabs">
+<a class="unselected" href="../../docs_0_80/index.html">0.80 (current)</a><a class="selected" href="../../docs_0_90/index.html">0.90-dev (under development)</a><a class="unselected" href="../../docs_0_70/index.html">0.70 (past)</a>
+</div>
+<!--+
+    |end Endtabs
+    +-->
+<script type="text/javascript"><!--
+document.write("Last Published: " + document.lastModified);
+//  --></script>
+</div>
+<!--+
+    |breadtrail
+    +-->
+<div class="breadtrail">
+
+             &nbsp;
+           </div>
+<!--+
+    |start Menu, mainarea
+    +-->
+<!--+
+    |start Menu
+    +-->
+<div id="menu">
+<div onclick="SwitchMenu('menu_selected_1.1', '../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">0.90-dev</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/your-project.html">Using Forrest</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.3', '../../skin/')" id="menu_selected_1.1.3Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">How-To</div>
+<div id="menu_selected_1.1.3" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/index.html">Overview</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.2', '../../skin/')" id="menu_1.1.3.2Title" class="menutitle">Install Forrest</div>
+<div id="menu_1.1.3.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/build.html" title="Build and install the current                     unreleased version">Building Forrest from Source</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/upgrading_09.html">Upgrading to 0.9</a>
+</div>
+<div class="menuitem">
+<a href="">Use Forrest</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.3.5', '../../skin/')" id="menu_selected_1.1.3.5Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">Customize Forrest</div>
+<div id="menu_selected_1.1.3.5" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/sitemap-explain.html">Sitemaps explained</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-custom-html-source.html">Custom html source</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/project-sitemap.html">Project sitemap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-editcss.html">Edit CSS (WYSIWYG)</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-pdf-tab.html" title="Generate one pdf-document for all pages of a tab">Create tab PDF</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">CSS corner SVG</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.6', '../../skin/')" id="menu_1.1.3.6Title" class="menutitle">Integrate Forrest with tools</div>
+<div id="menu_1.1.3.6" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-forrest-from-maven.html">Maven Integration</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/catalog.html">Using DTD Catalogs</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.7', '../../skin/')" id="menu_1.1.3.7Title" class="menutitle">Extend Forrest</div>
+<div id="menu_1.1.3.7" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-buildPlugin.html">Build a Plugin</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/skin-package.html">Package new Skins</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.9', '../../skin/')" id="menu_1.1.3.9Title" class="menutitle">Adding Documentation</div>
+<div id="menu_1.1.3.9" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../howto-howto.html" title="Instructions for writing                 a new howto-document">Write a How-to</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.9.2', '../../skin/')" id="menu_1.1.3.9.2Title" class="menutitle">Multipage HowTo</div>
+<div id="menu_1.1.3.9.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/howto-multi.html">Introduction</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step1.html">Step 1</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step2.html">Step 2</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step3.html">Step 3</a>
+</div>
+</div>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/faq.html">FAQs</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.5', '../../skin/')" id="menu_1.1.5Title" class="menutitle">Background</div>
+<div id="menu_1.1.5" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/linking.html">Menus and Linking</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/searching.html">Search Options in Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/locationmap.html">Locationmap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/sitemap-ref.html">Sitemap Reference</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/skins.html" title="About default skins, their naming and features">Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/status-themes.html">Dispatcher versus Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/cap.html">Sourcetype Action</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/validation.html">XML validation and entity resolution</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/changes.html">Changes</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/glossary.html">Glossary</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.8', '../../skin/')" id="menu_1.1.8Title" class="menutitle">Reference docs</div>
+<div id="menu_1.1.8" class="menuitemgroup">
+<div onclick="SwitchMenu('menu_1.1.8.1', '../../skin/')" id="menu_1.1.8.1Title" class="menutitle">DTD documentation</div>
+<div id="menu_1.1.8.1" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/dtd-docs.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.dtdx.html">document-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v20.dtdx.html">howto-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v20.dtdx.html">faq-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v13.dtdx.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v13.dtdx.html">howto-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v13.dtdx.html">faq-v13</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.8.2', '../../skin/')" id="menu_1.1.8.2Title" class="menutitle">Doc samples</div>
+<div id="menu_1.1.8.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/document-v13.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.html">document-v20</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.9', '../../skin/')" id="menu_1.1.9Title" class="menutitle">Older Docs</div>
+<div id="menu_1.1.9" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/primer.html">Forrest Primer</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/libre-intro.html">Libre</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/dreams.html">Dream list</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/cvs-ssh/howto-cvs-ssh.html">CVS over SSH</a>
+</div>
+</div>
+</div>
+<div id="credit">
+<hr>
+        This is documentation for development version v0.9-dev
+       (<a href="http://forrest.apache.org/versions/">More</a>)</div>
+<div id="roundbottom">
+<img style="display: none" class="corner" height="15" width="15" alt="" src="../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
+<!--+
+  |alternative credits
+  +-->
+<div id="credit2">
+<a href="http://apachecon.com/2007/EU/"><img border="0" title="ApacheCon Europe 2007" alt="ApacheCon Europe 2007 - logo" src="http://apache.org/ads/ApacheCon/2007-europe-125x125.png" style="width: 125px;height: 125px;"></a><a href="http://people.apache.org/calendar.html#200711"><img border="0" title="ApacheCon US 2007" alt="ApacheCon US 2007 - logo" src="http://apache.org/ads/ApacheCon/2007-usa-125x125.png" style="width: 125px;height: 125px;"></a>
+</div>
+</div>
+<!--+
+    |end Menu
+    +-->
+<!--+
+    |start content
+    +-->
+<div id="content">
+<div title="Portable Document Format" class="pdflink">
+<a class="dida" href="howto-corner-images.pdf"><img alt="PDF -icon" src="../../skin/images/pdfdoc.gif" class="skin"><br>
+        PDF</a>
+</div>
+<div class="trail">Font size: 
+	          &nbsp;<input value="Reset" class="resetfont" title="Reset text" onclick="ndeSetTextSize('reset'); return false;" type="button">      
+	          &nbsp;<input value="-a" class="smallerfont" title="Shrink text" onclick="ndeSetTextSize('decr'); return false;" type="button">
+	          &nbsp;<input value="+a" class="biggerfont" title="Enlarge text" onclick="ndeSetTextSize('incr'); return false;" type="button">
+</div>
+<h1>How to modify the color of generated corner images</h1>
+<div class="abstract">
+      This How-To describes how to modify the corner images that appear in the
+      menu and tabs of the skins.
+    </div>
+<div id="motd-area">
+        This is documentation for development version v0.9-dev
+       (<a href="http://forrest.apache.org/versions/">More</a>)</div>
+<div id="minitoc-area">
+<ul class="minitoc">
+<li>
+<a href="#Intended Audience">Intended Audience</a>
+</li>
+<li>
+<a href="#Purpose">Purpose</a>
+</li>
+<li>
+<a href="#Prerequisites">Prerequisites</a>
+</li>
+<li>
+<a href="#Steps">Steps</a>
+<ul class="minitoc">
+<li>
+<a href="#css-files">Understand how corner images are named (the contract)</a>
+</li>
+<li>
+<a href="#skinconfig">Modifying the skinconf.xml of your project</a>
+</li>
+<li>
+<a href="#css_modify">Modifying .css files</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#Feedback">Feedback</a>
+</li>
+</ul>
+</div>
+<a name="N10010"></a><a name="Intended Audience"></a>
+<h2 class="underlined_10">Intended Audience</h2>
+<div class="section">
+<p>
+      Users who want to change the colors of the corner images in the output
+      html documents.
+    </p>
+<p>
+      This explanation is also useful for skin developers to understand the
+      corner image generation process.
+    </p>
+</div>
+<a name="N1001B"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<p>
+      Forrest renders the corner images through
+      <a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG)</a>. It
+      may be necessary to change the color of the corner images to be suitable
+      for your own skin colors.
+    </p>
+</div>
+<a name="N10027"></a><a name="Prerequisites"></a>
+<h2 class="underlined_10">Prerequisites</h2>
+<div class="section">
+<ul>
+      
+<li>Understand how to use the skinconf.xml file to change the appearance
+      of the output documents.</li>
+      
+<li>Understand how to create or modify skins by following the
+      <a href="../../docs_0_90/your-project.html">Using Forrest</a> document
+       (topic "<a href="../../docs_0_90/your-project.html#skins">Forrest skins</a>").</li>
+    
+</ul>
+</div>
+<a name="N1003D"></a><a name="Steps"></a>
+<h2 class="underlined_10">Steps</h2>
+<div class="section">
+<p>
+      The procedure outlined below provides an understanding of how corner
+      images are named (the contract) and then shows how to define new colors
+      for these images by modifying the
+      <span class="codefrag">src/documentation/skinconf.xml</span> of a project.
+    </p>
+<a name="N10048"></a><a name="css-files"></a>
+<h3 class="underlined_5">Understand how corner images are named (the contract)</h3>
+<p>
+        The corner images are referenced in some .css files of the above-named
+        skins; for example, in screen.css of the pelt skin:
+      </p>
+<pre class="code">
+/*Example from screen.css of pelt*/
+...
+/**
+* Round corner
+*/
+#roundtop {
+    background-image: url(images/rc-t-r-15-1body-2menu-3menu.png);
+    background-repeat: no-repeat;
+    background-position: top right;
+}
+...
+      </pre>
+<p>
+        The naming follows a contract which is described below. In general, the
+        naming looks like:
+      </p>
+<pre class="code">
+images/{$name}-{$v-orientation}-{$h-orientation}-{$size}-1{$backgroundColor}-2{$strokeColor}-3{$foregroundColor}
+      </pre>
+<p>
+        The first part
+        (<span class="codefrag">images/{$name}-{$v-orientation}-{$h-orientation}-{$size}</span>)
+        identifies which images is used and how big (width x height) it should
+        be. The second part\
+        (<span class="codefrag">-1{$backgroundColor}-2{$strokeColor}-3{$foregroundColor}</span>)
+        identifies the coloring of each portion of the image. The input
+        parameter for the second part comes from the color profile of
+        <span class="codefrag">src/documentation/skinconf.xml</span>. The second part is easily
+        identifiable through the numbering 1-2-3.
+      </p>
+<p>
+        Let us get into details:
+      </p>
+<dl>
+        
+<dt>
+<span class="codefrag">images</span>
+</dt>
+        
+<dd>
+          Path to the xslt that creates the corner.
+          <br>
+<span class="codefrag">images/ = {$FORREST_HOME}/main/webapp/skins/common/images/</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$name}</span>
+</dt>
+        
+<dd>
+          In the common skin there are two XSLT files ready for use:
+          <ul>
+            
+<li>
+<span class="codefrag">rc.svg.xslt</span>: handles rounded corners
+            </li>
+            
+<li>
+<span class="codefrag">dc.svg.xslt</span>: handles diagonal 45-degree corners
+            </li>
+          
+</ul>
+<span class="codefrag">name = [rc|dc]</span>
+          
+<br>
+<em>e.g.</em><span class="codefrag">rc</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$v-orientation}</span>
+</dt>
+        
+<dd>
+          Vertical orientation of the corner images (top or bottom).
+          <br>
+<span class="codefrag">v-orientation = [t|b]</span>
+          
+<br>
+<em>e.g.</em><span class="codefrag">t</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$h-orientation}</span>
+</dt>
+        
+<dd>
+          Horizontal orientation of the corner images (left or right).
+          <br>
+<span class="codefrag">h-orientation = [l|r]</span>
+          
+<br>
+<em>e.g.</em><span class="codefrag">r</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$size}</span>
+</dt>
+        
+<dd>
+          Pixels size of the width <strong>and</strong> height of the corner image.
+          <br>
+<span class="codefrag">size=x</span>
+          
+<br>
+<em>e.g.</em><span class="codefrag">5</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$backgroundColor}</span>
+</dt>
+        
+<dd>
+          Any <span class="codefrag">&lt;color name=""/&gt;</span> element in the <span class="codefrag">skinconf.xml</span> (the <span class="codefrag">value="{$color}"</span>
+          attribute will be applied).
+          <br>
+<em>e.g.</em><span class="codefrag">header</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$strokeColor}</span>
+</dt>
+        
+<dd>
+          Any <span class="codefrag">&lt;color name=""/&gt;</span> element in the <span class="codefrag">skinconf.xml</span> (the <span class="codefrag">value="{$color}"</span>
+          attribute will be applied).
+          <br>
+<em>e.g.</em><span class="codefrag">searchbox</span>
+</dd>
+        
+<dt>
+<span class="codefrag">{$foregroundColor}</span>
+</dt>
+        
+<dd>
+          Any <span class="codefrag">&lt;color name=""/&gt;</span> element in the <span class="codefrag">skinconf.xml</span> (the <span class="codefrag">value="{$color}"</span>
+          attribute will be applied).
+          <br>
+<em>e.g.</em><span class="codefrag">searchbox</span>
+</dd>
+      
+</dl>
+<p>
+        The corner images are made by generating a dymanic
+        <a href="/skin/images/rc-t-r-50-1body-2menu-3menu.svg">svg
+        image</a> to add the colors and size. Then this svg is serialize to
+        <a href="/skin/images/rc-t-r-50-1body-2menu-3menu.png">the png
+        image</a> via the
+        <a href="http://cocoon.apache.org/2.1/apidocs/org/apache/cocoon/serialization/SVGSerializer.html">org.apache.cocoon.serialization.SVGSerializer</a>
+        (see
+        <a href="http://cocoon.apache.org/2.1/userdocs/svg-serializer.html">docs</a>).
+      </p>
+<div class="fixme">
+<div class="label">Fixme (thorsten)</div>
+<div class="content">
+        The following link is for pure debugging reason.
+        <a href="/skin/images/rc-t-r-50-1body-2menu-3menu.test.png">test
+        png image</a> - this image is taken from the svg pipe instead of
+        directly generating it.
+      </div>
+</div>
+<a name="N10121"></a><a name="skinconfig"></a>
+<h3 class="underlined_5">Modifying the skinconf.xml of your project</h3>
+<p>
+        modifying the <span class="codefrag">skinconf.xml</span> of your project (by default you
+        find it at <span class="codefrag">[project-dir]/src/documentation/</span>).
+      </p>
+<p>
+        Starting about line 155 you find a <span class="codefrag">&lt;colors&gt;</span> ...
+        <span class="codefrag">&lt;/colors&gt;</span> element with content commented-out:
+      </p>
+<pre class="code">
+&lt;colors&gt;
+&lt;!-- These values are used for the generated CSS files. --&gt;
+
+&lt;!-- Krysalis --&gt;
+&lt;!--
+  &lt;color name="header"    value="#FFFFFF"/&gt;
+
+  &lt;color name="tab-selected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/&gt;
+  &lt;color name="tab-unselected" value="#F7F7F7" link="#000000" vlink="#000000" hlink="#000000"/&gt;
+  &lt;color name="subtab-selected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/&gt;
+  &lt;color name="subtab-unselected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/&gt;
+
+...
+
+--&gt;
+
+&lt;/colors&gt;
+      </pre>
+<p>
+        To modify the colors of the corner images, you can either define your
+        own <span class="codefrag">&lt;color name=.../&gt;</span> elements or uncomment one of
+        the existing <span class="codefrag">&lt;color name=.../&gt;</span> elements and adjust
+        the color value to your needs.
+      </p>
+<p>
+        
+<em>e.g.</em>
+      
+</p>
+<pre class="code">
+&lt;color name="tab-selected" value="#FF0000"/&gt;
+      </pre>
+<p>
+        This affects all corner images whose <span class="codefrag">{$backgroundColor}</span>,
+        <span class="codefrag">{$strokeColor}</span> or <span class="codefrag">{$foregroundColor}</span> is set to
+        <span class="codefrag">tab-selected</span>.
+        <br>
+        For example, in <span class="codefrag">screen.css</span> (of the "pelt" skin) you find:
+      </p>
+<pre class="code">
+#roundbottomsmall {
+    background-image: url(images/rc-b-r-5-1header-2tab-selected-3tab-selected.png);
+    background-repeat: no-repeat;
+    background-position: top right;
+}
+      </pre>
+<p>
+        Now the stroke color (<span class="codefrag">-2tab-selected</span>) and the foreground
+        color (<span class="codefrag">-3tab-selected</span>) are set to red (remember: we defined
+        <span class="codefrag">#FF0000</span> as the "color" value of <span class="codefrag">tab-selected</span>).
+      </p>
+<a name="N10178"></a><a name="css_modify"></a>
+<h3 class="underlined_5">Modifying .css files</h3>
+<p>
+        In addition to the modification of <span class="codefrag">skinconf.xml</span> you can
+        also modify the respective .css file of your skin.
+      </p>
+<p>
+        Here's another example:
+      </p>
+<pre class="code">
+/*your .css file*/
+...
+#roundbottomsmall {
+    background-image: url(images/rc-b-r-5-1<em>foo</em>-2<em>secondfoo</em>-3<em>thirdfoo</em>.png);
+    background-repeat: no-repeat;
+    background-position: top right;
+}
+...
+      </pre>
+<pre class="code">
+&lt;!-- your skinconf.xml --&gt;
+...
+&lt;colors&gt;
+  &lt;color name="<em>foo</em>" value="#FF0000"/&gt;
+  &lt;color name="<em>secondfoo</em>" value="#00FF00"/&gt;
+  &lt;color name="<em>thirdfoo</em>" value="##00FF00"/&gt;
+&lt;/colors&gt;
+      </pre>
+<p>
+        Here we have created our own color tags (in the .css file) and defined
+        the respective values for them (in <span class="codefrag">skinconf.xml</span>). Now you
+        have color images with a red background and a green foreground.
+        Horrible, isn't it?
+      </p>
+</div>
+<a name="N101A8"></a><a name="Feedback"></a>
+<h2 class="underlined_10">Feedback</h2>
+<div class="section">
+<p>
+      Please provide feedback about this document via the
+      <a href="../../mail-lists.html">mailing lists</a>.
+    </p>
+</div>
+</div>
+<!--+
+    |end content
+    +-->
+<div class="clearboth">&nbsp;</div>
+</div>
+<div id="footer">
+<!--+
+    |start bottomstrip
+    +-->
+<div class="lastmodified">
+<script type="text/javascript"><!--
+document.write("Last Published: " + document.lastModified);
+//  --></script>
+</div>
+<div class="copyright">
+        Copyright &copy;
+         2002-2007 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
+</div>
+<!--+
+    |end bottomstrip
+    +-->
+</div>
+</body>
+</html>

Propchange: forrest/site/docs_0_90/howto/howto-corner-images.html
------------------------------------------------------------------------------
    svn:eol-style = native

Added: forrest/site/docs_0_90/howto/howto-corner-images.pdf
URL: http://svn.apache.org/viewvc/forrest/site/docs_0_90/howto/howto-corner-images.pdf?view=auto&rev=529910
==============================================================================
Binary file - no diff available.

Propchange: forrest/site/docs_0_90/howto/howto-corner-images.pdf
------------------------------------------------------------------------------
    svn:mime-type = application/pdf

Added: forrest/site/docs_0_90/howto/howto-custom-html-source.html
URL: http://svn.apache.org/viewvc/forrest/site/docs_0_90/howto/howto-custom-html-source.html?view=auto&rev=529910
==============================================================================
--- forrest/site/docs_0_90/howto/howto-custom-html-source.html (added)
+++ forrest/site/docs_0_90/howto/howto-custom-html-source.html Wed Apr 18 01:10:58 2007
@@ -0,0 +1,1140 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta content="Apache Forrest" name="Generator">
+<meta name="Forrest-version" content="0.9-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to customize processing of html source (v0.9-dev)</title>
+<link type="text/css" href="../../skin/basic.css" rel="stylesheet">
+<link media="screen" type="text/css" href="../../skin/screen.css" rel="stylesheet">
+<link media="print" type="text/css" href="../../skin/print.css" rel="stylesheet">
+<link type="text/css" href="../../skin/profile.css" rel="stylesheet">
+<script src="../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
+<link rel="shortcut icon" href="../../favicon.ico">
+</head>
+<body onload="init()">
+<script type="text/javascript">ndeSetTextSize();</script>
+<div id="top">
+<!--+
+    |breadtrail
+    +-->
+<div class="breadtrail">
+<a href="http://www.apache.org/">apache</a> &gt; <a href="http://forrest.apache.org/">forrest</a><script src="../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
+</div>
+<!--+
+    |header
+    +-->
+<div class="header">
+<!--+
+    |start group logo
+    +-->
+<div class="grouplogo">
+<a href="http://www.apache.org/"><img class="logoImage" alt="Apache" src="../../images/apache-forrest.png" title="The Apache Software Foundation"></a>
+</div>
+<!--+
+    |end group logo
+    +-->
+<!--+
+    |start Project Logo
+    +-->
+<div class="projectlogo">
+<a href="http://forrest.apache.org/"><img class="logoImage" alt="Forrest" src="../../images/project-logo.gif" title="Apache Forrest"></a>
+</div>
+<!--+
+    |end Project Logo
+    +-->
+<!--+
+    |start Search
+    +-->
+<div class="searchbox">
+<form action="http://www.google.com/search" method="get" class="roundtopsmall">
+<input value="forrest.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with google');" size="25" name="q" id="query" type="text" value="Search the site with google">&nbsp; 
+                    <input name="Search" value="Search" type="submit">
+</form>
+</div>
+<!--+
+    |end search
+    +-->
+<!--+
+    |start Tabs
+    +-->
+<ul id="tabs">
+<li>
+<a class="unselected" href="../../index.html">Welcome</a>
+</li>
+<li>
+<a class="unselected" href="../../contrib.html">Developers</a>
+</li>
+<li class="current">
+<a class="selected" href="../../versions/index.html">Versioned Docs</a>
+</li>
+<li>
+<a class="unselected" href="../../pluginDocs/index.html">Plugins</a>
+</li>
+<li>
+<a class="unselected" href="../../tools/index.html">Tools</a>
+</li>
+</ul>
+<!--+
+    |end Tabs
+    +-->
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<!--+
+    |start Subtabs
+    +-->
+<div id="level2tabs">
+<a class="unselected" href="../../docs_0_80/index.html">0.80 (current)</a><a class="selected" href="../../docs_0_90/index.html">0.90-dev (under development)</a><a class="unselected" href="../../docs_0_70/index.html">0.70 (past)</a>
+</div>
+<!--+
+    |end Endtabs
+    +-->
+<script type="text/javascript"><!--
+document.write("Last Published: " + document.lastModified);
+//  --></script>
+</div>
+<!--+
+    |breadtrail
+    +-->
+<div class="breadtrail">
+
+             &nbsp;
+           </div>
+<!--+
+    |start Menu, mainarea
+    +-->
+<!--+
+    |start Menu
+    +-->
+<div id="menu">
+<div onclick="SwitchMenu('menu_selected_1.1', '../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">0.90-dev</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/your-project.html">Using Forrest</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.3', '../../skin/')" id="menu_selected_1.1.3Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">How-To</div>
+<div id="menu_selected_1.1.3" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/index.html">Overview</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.2', '../../skin/')" id="menu_1.1.3.2Title" class="menutitle">Install Forrest</div>
+<div id="menu_1.1.3.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/build.html" title="Build and install the current                     unreleased version">Building Forrest from Source</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/upgrading_09.html">Upgrading to 0.9</a>
+</div>
+<div class="menuitem">
+<a href="">Use Forrest</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.3.5', '../../skin/')" id="menu_selected_1.1.3.5Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">Customize Forrest</div>
+<div id="menu_selected_1.1.3.5" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/sitemap-explain.html">Sitemaps explained</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">Custom html source</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/project-sitemap.html">Project sitemap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-editcss.html">Edit CSS (WYSIWYG)</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-pdf-tab.html" title="Generate one pdf-document for all pages of a tab">Create tab PDF</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.6', '../../skin/')" id="menu_1.1.3.6Title" class="menutitle">Integrate Forrest with tools</div>
+<div id="menu_1.1.3.6" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-forrest-from-maven.html">Maven Integration</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/catalog.html">Using DTD Catalogs</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.7', '../../skin/')" id="menu_1.1.3.7Title" class="menutitle">Extend Forrest</div>
+<div id="menu_1.1.3.7" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-buildPlugin.html">Build a Plugin</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/skin-package.html">Package new Skins</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.9', '../../skin/')" id="menu_1.1.3.9Title" class="menutitle">Adding Documentation</div>
+<div id="menu_1.1.3.9" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../howto-howto.html" title="Instructions for writing                 a new howto-document">Write a How-to</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.9.2', '../../skin/')" id="menu_1.1.3.9.2Title" class="menutitle">Multipage HowTo</div>
+<div id="menu_1.1.3.9.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/howto-multi.html">Introduction</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step1.html">Step 1</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step2.html">Step 2</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step3.html">Step 3</a>
+</div>
+</div>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/faq.html">FAQs</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.5', '../../skin/')" id="menu_1.1.5Title" class="menutitle">Background</div>
+<div id="menu_1.1.5" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/linking.html">Menus and Linking</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/searching.html">Search Options in Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/locationmap.html">Locationmap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/sitemap-ref.html">Sitemap Reference</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/skins.html" title="About default skins, their naming and features">Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/status-themes.html">Dispatcher versus Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/cap.html">Sourcetype Action</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/validation.html">XML validation and entity resolution</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/changes.html">Changes</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/glossary.html">Glossary</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.8', '../../skin/')" id="menu_1.1.8Title" class="menutitle">Reference docs</div>
+<div id="menu_1.1.8" class="menuitemgroup">
+<div onclick="SwitchMenu('menu_1.1.8.1', '../../skin/')" id="menu_1.1.8.1Title" class="menutitle">DTD documentation</div>
+<div id="menu_1.1.8.1" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/dtd-docs.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.dtdx.html">document-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v20.dtdx.html">howto-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v20.dtdx.html">faq-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v13.dtdx.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v13.dtdx.html">howto-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v13.dtdx.html">faq-v13</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.8.2', '../../skin/')" id="menu_1.1.8.2Title" class="menutitle">Doc samples</div>
+<div id="menu_1.1.8.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/document-v13.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.html">document-v20</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.9', '../../skin/')" id="menu_1.1.9Title" class="menutitle">Older Docs</div>
+<div id="menu_1.1.9" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/primer.html">Forrest Primer</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/libre-intro.html">Libre</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/dreams.html">Dream list</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/cvs-ssh/howto-cvs-ssh.html">CVS over SSH</a>
+</div>
+</div>
+</div>
+<div id="credit">
+<hr>
+        This is documentation for development version v0.9-dev
+       (<a href="http://forrest.apache.org/versions/">More</a>)</div>
+<div id="roundbottom">
+<img style="display: none" class="corner" height="15" width="15" alt="" src="../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
+<!--+
+  |alternative credits
+  +-->
+<div id="credit2">
+<a href="http://apachecon.com/2007/EU/"><img border="0" title="ApacheCon Europe 2007" alt="ApacheCon Europe 2007 - logo" src="http://apache.org/ads/ApacheCon/2007-europe-125x125.png" style="width: 125px;height: 125px;"></a><a href="http://people.apache.org/calendar.html#200711"><img border="0" title="ApacheCon US 2007" alt="ApacheCon US 2007 - logo" src="http://apache.org/ads/ApacheCon/2007-usa-125x125.png" style="width: 125px;height: 125px;"></a>
+</div>
+</div>
+<!--+
+    |end Menu
+    +-->
+<!--+
+    |start content
+    +-->
+<div id="content">
+<div title="Portable Document Format" class="pdflink">
+<a class="dida" href="howto-custom-html-source.pdf"><img alt="PDF -icon" src="../../skin/images/pdfdoc.gif" class="skin"><br>
+        PDF</a>
+</div>
+<div class="trail">Font size: 
+	          &nbsp;<input value="Reset" class="resetfont" title="Reset text" onclick="ndeSetTextSize('reset'); return false;" type="button">      
+	          &nbsp;<input value="-a" class="smallerfont" title="Shrink text" onclick="ndeSetTextSize('decr'); return false;" type="button">
+	          &nbsp;<input value="+a" class="biggerfont" title="Enlarge text" onclick="ndeSetTextSize('incr'); return false;" type="button">
+</div>
+<h1>How to customize processing of html source</h1>
+<div class="abstract">
+      Explains how to do additional processing of html source documents.
+    </div>
+<div id="motd-area">
+        This is documentation for development version v0.9-dev
+       (<a href="http://forrest.apache.org/versions/">More</a>)</div>
+<div id="minitoc-area">
+<ul class="minitoc">
+<li>
+<a href="#Intended Audience">Intended Audience</a>
+</li>
+<li>
+<a href="#Purpose">Purpose</a>
+</li>
+<li>
+<a href="#Prerequisites">Prerequisites</a>
+</li>
+<li>
+<a href="#Understanding the HTML-Pipeline">Understanding the HTML-Pipeline</a>
+<ul class="minitoc">
+<li>
+<a href="#example">Driven by Example</a>
+</li>
+<li>
+<a href="#sitemap">Finding the Sitemap</a>
+</li>
+<li>
+<a href="#pipelines">Find the Beginning of the Pipelines Section</a>
+</li>
+<li>
+<a href="#matches">Looking for a Match</a>
+</li>
+<li>
+<a href="#html-pipeline">Processing in the '**/*.html' Pipeline</a>
+</li>
+<li>
+<a href="#protocols">Following the Pseudo-Protocols</a>
+</li>
+<li>
+<a href="#call">Second Call for Content</a>
+</li>
+<li>
+<a href="#match-1">First Match for '**body-*.html'</a>
+</li>
+<li>
+<a href="#match-2">Second Match for '**body-*.html'</a>
+</li>
+<li>
+<a href="#match-3">Third Call for Content</a>
+</li>
+<li>
+<a href="#process-html">html-Default Processing</a>
+</li>
+<li>
+<a href="#body">Returning to the '**body-*.html'-Pipeline</a>
+</li>
+<li>
+<a href="#aggregate">Returning to the '**/*.html'-Pipeline</a>
+</li>
+<li>
+<a href="#custom">Customizing the html pipeline</a>
+<ul class="minitoc">
+<li>
+<a href="#when">When to customize?</a>
+</li>
+<li>
+<a href="#how">How to customize?</a>
+</li>
+<li>
+<a href="#what">What to intercept?</a>
+</li>
+<li>
+<a href="#intercept">Intercept pattern</a>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+</div>
+<a name="N10010"></a><a name="Intended Audience"></a>
+<h2 class="underlined_10">Intended Audience</h2>
+<div class="section">
+<p>
+      Users who want to integrate HTML-pages that require custom adjustments and
+      everybody who wants to learn more about Forrest's pipelines in general.
+    </p>
+</div>
+<a name="N10018"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<p>
+      Integrating legacy HTML pages is a common task when migrating existing
+      websites to Forrest. This document explains how to implement custom
+      processing which is required when Forrest's standard pipeline for html
+      does not suffice.
+    </p>
+</div>
+<a name="N10020"></a><a name="Prerequisites"></a>
+<h2 class="underlined_10">Prerequisites</h2>
+<div class="section">
+<p>
+      To follow these instructions you will need:
+    </p>
+<ol>
+      
+<li>
+        Know how to use a
+        <a href="../../docs_0_90/project-sitemap.html">project sitemap</a>.
+      </li>
+      
+<li>
+        A basic understanding of Cocoon's pipelines and their
+        components. You should know about matchers, generators,
+        transformers and serializers and have a rough idea how they work
+        together in a pipeline. A good place to start learning about Cocoon is
+        <a href="http://cocoon.apache.org/2.1/userdocs/concepts/">Understanding Apache Cocoon</a>.
+        The Forrest <a href="../../docs_0_90/sitemap-ref.html">Sitemap Reference</a>
+        will also be helpful.
+      </li>
+      
+<li>
+        If you want to follow the examples right through your
+        Forrest, a current version of Forrest installed on your
+        system and read-access to Forrest's program directory is
+        necessary.
+      </li>
+      
+<li>
+        If you plan on creating your own custom processing for
+        html-pages, you'll also need write access to your
+        project directory.
+      </li>
+    
+</ol>
+</div>
+<a name="N10043"></a><a name="Understanding the HTML-Pipeline"></a>
+<h2 class="underlined_10">Understanding the HTML-Pipeline</h2>
+<div class="section">
+<p>
+      The first part of this howto explains the html pipeline, so as to provide
+      the background to enable you to add additional processing for legacy html
+      documents. If you already know how pipelines work, then skip to the
+      section about <a href="#custom">Customizing the html pipeline</a>.
+    </p>
+<a name="N1004F"></a><a name="example"></a>
+<h3 class="underlined_5">Driven by Example</h3>
+<p>
+        The best way to learn about Forrest pipelines is follow the processing
+        of an imaginary request through the forrest machinery.
+      </p>
+<p>
+        So let's see what happens, when a client asks Forrest to serve the
+        document
+        <br>
+        'http://my.domain.org/mytest/mybad.html'.
+      </p>
+<a name="N1005E"></a><a name="sitemap"></a>
+<h3 class="underlined_5">Finding the Sitemap</h3>
+<p>
+        Like all applications based on Apache Cocoon, each request for a given
+        document is processed by searching a sitemap for a matching processing
+        pipeline. With Forrest, this core sitemap is found in the file
+        'main/webapp/sitemap.xmap' in Forrest's program directory.
+      </p>
+<p class="instruction">
+        Open the file 'main/webapp/sitemap.xmap' in Forrest's program directory
+        with a text editor of your choice.
+      </p>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+        Any simple text editor will suffice, since the XML in this file is quite
+        simple in structure and easy to read.
+      </div>
+</div>
+<p class="instruction">
+        Search for <span class="codefrag">
+map:sitemap
+        </span> to find the start of the Sitemap.
+      </p>
+<p>
+        This sitemap is the starting point for all requests. So even if there
+        are other sitemaps (which we will see later on), we always start looking
+        for a matching pattern right here.
+      </p>
+<a name="N10079"></a><a name="pipelines"></a>
+<h3 class="underlined_5">Find the Beginning of the Pipelines Section</h3>
+<p>
+        Modular as everything else in Cocoon, Forrest's sitemap starts with a
+        long list of declarations for all the components used later on. We can
+        safely ignore these at the moment.
+      </p>
+<p class="instruction">
+        So let's skip right to the start of the Pipelines-Section. Search for
+        <span class="codefrag">
+map:pipelines
+        </span>
+      
+</p>
+<p>
+        Within the pipelines-element you will find a long list of
+        pipeline-Elements (no trailing 's'), each one of them defining a
+        processing pipeline within Forrest.
+      </p>
+<p>
+        When handling a request, Forrest will check the Pipelines from top to
+        bottom until it encounters a Pipeline that will take care of our
+        request.
+      </p>
+<a name="N10090"></a><a name="matches"></a>
+<h3 class="underlined_5">Looking for a Match</h3>
+<p>
+        Like all Cocoon applications, Forrest knows which pipeline to use for
+        processing a certain request by looking at the entry criteria for each
+        pipeline it comes across. This can be a match against a given pattern,
+        the test if a certain files exists or one of many other possible tests
+        that Cocoon supports.
+      </p>
+<p>
+        To better know what we are talking about, let's follow Forrest down the
+        list to the Test for the First Pipeline:
+      </p>
+<p class="instruction">
+        Scroll down to the line <span class="codefrag">
+&lt;map:match pattern="cprofile.*"&gt;
+        </span>
+      
+</p>
+<p>
+        Here you can see that very specialized matches need to occur early in
+        the sitemap. The requested file (and pathname) is compared to a pattern
+        'cprofile.*' that would match if our request started with 'cprofile',
+        endet with any kind of extension and had no pathname. Since it doesn't,
+        we don't have a match and need to keep looking.
+      </p>
+<p class="instruction">
+        Skip forward until you find <span class="codefrag">
+&lt;map:match pattern="**/*.html"&gt;
+        </span>.
+      </p>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+        While scrolling down you may have noticed the match-pattern <span class="codefrag">
+&lt;map:match pattern="*.html"&gt;
+        </span> a couple of lines earlier. This will not match our request since
+        *.something in Cocoon matches only files in the root directory.
+      </div>
+</div>
+<a name="N100B4"></a><a name="html-pipeline"></a>
+<h3 class="underlined_5">Processing in the '**/*.html' Pipeline</h3>
+<p>
+        Let's take a quick look at this pipeline to understand what's happening
+        here:
+      </p>
+<pre class="code">
+
+&lt;map:match pattern="**/*.html"&gt;
+        &lt;map:aggregate element="site"&gt;
+          &lt;map:part src="cocoon:/skinconf.xml"/&gt;
+          &lt;map:part src="cocoon:/build-info"/&gt;
+          &lt;map:part src="cocoon:/{1}/tab-{2}.html"/&gt;
+          &lt;map:part src="cocoon:/{1}/menu-{2}.html"/&gt;
+          &lt;map:part src="cocoon:/{1}/body-{2}.html"/&gt;
+        &lt;/map:aggregate&gt;
+        &lt;map:call resource="skinit"&gt;
+          &lt;map:parameter name="type" value="transform.site.xhtml"/&gt;
+          &lt;map:parameter name="path" value="{0}"/&gt;
+        &lt;/map:call&gt;
+      &lt;/map:match&gt;
+      </pre>
+<p>
+        In the first part of this pipeline, the aggregate-element assembles
+        information required to build a Forrest page with menu and tabs from
+        different sources. Then the call to the skinit-resource picks up the
+        aggregated info and generates a page in the style of the current skin.
+        That's easy, isn't it?
+      </p>
+<p>
+        Well, the complex part begins, when we take a closer look at the sources
+        of the aggregation.
+      </p>
+<pre class="code">
+&lt;map:part src="cocoon:/{1}/body-{2}.html"/&gt;
+      </pre>
+<p>
+        This mysterious element is most easily explained as a secondary request
+        to the Forrest system.
+      </p>
+<p>
+        The 'cocoon:'-part is called a pseudo-protocol and tells the processor
+        to ask Forrest for the resource named behind the colon, process that
+        request and feed the output as input back into our pipeline. (The
+        'pseudo' goes back to the fact that unlike 'http' or 'ftp', which are
+        real protocols, you can use cocoon: only within the cocoon environments
+        as only Cocoon will know what to do with it.)
+      </p>
+<p>
+        So even though we have already seen the end of our pipeline (the
+        skinning), we still don't know, what goes into the skinning and where it
+        comes from. To find out, we have to look at the sources of the
+        aggregation.
+      </p>
+<a name="N100D5"></a><a name="protocols"></a>
+<h3 class="underlined_5">Following the Pseudo-Protocols</h3>
+<p>
+        To find out what goes into our aggregation, we'll need to look at the
+        pipeline that is called by
+      </p>
+<pre class="code">
+&lt;map:part src="cocoon:/{1}/body-{2}.html"/&gt;
+      </pre>
+<p>
+        To do that, it's always a good idea to write down what this call
+        actually looks like when all the variables are replaced by real values.
+        A safe way to do that is to look at the matcher to start with, build a
+        list of the numbered variables and their meaning in the current context
+        and then assemble the actual expression(s) from it.
+      </p>
+<p>
+        In our example the matcher pattern <span class="codefrag">**/*.html</span> is applied to
+        the request-name <span class="codefrag">mytest/mybad.html</span>, so we have three
+        variables altogether:
+      </p>
+<table class="ForrestTable" cellspacing="1" cellpadding="4">
+        
+<tr>
+          
+<td colspan="1" rowspan="1">%0</td>
+          <td colspan="1" rowspan="1">mytest/mybad.html</td>
+          <td colspan="1" rowspan="1">the whole pathname</td>
+        
+</tr>
+        
+<tr>
+          
+<td colspan="1" rowspan="1">%1</td>
+          <td colspan="1" rowspan="1">mytest/</td>
+          <td colspan="1" rowspan="1">the first match</td>
+        
+</tr>
+        
+<tr>
+          
+<td colspan="1" rowspan="1">%2</td>
+          <td colspan="1" rowspan="1">mybad</td>
+          <td colspan="1" rowspan="1">the second match</td>
+        
+</tr>
+      
+</table>
+<p>
+        If we insert that into
+      </p>
+<pre class="code">
+&lt;map:part src="cocoon:/{1}/body-{2}.html"/&gt;
+      </pre>
+<p>
+        we get
+      </p>
+<pre class="code">
+&lt;map:part src="cocoon:/mytest/body-mybad.html"/&gt;
+      </pre>
+<p>
+        As you can easily tell, we are suddenly calling for a whole new
+        document. Let's see where that takes us:
+      </p>
+<a name="N10139"></a><a name="call"></a>
+<h3 class="underlined_5">Second Call for Content</h3>
+<p>
+        Processing of cocoon-calls is not much different from normal requests by
+        a client. When you launch a call like
+      </p>
+<pre class="code">
+&lt;map:part src="cocoon:/mytest/body-mybad.html"/&gt;
+      </pre>
+<p>
+        Forrest will once again start searching its main sitemap from the
+        beginning and look for a pipeline to match that call.
+      </p>
+<p class="instruction">
+        Search for <span class="codefrag">
+**body-*.html
+        </span> from the beginning of the sitemap to see where we find our next
+        match.
+      </p>
+<a name="N10151"></a><a name="match-1"></a>
+<h3 class="underlined_5">First Match for '**body-*.html'</h3>
+<p>
+        Our first match is different to the previous ones because there is a
+        second condition placed inside the matcher. Doing the replacements
+      </p>
+<pre class="code">
+
+&lt;map:select type="exists"&gt;
+          &lt;map:when test="{lm:project.{1}{2}.ehtml}"&gt;
+      </pre>
+<p>
+        we quickly discover that there can't be a file of that name in the
+        project-directory.
+        <br>
+        (The variable '{lm:project.}' is always replaced with the name of your
+        project directory that you can change in the 'forrest.properties'-file.)
+      </p>
+<p>
+        So we have a pipeline, but it doesn't do anything. In this case Forrest
+        will simply keep looking for the next match further down.
+      </p>
+<a name="N10167"></a><a name="match-2"></a>
+<h3 class="underlined_5">Second Match for '**body-*.html'</h3>
+<p class="instruction">
+        Continue searching downwards for '**body-*.html' in the sitemap-file.
+      </p>
+<p>
+        Looking at the pipeline that handles the request, we see that the
+        cocoon-protocol is once again invoked
+      </p>
+<pre class="code">
+&lt;map:generate src="cocoon:/{1}{2}.xml"/&gt;
+      </pre>
+<p>
+        this time as a direct generator of input for our pipeline.
+      </p>
+<p>
+        So once again we ask Forrest to process a request for content. To know
+        what matcher to look for, let's first expand the variables:
+      </p>
+<p>
+        In our example the matcher pattern <span class="codefrag">**body-*.html</span> is applied
+        to the request-name <span class="codefrag">mytest/body-mybad.html</span>. Which means
+        that we have three variables altogether:
+      </p>
+<table class="ForrestTable" cellspacing="1" cellpadding="4">
+        
+<tr>
+          
+<td colspan="1" rowspan="1">%0</td>
+          <td colspan="1" rowspan="1">mytest/body-mybad.html</td>
+          <td colspan="1" rowspan="1">the whole pathname</td>
+        
+</tr>
+        
+<tr>
+          
+<td colspan="1" rowspan="1">%1</td>
+          <td colspan="1" rowspan="1">mytests/</td>
+          <td colspan="1" rowspan="1">the first match</td>
+        
+</tr>
+        
+<tr>
+          
+<td colspan="1" rowspan="1">%2</td>
+          <td colspan="1" rowspan="1">mybad</td>
+          <td colspan="1" rowspan="1">the second match</td>
+        
+</tr>
+      
+</table>
+<p>
+        If we insert that into
+      </p>
+<pre class="code">
+&lt;map:generate src="cocoon:/{1}{2}.xml"/&gt;
+      </pre>
+<p>
+        we get
+      </p>
+<pre class="code">
+&lt;map:generate src="cocoon:/mytests/mybad.xml"/&gt;
+      </pre>
+<a name="N101CF"></a><a name="match-3"></a>
+<h3 class="underlined_5">Third Call for Content</h3>
+<p class="instruction">
+        So let's scan the main sitemap looking for a match for
+        '/mytests/mybad.xml'.
+      </p>
+<p>
+        We find it in the pattern <span class="codefrag">
+&lt;map:match pattern="**.xml"&gt;
+        </span>, which is the standard handling for all xml-requests.
+      </p>
+<p>
+        Since our request fulfils none of the secondary criteria in this
+        pipeline, it falls right through to the map:mount-element at the end:
+      </p>
+<pre class="code">
+&lt;map:mount uri-prefix="" src="forrest.xmap" check-reload="yes" /&gt;
+      </pre>
+<p>
+        which makes Forrest load and process a secondary sitemap, the file
+        'forrest.xmap' in the same directory.
+      </p>
+<p class="instruction">
+        Open the file 'forrest.xmap' and continue the search for a matching
+        pattern.
+      </p>
+<p>
+        Our search first leads us to the matcher <span class="codefrag">
+&lt;map:match type="wildcard" pattern="**.xml"&gt;
+        </span> with a number of submatchers embedded into it.
+      </p>
+<p>
+        The first one, <span class="codefrag">
+&lt;map:match type="wildcard" pattern="**.xml"&gt;
+        </span>, would handle input coming from Forrest plugins. We won't go
+        into details here.
+      </p>
+<p>
+        All further matchers <span class="codefrag">
+&lt;map:match type="i18n" pattern="{properties:content.xdocs}{1}.*.xml"&gt; 
+        </span>. implement what we call a cascade of matchers. By testing for
+        the existence of one source file after another Forrest will use and
+        process the first of the tested source-formats found.
+      </p>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+        Using the i18n-matcher here, Forrest will do a lot more than just
+        finding content in one of many possible source formats. It will also
+        make sure that the the proper language version of the conent (if there
+        are several) is used. Read more about this matcher
+        <a href="http://cocoon.apache.org/2.1/apidocs/org/apache/cocoon/matching/LocaleMatcher.html">http://cocoon.apache.org/2.1/apidocs/org/apache/cocoon/matching/LocaleMatcher.html</a>
+      
+</div>
+</div>
+<p>
+        Checking each matcher in turn you will find that a pipeline that tests
+        for the existence of the file with different extensions. '.html' is
+        third in this list and leads to the processing steps shown below:
+      </p>
+<a name="N1020A"></a><a name="process-html"></a>
+<h3 class="underlined_5">html-Default Processing</h3>
+<p>
+        The default processing of html-files consists of three processing steps:
+      </p>
+<ol>
+        
+<li>
+<span class="codefrag">
+&lt;map:generate src="{source}" type="html" /&gt;</span>
+          
+<br>
+            Using Cocoons html-generator, Forrest reads the html-document
+            from file and uses JTidy to clean up and convert it to xml
+            (which is required for all processing in Cocoon pipelines).
+            At the output of this transformer we will have a valid
+            XHTML-document althought it might still contain some unwanted
+            elements. We'll deal with those later (see
+            <a href="#custom">When to customize</a>).
+        </li>
+        
+<li>
+<span class="codefrag">
+&lt;map:transform src="{lm:transform.html.document}" /&gt;</span>
+          
+<br>
+          Using the standard stylesheet 'html-to-document.xsl', this XHTML is 
+            transformed into Forrest's <a href="../../docs_0_90/glossary.html">Standard Document Format</a>.  (refer to a detailed <a href="../../docs_0_90/locationmap.html">explanation of locationsmaps</a> 
+          to understand exactly how and where that stylesheet is found!)
+        </li>
+        
+<li>
+<span class="codefrag">&lt;map:serialize type="xml-document"/&gt;</span>
+          
+<br>
+          Finally the document is serialized as XML and returned to the
+          calling pipeline.
+        </li>
+      
+</ol>
+<p>
+        As a result, we now hand back the content of the html-document in
+        Forrest standard document format to the calling pipeline
+      </p>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+        To look at the output of this pipeline you can simply point you browser
+        to 'http://localhost:8888/mytest/mybad.xml' (assuming that you are
+        currently running Forrest on your machine and there is an html-page of
+        that name).
+      </div>
+</div>
+<a name="N1023E"></a><a name="body"></a>
+<h3 class="underlined_5">Returning to the '**body-*.html'-Pipeline</h3>
+<p>
+        On returning into the '**body-*.html'-Pipeline (in sitemap.xmap),
+        processing continues with the next components in this pipeline:
+      </p>
+<ul>
+        
+<li>
+<strong>idgen</strong> will generate unique IDs for all elements
+          that need to be referenced within a page (mainly headlines).
+        </li>
+        
+<li>
+<strong>xinclude</strong> would process any xinclude statements
+          in the source.
+          Since HTML does not support this mechanism, nothing happens
+          in our example.
+        </li>
+        
+<li>
+<strong>linkrewriter</strong> adjusts links between pages
+          so that they will still work in the final Forrest output
+          directory structure. It also resolves any special Forrest links.
+        </li>
+        
+<li>
+            The final transformation, <span class="codefrag">
+&lt;map:transform src="{lm:transform.html.broken-links}" /&gt;</span> as the name suggests, will take
+          care of reporting broken site-links.
+        </li>
+        
+<li>
+          The call to 'skinit' prepares the page body for presentation
+          within the selected skin.
+        </li>
+      
+</ul>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+        To look at the output of this pipeline you can simply point you browser
+        to 'http://localhost:8888/mytest/body-mybad.html' (assuming that you are
+        currently running Forrest on your machine and there is an html-page of
+        that name).
+      </div>
+</div>
+<a name="N10266"></a><a name="aggregate"></a>
+<h3 class="underlined_5">Returning to the '**/*.html'-Pipeline</h3>
+<p>
+        At the end of this pipeline, processing returns the results into the
+        aggregation section of the <a href="#html-pipeline">'**/*.html'
+        Pipeline</a>, merges it with other data, skins and serializes for
+        presentation in the requesting client.
+      </p>
+<a name="N10274"></a><a name="custom"></a>
+<h3 class="underlined_5">Customizing the html pipeline</h3>
+<p>
+        In this last part of this document, we will show how to customize the
+        HTML-pipeline to add your additional steps to the default processing.
+      </p>
+<a name="N1027D"></a><a name="when"></a>
+<h4>When to customize?</h4>
+<p>
+          The html-Pipeline in Forrest is designed to be able to also integrate
+          legacy html-Pages in a Forrest project. In doing so, it will fix
+          common markup errors and convert html to Forrest's intermediate
+          document format.
+        </p>
+<p>
+          Due to the nature of html as presentational markup, there is no way
+          this automated process can identify elements in your pages that are
+          not required or even unwanted in the Forrest environment.
+        </p>
+<p>
+          A good example are pages from sites where the navigational elements
+          (menus, tabs etc.) are embedded in the html of each page. Since
+          Forrest can't know what is an unwanted menu and what belongs to the
+          page body that you want to keep, you will need to customize the
+          process to remove elements that are not needed. If you don't, then you
+          will see the original page from your legacy website, menu and all,
+          embedded in your new Forrest site.
+        </p>
+<a name="N1028D"></a><a name="how"></a>
+<h4>How to customize?</h4>
+<p>
+          To add your own custom processing for a group of pages, you will
+          enhance the project sitemap with pipelines that process your documents
+          according to your specifications.
+        </p>
+<p>
+          This project sitemap is located in the file
+          'src/documentation/sitemap.xmap' in your Forrest project directory and
+          is created automatically whenever you seed a new project. At this
+          point it already contains a few examples for custom pipelines.
+        </p>
+<p>
+          To add your own custom processing, edit the file and add a new
+          pipeline to the project sitemap. Since the project sitemap is loaded
+          into the main sitemap right at the top (search for 'This is the user
+          pipeline'), your pipeline intercepts practically all of Forrest's
+          standard pipelines.
+        </p>
+<a name="N1029D"></a><a name="what"></a>
+<h4>What to intercept?</h4>
+<p>
+          Where to intercept standard processing is really a matter of your
+          choice. A good rule is to replace as little standard handling as
+          possible so that future changes in the Forrest architecture are less
+          likely to break your application.
+        </p>
+<p>
+          In our case all we need to do is add a transformation that removes all
+          the unwanted elements. The best place to do this would be right after
+          the generator has converted our document to xhtml.
+        </p>
+<p>
+          However, since we can only replace a complete pipeline, we'll create a
+          new pipeline that intercepts **.xml for our pages, copy the steps the
+          original processor is doing and add a transformation of our own to it.
+        </p>
+<a name="N102AD"></a><a name="intercept"></a>
+<h4>Intercept pattern</h4>
+<p>
+          Take great care when intercepting very basic pipelines. Instead of
+          designing our custom pipeline to match the original **.xml pattern,
+          try to narrow your matcher down to something that will only match your
+          pages.
+        </p>
+<p>
+          If all your pages are located in a directory called mytest, then use a
+          matcher like '/mytest/*.xml' to avoid highjacking the processing for
+          all the other requests.
+        </p>
+<p class="instruction">
+          Add a new pipeline in your project sitemap and set the matcher to
+          '/mytest/*.xml'.
+        </p>
+<p>
+          The new pipeline should look like this and does nothing so far.
+        </p>
+<pre class="code">
+
+&lt;!--Custom Pipeline for my bad html-pages--&gt;        
+&lt;map:pipeline&gt;
+    &lt;map:match pattern="mytest/*.xml"&gt;
+
+    &lt;/map:match&gt;
+&lt;/map:pipeline&gt;
+        </pre>
+<p class="instruction">
+          Open the 'forrest.xmap', search for <span class="codefrag">
+&lt;map:match type="i18n" pattern="{properties:content.xdocs}{1}.*.html"&gt;
+          </span>, copy the three lines for handling *.html files and paste them
+          into your new pipeline.
+        </p>
+<pre class="code">
+
+&lt;!--Custom Pipeline for my bad html-pages--&gt;        
+&lt;map:pipeline&gt;
+    &lt;map:match pattern="mytest/*.xml"&gt;
+      &lt;map:generate src="mytest/{1}.html" type="html" /&gt;
+      &lt;map:transform src="{lm:transform.html.document}" /&gt;
+      &lt;map:serialize type="xml-document"/&gt;
+    &lt;/map:match&gt;
+&lt;/map:pipeline&gt;
+        </pre>
+<p>
+          Your custom pipeline will now behave exactly like the standard
+          html-handler. All that is left to be done is creating the custom
+          transformation and adding it the pipeline.
+        </p>
+<p class="instruction">
+          Design and test a new XSL-Transformation that removes the unwanted
+          elements and save it in your project's stylesheet directory, usually
+          src/documentation/resources/stylesheets (defined in
+          project.stylesheets-dir of forrest.properties), which is central
+          storage for all stylesheets in a project.
+        </p>
+<p class="instruction">
+          Add the new transformation as a new line, straight after the
+          generator, and save the changes.
+        </p>
+<pre class="code">
+
+&lt;!--Custom Pipeline for my bad html-pages--&gt;        
+&lt;map:pipeline&gt;
+    &lt;map:match pattern="mytest/*.xml"&gt;
+      &lt;map:generate src="mytest/{1}.html" type="html" /&gt;<strong>
+
+      &lt;map:transform src="{properties:resources.stylesheets}/fixMyBadHTML.xsl"/&gt;</strong>
+
+      &lt;map:transform src="{lm:transform.html.document}" /&gt;
+      &lt;map:serialize type="xml-document"/&gt;
+    &lt;/map:match&gt;
+&lt;/map:pipeline&gt;
+        </pre>
+<p>
+          Done! You have just added your own custom-processing. Don't forget to
+          view the pages to verify that it is working properly.
+        </p>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+          Our pipeline does not exactly do what the original pipeline does. To
+          make things easier, we omitted the internationalization part in our
+          pipeline. So if you need to create multi-language sites, make sure
+          that you adjust your pipeline accordingly.
+        </div>
+</div>
+</div>
+</div>
+<!--+
+    |end content
+    +-->
+<div class="clearboth">&nbsp;</div>
+</div>
+<div id="footer">
+<!--+
+    |start bottomstrip
+    +-->
+<div class="lastmodified">
+<script type="text/javascript"><!--
+document.write("Last Published: " + document.lastModified);
+//  --></script>
+</div>
+<div class="copyright">
+        Copyright &copy;
+         2002-2007 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
+</div>
+<!--+
+    |end bottomstrip
+    +-->
+</div>
+</body>
+</html>

Propchange: forrest/site/docs_0_90/howto/howto-custom-html-source.html
------------------------------------------------------------------------------
    svn:eol-style = native

Added: forrest/site/docs_0_90/howto/howto-custom-html-source.pdf
URL: http://svn.apache.org/viewvc/forrest/site/docs_0_90/howto/howto-custom-html-source.pdf?view=auto&rev=529910
==============================================================================
Binary file - no diff available.

Propchange: forrest/site/docs_0_90/howto/howto-custom-html-source.pdf
------------------------------------------------------------------------------
    svn:mime-type = application/pdf

Added: forrest/site/docs_0_90/howto/howto-editcss.html
URL: http://svn.apache.org/viewvc/forrest/site/docs_0_90/howto/howto-editcss.html?view=auto&rev=529910
==============================================================================
--- forrest/site/docs_0_90/howto/howto-editcss.html (added)
+++ forrest/site/docs_0_90/howto/howto-editcss.html Wed Apr 18 01:10:58 2007
@@ -0,0 +1,514 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta content="Apache Forrest" name="Generator">
+<meta name="Forrest-version" content="0.9-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to customize Forrest CSS 
+      WYSIWYG-style (v0.9-dev)</title>
+<link type="text/css" href="../../skin/basic.css" rel="stylesheet">
+<link media="screen" type="text/css" href="../../skin/screen.css" rel="stylesheet">
+<link media="print" type="text/css" href="../../skin/print.css" rel="stylesheet">
+<link type="text/css" href="../../skin/profile.css" rel="stylesheet">
+<script src="../../skin/getBlank.js" language="javascript" type="text/javascript"></script><script src="../../skin/getMenu.js" language="javascript" type="text/javascript"></script><script src="../../skin/fontsize.js" language="javascript" type="text/javascript"></script>
+<link rel="shortcut icon" href="../../favicon.ico">
+</head>
+<body onload="init()">
+<script type="text/javascript">ndeSetTextSize();</script>
+<div id="top">
+<!--+
+    |breadtrail
+    +-->
+<div class="breadtrail">
+<a href="http://www.apache.org/">apache</a> &gt; <a href="http://forrest.apache.org/">forrest</a><script src="../../skin/breadcrumbs.js" language="JavaScript" type="text/javascript"></script>
+</div>
+<!--+
+    |header
+    +-->
+<div class="header">
+<!--+
+    |start group logo
+    +-->
+<div class="grouplogo">
+<a href="http://www.apache.org/"><img class="logoImage" alt="Apache" src="../../images/apache-forrest.png" title="The Apache Software Foundation"></a>
+</div>
+<!--+
+    |end group logo
+    +-->
+<!--+
+    |start Project Logo
+    +-->
+<div class="projectlogo">
+<a href="http://forrest.apache.org/"><img class="logoImage" alt="Forrest" src="../../images/project-logo.gif" title="Apache Forrest"></a>
+</div>
+<!--+
+    |end Project Logo
+    +-->
+<!--+
+    |start Search
+    +-->
+<div class="searchbox">
+<form action="http://www.google.com/search" method="get" class="roundtopsmall">
+<input value="forrest.apache.org" name="sitesearch" type="hidden"><input onFocus="getBlank (this, 'Search the site with google');" size="25" name="q" id="query" type="text" value="Search the site with google">&nbsp; 
+                    <input name="Search" value="Search" type="submit">
+</form>
+</div>
+<!--+
+    |end search
+    +-->
+<!--+
+    |start Tabs
+    +-->
+<ul id="tabs">
+<li>
+<a class="unselected" href="../../index.html">Welcome</a>
+</li>
+<li>
+<a class="unselected" href="../../contrib.html">Developers</a>
+</li>
+<li class="current">
+<a class="selected" href="../../versions/index.html">Versioned Docs</a>
+</li>
+<li>
+<a class="unselected" href="../../pluginDocs/index.html">Plugins</a>
+</li>
+<li>
+<a class="unselected" href="../../tools/index.html">Tools</a>
+</li>
+</ul>
+<!--+
+    |end Tabs
+    +-->
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<!--+
+    |start Subtabs
+    +-->
+<div id="level2tabs">
+<a class="unselected" href="../../docs_0_80/index.html">0.80 (current)</a><a class="selected" href="../../docs_0_90/index.html">0.90-dev (under development)</a><a class="unselected" href="../../docs_0_70/index.html">0.70 (past)</a>
+</div>
+<!--+
+    |end Endtabs
+    +-->
+<script type="text/javascript"><!--
+document.write("Last Published: " + document.lastModified);
+//  --></script>
+</div>
+<!--+
+    |breadtrail
+    +-->
+<div class="breadtrail">
+
+             &nbsp;
+           </div>
+<!--+
+    |start Menu, mainarea
+    +-->
+<!--+
+    |start Menu
+    +-->
+<div id="menu">
+<div onclick="SwitchMenu('menu_selected_1.1', '../../skin/')" id="menu_selected_1.1Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">0.90-dev</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/your-project.html">Using Forrest</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.3', '../../skin/')" id="menu_selected_1.1.3Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">How-To</div>
+<div id="menu_selected_1.1.3" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/index.html">Overview</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.2', '../../skin/')" id="menu_1.1.3.2Title" class="menutitle">Install Forrest</div>
+<div id="menu_1.1.3.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/build.html" title="Build and install the current                     unreleased version">Building Forrest from Source</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/upgrading_09.html">Upgrading to 0.9</a>
+</div>
+<div class="menuitem">
+<a href="">Use Forrest</a>
+</div>
+<div onclick="SwitchMenu('menu_selected_1.1.3.5', '../../skin/')" id="menu_selected_1.1.3.5Title" class="menutitle" style="background-image: url('../../skin/images/chapter_open.gif');">Customize Forrest</div>
+<div id="menu_selected_1.1.3.5" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a href="../../docs_0_90/sitemap-explain.html">Sitemaps explained</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-custom-html-source.html">Custom html source</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/project-sitemap.html">Project sitemap</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">Edit CSS (WYSIWYG)</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-pdf-tab.html" title="Generate one pdf-document for all pages of a tab">Create tab PDF</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.6', '../../skin/')" id="menu_1.1.3.6Title" class="menutitle">Integrate Forrest with tools</div>
+<div id="menu_1.1.3.6" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-forrest-from-maven.html">Maven Integration</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/catalog.html">Using DTD Catalogs</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.7', '../../skin/')" id="menu_1.1.3.7Title" class="menutitle">Extend Forrest</div>
+<div id="menu_1.1.3.7" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-buildPlugin.html">Build a Plugin</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/skin-package.html">Package new Skins</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.9', '../../skin/')" id="menu_1.1.3.9Title" class="menutitle">Adding Documentation</div>
+<div id="menu_1.1.3.9" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../howto-howto.html" title="Instructions for writing                 a new howto-document">Write a How-to</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.3.9.2', '../../skin/')" id="menu_1.1.3.9.2Title" class="menutitle">Multipage HowTo</div>
+<div id="menu_1.1.3.9.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/howto-multi.html">Introduction</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step1.html">Step 1</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step2.html">Step 2</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/multi/step3.html">Step 3</a>
+</div>
+</div>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/faq.html">FAQs</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.5', '../../skin/')" id="menu_1.1.5Title" class="menutitle">Background</div>
+<div id="menu_1.1.5" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/linking.html">Menus and Linking</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/searching.html">Search Options in Forrest</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/locationmap.html">Locationmap</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/sitemap-ref.html">Sitemap Reference</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/skins.html" title="About default skins, their naming and features">Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/status-themes.html">Dispatcher versus Skins</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/cap.html">Sourcetype Action</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/validation.html">XML validation and entity resolution</a>
+</div>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/changes.html">Changes</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/glossary.html">Glossary</a>
+</div>
+<div onclick="SwitchMenu('menu_1.1.8', '../../skin/')" id="menu_1.1.8Title" class="menutitle">Reference docs</div>
+<div id="menu_1.1.8" class="menuitemgroup">
+<div onclick="SwitchMenu('menu_1.1.8.1', '../../skin/')" id="menu_1.1.8.1Title" class="menutitle">DTD documentation</div>
+<div id="menu_1.1.8.1" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/dtd-docs.html">Overview</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.dtdx.html">document-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v20.dtdx.html">howto-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v20.dtdx.html">faq-v20</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v13.dtdx.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/howto-v13.dtdx.html">howto-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/faq-v13.dtdx.html">faq-v13</a>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.8.2', '../../skin/')" id="menu_1.1.8.2Title" class="menutitle">Doc samples</div>
+<div id="menu_1.1.8.2" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../dtdx/document-v13.html">document-v13</a>
+</div>
+<div class="menuitem">
+<a href="../../dtdx/document-v20.html">document-v20</a>
+</div>
+</div>
+</div>
+<div onclick="SwitchMenu('menu_1.1.9', '../../skin/')" id="menu_1.1.9Title" class="menutitle">Older Docs</div>
+<div id="menu_1.1.9" class="menuitemgroup">
+<div class="menuitem">
+<a href="../../docs_0_90/primer.html">Forrest Primer</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/libre-intro.html">Libre</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/dreams.html">Dream list</a>
+</div>
+<div class="menuitem">
+<a href="../../docs_0_90/howto/cvs-ssh/howto-cvs-ssh.html">CVS over SSH</a>
+</div>
+</div>
+</div>
+<div id="credit">
+<hr>
+        This is documentation for development version v0.9-dev
+       (<a href="http://forrest.apache.org/versions/">More</a>)</div>
+<div id="roundbottom">
+<img style="display: none" class="corner" height="15" width="15" alt="" src="../../skin/images/rc-b-l-15-1body-2menu-3menu.png"></div>
+<!--+
+  |alternative credits
+  +-->
+<div id="credit2">
+<a href="http://apachecon.com/2007/EU/"><img border="0" title="ApacheCon Europe 2007" alt="ApacheCon Europe 2007 - logo" src="http://apache.org/ads/ApacheCon/2007-europe-125x125.png" style="width: 125px;height: 125px;"></a><a href="http://people.apache.org/calendar.html#200711"><img border="0" title="ApacheCon US 2007" alt="ApacheCon US 2007 - logo" src="http://apache.org/ads/ApacheCon/2007-usa-125x125.png" style="width: 125px;height: 125px;"></a>
+</div>
+</div>
+<!--+
+    |end Menu
+    +-->
+<!--+
+    |start content
+    +-->
+<div id="content">
+<div title="Portable Document Format" class="pdflink">
+<a class="dida" href="howto-editcss.pdf"><img alt="PDF -icon" src="../../skin/images/pdfdoc.gif" class="skin"><br>
+        PDF</a>
+</div>
+<div class="trail">Font size: 
+	          &nbsp;<input value="Reset" class="resetfont" title="Reset text" onclick="ndeSetTextSize('reset'); return false;" type="button">      
+	          &nbsp;<input value="-a" class="smallerfont" title="Shrink text" onclick="ndeSetTextSize('decr'); return false;" type="button">
+	          &nbsp;<input value="+a" class="biggerfont" title="Enlarge text" onclick="ndeSetTextSize('incr'); return false;" type="button">
+</div>
+<h1>How to customize Forrest CSS 
+      WYSIWYG-style</h1>
+<div class="abstract">
+      This How-To shows how to use Mozilla Firefox and the free EditCSS-Plugin
+      to customize your Forrest design in a WYSIWYG-way.
+    </div>
+<div id="motd-area">
+        This is documentation for development version v0.9-dev
+       (<a href="http://forrest.apache.org/versions/">More</a>)</div>
+<div id="minitoc-area">
+<ul class="minitoc">
+<li>
+<a href="#Intended Audience">Intended Audience</a>
+</li>
+<li>
+<a href="#Purpose">Purpose</a>
+</li>
+<li>
+<a href="#Prerequisites">Prerequisites</a>
+</li>
+<li>
+<a href="#Steps">Steps</a>
+<ul class="minitoc">
+<li>
+<a href="#openForrest">Open your Forrest</a>
+</li>
+<li>
+<a href="#OpenEditCSS">Open the EditCSS-Sidebar</a>
+</li>
+<li>
+<a href="#changeCSS">Change any CSS</a>
+</li>
+<li>
+<a href="#saveChanges">How to save changes?</a>
+</li>
+</ul>
+</li>
+<li>
+<a href="#Feedback and further development of this How-To">Feedback and further development of this How-To</a>
+</li>
+</ul>
+</div>
+<a name="N10010"></a><a name="Intended Audience"></a>
+<h2 class="underlined_10">Intended Audience</h2>
+<div class="section">
+<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>
+</div>
+<a name="N10018"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<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>
+</div>
+<a name="N10023"></a><a name="Prerequisites"></a>
+<h2 class="underlined_10">Prerequisites</h2>
+<div class="section">
+<p>
+      To follow these instructions you will need:
+    </p>
+<ol>
+      
+<li>Browser-access to the Forrest-site you want 
+        to experiment with. Starting with a new 'forrest seed' site is
+        good for your first attempt.
+        <div class="note">
+<div class="label">Note</div>
+<div class="content">
+          You can even experiment with Forrest's core skins CSS. Please send
+          patches if you enhance something.
+        </div>
+</div>
+</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="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a>
+</li>
+      
+<li>The Firefox-PlugIn EditCSS. It downloads 
+        and installs in just a few seconds from the 
+        Install-Link at <a href="http://editcss.mozdev.org/">http://editcss.mozdev.org/</a>
+        
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+          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.
+        </div>
+</div>
+</li>
+      
+<li>A basic understanding of CSS and access to 
+        a good CSS-reference. Tutorials and 
+        Reference can be found at <a href="http://www.htmlhelp.com/reference/css/">http://www.htmlhelp.com/reference/css/</a>.</li>
+    
+</ol>
+</div>
+<a name="N10049"></a><a name="Steps"></a>
+<h2 class="underlined_10">Steps</h2>
+<div class="section">
+<a name="N1004E"></a><a name="openForrest"></a>
+<h3 class="underlined_5">Open your Forrest</h3>
+<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>
+<a name="N1005C"></a><a name="OpenEditCSS"></a>
+<h3 class="underlined_5">Open the EditCSS-Sidebar</h3>
+<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>
+<a name="N1006A"></a><a name="changeCSS"></a>
+<h3 class="underlined_5">Change any CSS</h3>
+<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>
+<div class="note">
+<div class="label">Note</div>
+<div class="content">
+        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.
+      </div>
+</div>
+<a name="N1007B"></a><a name="saveChanges"></a>
+<h3 class="underlined_5">How to save changes?</h3>
+<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>
+</div>
+<a name="N10085"></a><a name="Feedback and further development of this How-To"></a>
+<h2 class="underlined_10">Feedback and further development of this How-To</h2>
+<div class="section">
+<p>
+      Please provide feedback about this document via the
+      <a href="../../mail-lists.html">mailing lists</a>.
+    </p>
+</div>
+</div>
+<!--+
+    |end content
+    +-->
+<div class="clearboth">&nbsp;</div>
+</div>
+<div id="footer">
+<!--+
+    |start bottomstrip
+    +-->
+<div class="lastmodified">
+<script type="text/javascript"><!--
+document.write("Last Published: " + document.lastModified);
+//  --></script>
+</div>
+<div class="copyright">
+        Copyright &copy;
+         2002-2007 <a href="http://www.apache.org/licenses/">The Apache Software Foundation.</a>
+</div>
+<!--+
+    |end bottomstrip
+    +-->
+</div>
+</body>
+</html>

Propchange: forrest/site/docs_0_90/howto/howto-editcss.html
------------------------------------------------------------------------------
    svn:eol-style = native

Added: forrest/site/docs_0_90/howto/howto-editcss.pdf
URL: http://svn.apache.org/viewvc/forrest/site/docs_0_90/howto/howto-editcss.pdf?view=auto&rev=529910
==============================================================================
Binary file - no diff available.



Mime
View raw message