+ +

+ + +

+ +

+ + +

+ + + + + +

+ PDF +

+ Font size: + + + +

How to modify the color of generated corner images

+ This How-To describes how to modify the corner images that appear in + the menu and tabs of the skins. +

+Intended Audience +
+Purpose +
+Prerequisites +
+Steps +
+
+Feedback +

+ +

+ +How to modify the color of generated corner images + + +

Overview

+ This How-To describes how to modify the corner images that appear in + the menu and tabs of the skins. +

+ + + +

Intended Audience

+ Users who want to change the colors of the corner images in the + output html documents. +

+ This explanation is also useful for skin developers to understand + the corner image generation process. +

+ + + +

Purpose

+ Forrest renders the corner images through + Scalable Vector Graphics (SVG). + It may be necessary to change the color of + the corner images to be suitable for your own skin colors. +

+ + + +

Prerequisites

Understand how to use the skinconf.xml file to change the appearance + of the output documents.
Understand how to create or modify skins by following the + Using Forrest document + (topic "Forrest skins").

+ + + +

Steps

+ 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 + src/documentation/skinconf.xml of a project. +

+ +

Understand how corner images are named (the contract)

+ The corner images are referenced in some .css files of the + above-named skins; for example, in screen.css of the pelt skin: +

+/*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;
+}
+...
+

+ The naming follows a contract which is described below. In general, + the naming looks like: +

+images/{$name}-{$v-orientation}-{$h-orientation}-{$size}-1{$backgroundColor}-2{$strokeColor}-3{$foregroundColor}
+

+ The first part + (images/{$name}-{$v-orientation}-{$h-orientation}-{$size}) + identifies which images is used and how big (width x height) it should + be. The second part\ + (-1{$backgroundColor}-2{$strokeColor}-3{$foregroundColor}) + identifies the coloring of each portion of the image. The input + parameter for the second part comes from the color profile of + src/documentation/skinconf.xml. The second part is + easily identifiable through the numbering 1-2-3. +

+ Let us get into details: +

+images +

+ Path to the xslt that creates the corner. +
+ +images/ = {$FORREST_HOME}/src/core/context/skins/common/images/ + +

+{$name} +

+ In the common skin there are two XSLT files ready for use: +

+ +rc.svg.xslt: handles rounded corners +
+ +dc.svg.xslt: handles diagonal 45-degree corners +

+ +name = [rc|dc] + +
+ +e.g. rc + +

+{$v-orientation} +

+ Vertical orientation of the corner images (top or bottom). +
+ +v-orientation = [t|b] + +
+ +e.g. t + +

+{$h-orientation} +

+ Horizontal orientation of the corner images (left or right). +
+ +h-orientation = [l|r] + +
+ +e.g. r + +

+{$size} +

+ Pixels size of the width and height of the corner image. +
+ +size=x + +
+ +e.g. 5 + +

+{$backgroundColor} +

+ Any <color name=""/> element in the skinconf.xml (the value="{$color}" + attribute will be applied). +
+ +e.g. header + +

+{$strokeColor} +

+ Any <color name=""/> element in the skinconf.xml (the value="{$color}" + attribute will be applied). +
+ +e.g. searchbox + +

+{$foregroundColor} +

+ Any <color name=""/> element in the skinconf.xml (the value="{$color}" + attribute will be applied). +
+ +e.g. searchbox + +

+ +

Modifying the skinconf.xml of your project

+ modifying the skinconf.xml of your project (by + default you find it at [project-dir]/src/documentation/). +

+ Starting about line 155 you find a <colors> + ... </colors> element with content commented-out: +

+<colors>
+<!-- These values are used for the generated CSS files. -->
+
+<!-- Krysalis -->
+<!--
+  <color name="header"    value="#FFFFFF"/>
+
+  <color name="tab-selected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/>
+  <color name="tab-unselected" value="#F7F7F7" link="#000000" vlink="#000000" hlink="#000000"/>
+  <color name="subtab-selected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/>
+  <color name="subtab-unselected" value="#a5b6c6" link="#000000" vlink="#000000" hlink="#000000"/>
+
+...
+
+-->
+
+</colors>
+

+ To modify the colors of the corner images, you can either define + your own <color name=.../> elements or uncomment + one of the existing <color name=.../> elements + and adjust the color value to your needs. +

+ +e.g. + +

+<color name="tab-selected" value="#FF0000"/>
+

+ This affects all corner images whose {$backgroundColor}, {$strokeColor} or + {$foregroundColor} is set to tab-selected. +
+ For example, in screen.css (of the "pelt" skin) you find: +

+#roundbottomsmall {
+    background-image: url(images/rc-b-r-5-1header-2tab-selected-3tab-selected.png);
+    background-repeat: no-repeat;
+    background-position: top right;
+}
+

+ Now the stroke color (-2tab-selected) and the foreground + color (-3tab-selected) are set to red (remember: we + defined #FF0000 as the "color" value of + tab-selected). +

+ +

Modifying .css files

+ In addition to the modification of skinconf.xml + you can also modify the respective .css file of your skin. +

+ Here's another example: +

+/*your .css file*/
+...
+#roundbottomsmall {
+    background-image: url(images/rc-b-r-5-1foo-2secondfoo-3thirdfoo.png);
+    background-repeat: no-repeat;
+    background-position: top right;
+}
+...
+

+<!-- your skinconf.xml -->
+...
+<colors>
+  <color name="foo" value="#FF0000"/>
+  <color name="secondfoo" value="#00FF00"/>
+  <color name="thirdfoo" value="##00FF00"/>
+</colors>
+

+ Here we have created our own color tags (in the .css file) and + defined the respective values for them (in skinconf.xml). + Now you have color images with a red background and a green + foreground. Horrible, isn't it? +

+ + + +

Feedback

+ Please provide feedback about this document via the + mailing lists. +

+ +