svn commit: r964258 - /myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml

[jw...@apache.org]

Author: jwaldman
Date: Wed Jul 14 23:12:38 2010
New Revision: 964258

URL: http://svn.apache.org/viewvc?rev=964258&view=rev
Log:
TRINIDAD-1853 document skinning's relative color and font-size feature.

Modified:
    myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml

Modified: myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml?rev=964258&r1=964257&r2=964258&view=diff
==============================================================================
--- myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml (original)
+++ myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml Wed Jul 14 23:12:38 2010
@@ -768,7 +768,7 @@ public class SkinTranslationMapDemo
         
         <P>
         You can do things in a skin css file beyond what you can do in a regular css file. 
-        At runtime the skin framework processes the skin's css file and 
+        At runtime the skin framework processes the skin's css file and the
         skin framework pulls out skinning properties and icons and registers them with the Skin object. 
         The skinning framework merges styles together that use the -tr-rule-ref property. 
         The skinning framework picks the styles based on the HTTP request information, like agent
@@ -813,6 +813,40 @@ public class SkinTranslationMapDemo
         "background-color"). This is useful when only some properties from another style are needed to be included.
         In this case, we won't need to include the entire style via a -tr-rule-ref rule, but only the needed property.
         </li>
+        <li>
+        <strong>+/-</strong> - > This feature of the skinning framework allows you to set
+        a selector's color or font that is relative to another selector's color or font. 
+        This is useful if you have color ramps. You can change the color in one place. An example
+        for the color is:
+        <source>
+          <![CDATA[
+          .BaseBG:alias { background-color: #0099ff; }
+          .fooColorTest {
+             -tr-rule-ref: selector(".BaseBG:alias");
+             background-color: +#333333;}
+          .fooColorTestMinus {
+            -tr-rule-ref: selector(".BaseBG:alias");
+            background-color: -#333333;
+          }
+
+this resolves to
+
+          .fooColorTest {background-color:#33ccff}
+          .fooColorTestMinus {background-color:#0066cc}
+          ]]>
+        </source>
+        The same thing works for fonts.
+        <source>
+          <![CDATA[    
+            .FontSizeTest:alias {font-size: 12pt;}
+
+            .fooFontTest {
+              -tr-rule-ref: selector(".FontSizeTest:alias");
+              font-size:+1pt;
+            }
+          ]]>
+        </source>        
+        </li>
         </ul>
         <P>
         You might not want your selector's css properties to be applied to all browsers, all platforms,