forrest-svn mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From cross...@apache.org
Subject svn commit: rev 56726 - forrest/site/howto
Date Sat, 06 Nov 2004 02:46:47 GMT
Author: crossley
Date: Fri Nov  5 18:46:46 2004
New Revision: 56726

Added:
   forrest/site/howto/howto-corner-images.html   (contents, props changed)
   forrest/site/howto/howto-corner-images.pdf   (contents, props changed)
Modified:
   forrest/site/howto/howto-asf-mirror.html
   forrest/site/howto/howto-howto.html
   forrest/site/howto/howto-pdf-tab.html
   forrest/site/howto/index.html
   forrest/site/howto/index.pdf
Log:
new "howto-corner-images".


Modified: forrest/site/howto/howto-asf-mirror.html
==============================================================================
--- forrest/site/howto/howto-asf-mirror.html	(original)
+++ forrest/site/howto/howto-asf-mirror.html	Fri Nov  5 18:46:46 2004
@@ -119,6 +119,9 @@
 <div class="menuitem">
 <a title="" href="../howto/howto-pdf-tab.html">Create tab PDF</a>
 </div>
+<div class="menuitem">
+<a title="" href="../howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
 </div>
 <div id="credit"></div>
 <div id="roundbottom">

Added: forrest/site/howto/howto-corner-images.html
==============================================================================
--- (empty file)
+++ forrest/site/howto/howto-corner-images.html	Fri Nov  5 18:46:46 2004
@@ -0,0 +1,556 @@
+<!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.7-dev">
+<meta name="Forrest-skin-name" content="pelt">
+<title>How to modify the color of generated corner images</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:');" value="Search the site with google:" size="25" name="q"
id="query" type="text">&nbsp; 
+                    <input name="Search" value="Search" type="submit">
+</form>
+</div>
+<!--+
+    |end search
+    +-->
+<!--+
+    |start Tabs
+    +-->
+<ul id="tabs">
+<li>
+<a class="base-not-selected" href="../index.html">Welcome</a>
+</li>
+<li>
+<a class="base-not-selected" href="../contrib.html">Project</a>
+</li>
+<li>
+<a class="base-not-selected" href="../docs/your-project.html">Documentation</a>
+</li>
+<li class="current">
+<a class="base-selected" href="../howto/index.html">How-To</a>
+</li>
+</ul>
+<!--+
+    |end Tabs
+    +-->
+</div>
+</div>
+<div id="main">
+<div id="publishedStrip">
+<!--+
+    |start Subtabs
+    +-->
+<div id="level2tabs"></div>
+<!--+
+    |end Endtabs
+    +-->
+<script type="text/javascript" language="JavaScript"><!--
+              document.write("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');">How-To</div>
+<div id="menu_selected_1.1" class="selectedmenuitemgroup" style="display: block;">
+<div class="menuitem">
+<a title="" href="../howto/index.html">Overview</a>
+</div>
+<div class="menuitem">
+<a title="" href="../howto/howto-howto.html">Write a How-to</a>
+</div>
+<div class="menuitem">
+<a title="" href="../howto/howto-asf-mirror.html">Download mirror</a>
+</div>
+<div class="menuitem">
+<a title="" href="../howto/howto-pdf-tab.html">Create tab PDF</a>
+</div>
+<div class="menupage">
+<div class="menupagetitle">CSS corner SVG</div>
+</div>
+</div>
+<div id="credit"></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>
+<!--+
+    |end Menu
+    +-->
+<!--+
+    |start content
+    +-->
+<div id="content">
+<div id="skinconf-txtlink"></div>
+<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="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>
+ 
+<header>
+  
+<title>How to modify the color of generated corner images</title>
+  
+<a name="N10016"></a><a name="Overview"></a>
+<h2 class="underlined_10">Overview</h2>
+<div class="section">
+<p>
+    This How-To describes how to modify the corner images that appear in
+    the menu and tabs of the skins.
+  </p>
+</div>
+  
+<last-modified-content-date date="2004-11-05"></last-modified-content-date>
+ 
+</header>
+
+  
+<a name="N10021"></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="N1002D"></a><a name="Purpose"></a>
+<h2 class="underlined_10">Purpose</h2>
+<div class="section">
+<p>
+      Forrest renders the corner images through
+      <a class="external" 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="N1003A"></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/your-project.html">Using Forrest</a> document
+       (topic "<a href="../docs/your-project.html#skins">Forrest skins</a>").</li>
+    
+</ul>
+</div>
+
+  
+<a name="N10051"></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="N1005C"></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}/src/core/context/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>
+<a name="N10137"></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="N1018E"></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="N101BF"></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-2004 The Apache Software Foundation.</div>
+<!--+
+    |end bottomstrip
+    +-->
+</div>
+</body>
+</html>

Added: forrest/site/howto/howto-corner-images.pdf
==============================================================================
Binary file. No diff available.

Modified: forrest/site/howto/howto-howto.html
==============================================================================
--- forrest/site/howto/howto-howto.html	(original)
+++ forrest/site/howto/howto-howto.html	Fri Nov  5 18:46:46 2004
@@ -119,6 +119,9 @@
 <div class="menuitem">
 <a title="" href="../howto/howto-pdf-tab.html">Create tab PDF</a>
 </div>
+<div class="menuitem">
+<a title="" href="../howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
 </div>
 <div id="credit"></div>
 <div id="roundbottom">

Modified: forrest/site/howto/howto-pdf-tab.html
==============================================================================
--- forrest/site/howto/howto-pdf-tab.html	(original)
+++ forrest/site/howto/howto-pdf-tab.html	Fri Nov  5 18:46:46 2004
@@ -119,6 +119,9 @@
 <div class="menupage">
 <div class="menupagetitle">Create tab PDF</div>
 </div>
+<div class="menuitem">
+<a title="" href="../howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
 </div>
 <div id="credit"></div>
 <div id="roundbottom">

Modified: forrest/site/howto/index.html
==============================================================================
--- forrest/site/howto/index.html	(original)
+++ forrest/site/howto/index.html	Fri Nov  5 18:46:46 2004
@@ -119,6 +119,9 @@
 <div class="menuitem">
 <a title="" href="../howto/howto-pdf-tab.html">Create tab PDF</a>
 </div>
+<div class="menuitem">
+<a title="" href="../howto/howto-corner-images.html">CSS corner SVG</a>
+</div>
 </div>
 <div id="credit"></div>
 <div id="roundbottom">
@@ -166,6 +169,13 @@
 <a href="../howto/howto-pdf-tab.html">How to create a PDF document for each tab</a>
         - Describes the generation of a PDF document for each
         group of documents that is defined by a tab.
+      </li>
+      
+<li>
+<a href="../howto/howto-corner-images.html">How to modify the color of generated corner
images</a>
+        - Describes the use of CSS values from the skinconf.xml configuration
+        file to change the color of the corner images to be suitable for
+        your own skin colors. Advanced use explains editing the *.css too.
       </li>
     
 </ul>

Modified: forrest/site/howto/index.pdf
==============================================================================
Binary files. No diff available.

Mime
View raw message