Change highlighting of top-level items in menubar Flash Builder 4.6

Question

I have been employed to help with flex page building and three days into learning about flash builder I have been given a tast to change the way top-level items are higlhlighted in a menubar. Currently it's default, so the items change their colours to blue when hoovered over.

What I want to do is to make the text get underlined when hoovered over with a mouse, and not change its colour to blue.

Tried changing it through CSS, but the only thing that changes are the submenu items, not the top level:

Code in main application responsible for menubar kept in a BorderContainer:

<mx:MenuBar id="mbPrimaryMenu" height="40" labelField="@label"
dataProvider="{primaryMenuItems}" change="mbPrimaryMenuChangeHandler(event)"/>

CSS responsible forformatting of what I thought was the entire menubar (top-level elements included):

#mbPrimaryMenu {
    chromeColor: #333333;
    borderVisible: true;
    borderColor: #000000;
    borderAlpha: 0;
    borderStyle: solid;
    borderWeight: 2;
    color: #FFFFFF;
    contentBackgroundColor: #333333;
    contentBackgroundAlpha: 0.8;
    rollOverColor: #AAAAAA;
    itemRollOverColor: #FF0000;

How do I do this? CSS, MenuBarItemRenderer? Where do I look for the way menubar highlights its elements when mouse rolls over one of its elements?

score 1 · Accepted Answer · edited May 23 '17 at 12:04

To get the menu bar's first level text underlined, just set the textDecoration property where you add the MXML component. That is:

<mx:MenuBar width="100%" height="20" textDecoration="underline" dataProvider="{myData}"/>

To change the menu bar's top level background colors, you'll need to copy then edit the default skins. This might seem intimidating, but it's actually very easy to do. (if you never created a custom skin before, see my answer here to get you started: Add search icon inside spark TextInput in Flex )

You can apply the skins in MXML, or since you're using CSS you could apply them in CSS using:

mx|MenuBar {
backgroundSkin: ClassReference("com.mycompany.views.components.skins.MyButtonSkin");
   /* changes background color at top level*/
itemSkin: ClassReference("com.mycompany.views.components.skins.MyMenuItemSkin"); 
   /* changes background HOVER color at top level of menu bar */
}

You can create the skins MyButtonSkin (use your own name) from the default skin of ButtonSkin, and MyMenuItemSkin (use your own name) from the default skin MenuItemSkin. However, you only need MyMenuItemSkin to change the hover color at top level of menu bar.

After you have MyMenuItemSkin skin in your skins folder, edit the layer 1 section, which contains the fill. Here, you can do something like:

<!-- layer 1: fill; effects main level of menubar only -->
<s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="up,disabled" >
    <s:fill> 
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.over="0xFF0000" 
                             color.down="0x00FF00"
                             alpha.over="0.8" alpha.down="1" 
                             />
            <s:GradientEntry color.over="0xAA0000" 
                             color.down="0x00AA00"
                             alpha.over="0.8" alpha.down="1" 
                             />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

Save it and run the program. Then tweek the colors as you wish.

Is there a way to set only the color of the text of the top level menu buttons but not the menu items? I have the menubar over a black background but when the menu opens the background is white so I'd like the top level text to be white but the menu items black. Setting the color style sets the color for the menubar and menu items. — 1.21 gigawatts, Jan 02 '14 at 02:51
@1.21 gigawatts, yes. In CSS code, use `mx|MenuBar {color:#FFFFFF}`. This will set the menu bar's top level font white. To set the submenu item colors, use CSS to set `mx|List {color:#000000}`. The `mx|List` controls the submenu items (use it to set disabled color, rollOverColor, etc.). — ggkmath, Jan 28 '14 at 23:03

Change highlighting of top-level items in menubar Flash Builder 4.6

1 Answers1