Working with ADF Skin Selectors 2-11
is a pseudo-class applied to currently selected components in the active inline-editable subtree.
■
Message : This pseudo-class is used to set component-level message styles using
CSS pseudo-classes of :fatal, :error, :warning, :confirmation, and :info. For more information, see
Section 5.5, Configuring ADF Skin Properties to Apply to Messages.
2.3 Properties in the ADF Skinning Framework
The ADF skinning framework defines a number of ADF skin properties. The Fusion web application, rather than the user’s browser, interprets ADF skin properties. When
configured, ADF skin properties enable you to do the following:
■
Suppress styles defined in an ADF skin with the -tr-inhibit skin property. Suppress or reset CSS properties inherited from a base skin with the
-tr-inhibit skin property. For example, the -tr-inhibit:padding property will remove any inherited padding. Remove clear all inherited properties with
the -tr-inhibit:all property. The suppressed property name must be matched exactly with the property name in the base skin
■
Reference styles from other selectors with the -tr-rule-ref property. Create your own global selector alias and combine it with other selectors using the
-tr-rule-ref property. For more information, see Section 8.2, Creating a
Global Selector Alias.
■
Reference the value of a property defined in another selector using the -tr-property-ref property.
For more information, see Section 8.5, Referencing a Property Value from Another
Selector.
■
Configure the themes for child components with the -tr-children-theme property.
For more information, see Section 5.6, Applying Themes to ADF Faces
Components.
■
ADF skin selectors with style properties. Skin style properties allow you to customize the rendering of a component
throughout the application. A CSS property is stored with a value in the Skin object and is available when the component is being rendered. For example, in
af|breadCrumbs{-tr-show-last-item: false}, the skin property -tr-show-last-item is set to hide the last item in the breadCrumbs
component’s navigation path.
The ADF skinning framework also provides the + and - operators that allow you to set a selector’s color or font properties relative to the value that you specify for the
color or font properties of another selector. This is useful if you want to apply a range of colors to selectors or maintain a relative size between fonts.
Example 2–1 demonstrates the syntax that you write to make use of this feature for a
color property. A global selector alias defines the background color that two additional
Note: The global selector aliases that appear in the Selector Tree are a
special type of pseudo-class :alias. For more information, see Chapter 8, Working With Global Selector Aliases.
2-12 Skin Editor Users Guide for Oracle Application Development Framework
global selector aliases .fooColorTestPlus and .fooColorTestMinus apply using the + and - operators.
Example 2–1 Using the + and - Operators to Apply Color
.BaseBackgroundColor:alias { background-color: 0099ff; } .fooColorTestPlus {
-tr-rule-ref: selector.BaseBackgroundColor:alias; background-color: +333333;
} .fooColorTestMinus {
-tr-rule-ref: selector.BaseBackgroundColor:alias; background-color: -333333;
}
Example 2–2 demonstrates the syntax that you write to make use of this feature for a
font property. A global selector alias defines the font size and an additional global selector alias .fooFontTest increases this font size by 1pt using the + operator.
Example 2–2 Using the + Operator to Increase Font Size
.FontSizeTest:alias {font-size: 12pt;} .fooFontTest {
-tr-rule-ref: selector.FontSizeTest:alias; font-size:+1pt;
}
2.4 Rules in the ADF Skinning Framework
