Selectors for Skinning Fusion's ADF Faces Components

NOTICE: These skin selectors still need to be reviewed, and they are subject to change. Also, this skin document is incomplete. We have not yet documented the skinning keys for all skinnable components. Any developers using these skinning keys must do so with the knowledge that all such skinning code may need to be rewritten.

• Overview
• Global Selectors
• Message Selectors
• BIDI and :rtl pseudo-class
• Component-level Selectors

Overview

     Examples of some ADF Faces Skin selectors:
     /* Global selectors affect more than one component */
     .AFDefaultFontFamily:alias {
       font-family: Tahoma, Verdana, Helvetica, sans-serif;
      }

     /* Component-specific selector.  */
     af|inputText::content
      {
         background-color: red;
      }
      

Global Selectors

  af|foo,
  .AFDarkTone .AFMediumTone af|foo,
  .AFDarkTone .AFLightTone af|foo,
  .AFDarkTone .AFDefaultTone af|foo {
    color: black;
  }
  .AFDarkTone af|foo {
    color: white;
  }

                <af:popup id="popup">
                  <af:panelGroupLayout layout="vertical">
                    Hi! I am displayed in a popup.
                  </af:panelGroupLayout>
                </af:popup>
                <af:commandButton text="Show Skinned Popup" id="button">
                  <af:showPopupBehavior popupId="popup"
                      align="afterEnd" alignId="button"/>
                </af:commandButton>
            

Message Selectors

  af|inputText::content {
    /*defines the base style for the content region of the af:inputText tag*/
  }
  af|inputText:error::content {
    /*defines the base style for the content region of the ad:inputText tag
      whem an error message is present.  The default will also be processed
      in addition to this special "error" style.
  }

BIDI and :rtl pseudo-class

You can add the :rtl pseudo-class to your selector when you want it to be rendered in right-to-left mode. This is most useful for non-symmetrical images. An example of the skinning key format is : af|panelAccordion::header-start:rtl

status pseudo-classes

You can add :hover and :active pseudo-class to your selector to change display style when mouse hovered and mouse pressed. There are also skinning keys for other status, such as disabled. If :active and :disabled are specified, make sure to specify :disabled:active to prevent disabled element from showing mouse down status when pressed by mouse. :disabled:active style should be the same as :disabled style. An example of the skinning key format is : af|inputDate::launch-icon-style:disabled:active.

Component-level Selectors

Component-level selectors are selectors that can be used to skin a particular ADF Faces component. The selectors defined below are specified by the component they affect. Let's say you want to skin the af:inputText component. If you go to the af:inputText Component section of this document, you will see the selectors that you can use to skin the af:inputText component. One of the selectors is af|inputText::content. The ::content pseudo-element indicates that this is the content portion of the af:inputText component; the input. To skin this you would set css properties on the af|inputText::content selector in your ADF Faces skin .css file.

• A-F
• G-N
• M-R
• S
• T-Z