The af:menuBar is implemented using an inner table nested within an outer table. The outer table contains cells for the a f|menuBar::start-icon and af|menuBar::end-icon icons, as well as a cell for the nested inner table. The inner table contains the actual contents of the menuBar - which includes the af:menuBar items if any items exist, or possibly the af:menuBar title if no items are specified.

Style properties can be applied to either the outer table or the inner table, depending on how the styles are meant to be used. The af|menuBar style can be used to apply styles to the entire menuBar - including the af|menuBar::start-icon/af|menuBar::end-icon icons. Note, however, that if these icons are transparent, then setting the background color or borders on the af|menuBar style class itself is probably not desirable, since the background color will show through any transparent pixels in the icons.

Three other styles can be used to apply styles to the inner contents of the af:menuBar (not including the af|menuBar::start-icon and af|menuBar::end-icon icons). If the af:menuBar contains any items, the af|menuBar::body style class is used to style the inner table which contains the items. This is a good choice for specifying a background color for the af:menuBar, since this background color is not applied to the af:menuBar's outer icons. If no af:menuBar items are present, but the af:menuBar's text attribute is specified, the af|menuBar::title style class is rendered on the inner table instead of af|menuBar::body. If no children are present and there is no title, the af|menuBar::empty title is used.

This af:messages component is implemented using an inner table nested within an oute r table. The outer container is used to lay out the messages' icons. The inner container contains the actual contents of the messages. If any transparent icons are used, style properties such as the background color should probably be set on the inner table via the af|messages::body selector.

The panelBox contains two main regions: the body regio n, which contains the panelBox contents, and the header region, which contains the panelBox header text (set by the text attribute on af:panelBox). Styles can be applied to the body region via the af|panelBox::body selector. Similarly, styles for the header region are specified via the af|panelBox::header selector.

These two regions are themselves rendered within an outer container that can be styled as well. There are two different sets of selectors for the outer region, depending on whether a header is present. If a header is present, one of the following selectors is used, depending on the panelBox background color (background color can be quickly configured to dark, medium, or light using the background attribute on panelBox).

• af|panelBox::dark
• af|panelBox::medium
• af|panelBox::light
• af|panelBox::transparent

If no header is present , the outer container instead uses the following style classes:

• af|panelBox::content-dark
• af|panelBox::content-medium
• af|panelBox::content-light
• af|panelBox::content-transparent

In order to apply a style to the panelBox body or header for a particular background type, a contextual selector can be used. For example, the following selectors can be used to change the properties of dark panelBox header and body regions:

      
     af|panelBox::dark af|panelBox::header {...} af|panelBox::dark
   
     
             af|panelBox::body {...}
   
    

And the following selector can be used to change the properties of the dark panelBox body for panelBox which do not have a header:

      
     af|panelBox::content-dark af|panelBox::body {...}
   
    

In order to make it easier to apply common style properties across panelBox of different background types, several alias styles are exposed. For example, the .AFPanelBoxDarkBackground:alias aliased style provides a way to set the background color for all dark panelBox. This aliased style is used regardless of whether the outer container uses the af|panelBox::dark or af|panelBox::content-dark style class (ie. whether or not a header is present).

The panelBox defines four sets of icons: one set for each background type. Customizers are not required to specify icons for all of the different icon names. If an icon is omitted, the panelBox will attempt to expand to fill any empty space.