Skinning af|menu

Question

Hi,
I am trying to customize look of af|menu component. In my jspx page I have af|menuBar component and several af|menu items in it. I want to create rounded edges and to put background color gradients on that top level menu items.
In skinning document there are only two selectors af|menu and af|menuBar, and they are not useful at all.
I have found out that with af|menu::bar-item selector I can change css properties of that menu items.
In rendered html document I saw that menu items are rendered as <td> html elements with class="af_menu_bar-item". In that <td> there are three <div> tags with classes: af_menu_bar-item-start, af_menu_bar-item-content and af_menu_bar-item-end. The idea is to put background images in that start and end divs to get rounded edges. Is there skinning selector which I can use for that. I have succeeded to put color gradients with
rule:
af|menu::bar-item.mainMenuItem {     
background-image:url("images/tee_tabBackground.png");
background-repeat: repeat-x;
Generally what selectors can I use for af|menu.

Answer 1

Hi,
not sure what has been valid in TP2, but in TP4 its
.AFMenuItem
Style class that applies to menu items. Valid menu items are either commandMenuItems or submenus (menus in menus).
.AFMenuItemDisabled
Style class that applies to disabled menu items. Valid menu items are either commandMenuItems or submenus (menus in menus).
af|menu
Selector that renders on the root dom element of the component. Menu supports further styling with the :disabled, :highlighted and :depressed pseudo-classes. The part of the menu that appears on the menu bar or in a menu (as a submenu) is not only highlighted on mouseover, but also when it is selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes. Also of note, within the af|menu selector you can specify the -tr-visible-items property. The root style contains skinning property "-tr-open-animation-duration" that specifies the animation duration for opening the menu. This skin property is honored only if the animation is enabled in the system.
af|menu::bar-item
Style applied to the menu bar item that is shown on a menubar (when a menu is located on a menubar). The menu bar item is further defined by 3 major sections, the "bar-item-icon-style" which contains the optional icon attribute, the "bar-item-text" which contains the menu text, and the "bar-item-open-icon-style" which contains the icon that opens the menu itself.
af|menu::bar-item-icon-style
Style applied to a menu bar item's icon container, which is the part of the menu bar item before its text. The icon is specified as an optional attribute on the menu.
af|menu::bar-item-access-key
Style on the access key character of a menu, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias.
af|menu::bar-item-text
Style applied to the menu's text, as shown on the menu bar.
af|menu::bar-item-open-icon-style
For menus that appear in a menubar, this is the style on the menu's open icon (i.e., the drop down menu icon). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the bar-item-open-icon-style and define the icon for the bar-item-open-icon key.
af|menu::child-container
Style applied to the menu container that appears when you open a menu. The menu container contains the child contents, called menu items, of the menu. These menu items can be either additional menus, called submenus, or commandMenuItems.
af|menu::scroll-up-icon-style
Style on the scroll up icon that is present in a menu when there are more menu items present than the menu's maximum item setting. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the scroll-up-icon-style and define the icon for the scroll-up-icon key.
af|menu::scroll-down-icon-style
Style on the scroll down icon that is present in a menu when there are more menu items present than the menu's maximum item setting. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the scroll-down-icon-style and define the icon for the scroll-down-icon key.
af|menu::submenu
Style applied to the submenu item inside a menu (when a menu is located inside another menu). The submenu is further defined by 4 major sections, the "submenu-icon-style" which contains the optional icon attribute, the "submenu-text" which contains the menu text, the "submenu-accelerator" which is the empty space corresponding to where a commandMenuItem's accelerator appears, and the "submenu-open-indicator" which is the space where the open indicator ("submenu-open-icon-style") appears.
af|menu::submenu-icon-style
Style applied to a submenu's icon container, for submenus that have assigned icons. The icon is specified as an attribute on the menu.
af|menu::submenu-text
Style applied to the submenu's text, as shown inside the menu.
af|menu::submenu-access-key
Style on the access key character of the submenu, as shown inside the menu. Includes the .AFFormAccessKeyStyle:alias.
af|menu::submenu-accelerator
Style on the part of the submenu where an accelerator keyboard shortcut would go. CommandMenu Items (which can also appear inside menus) have accelerators while menus do not. Because menus do not have accelerators, this is just an empty section near the end of the submenu item.
af|menu::submenu-open-indicator
Style on the section of the submenu that contains its open icon for opening the nested submenu. The submenu-open-icon-style, which contains the actual icon image, is a child of this element.
af|menu::submenu-open-icon-style
Style for a submenu open icon, which is present when you have menus inside of menus (nested submenus). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the submenu-open-icon-style and define the icon for the submenu-open-icon key.
af|menu::separator-row
Style on the row inside a menu that contains a separator. Menus have separators when they have grouped menu items inside the menu.
af|menu::separator
Style on the separator line itself. The separator stretches across most of the separator-row, but not the space on the left where optional icons go.
af|menu::detachable-header
The header row for a detachable menu. Contains the detachable-header-content-center and af|panelWindow::close-icon-style. When attached, the header shows a detach grip. When detached, the header appears similar to a panelWindow header.
af|menu::detachable-header-content-center
The center content for the detachable header row. When attached, contains the detach-handle and spans the header row. When detached, contains a af|panelWindow::title and shares the header row with the af|panelWindow::close-icon-style.
af|menu::detach-handle
Style on the top of a detachable menu where a user can grab and drag the detachable menu.
af|menu::detach-grip
For a detachable menu, this is the style on the part of the detachable handle where the grip image is located. This image is a background image for this style and can be customized by specifying an alternate background image.
af|menu::fetching-message
Styling on the 'data fetching...' text message that briefly appears when a menu that has contentDelivery set to lazy is first opened. This message is displayed while the menu information is retrieved from the server.
Frank