12 Replies Latest reply on Dec 8, 2010 12:56 PM by JonGilman

    Customizing MenuBar style with CSS

    burroinquieto
      Has anyone been able to successfully apply a CSS attribute of background-color to the submenu items displayed in a MenuBar? I'm setting the styleName attribute of the MenuBar to an external style sheet defined as follows:

      .mainMenuBar {
      color: #E6EBEC;
      fill-alphas: 1.0, 1.0;
      fill-colors: #000000, #000000;
      background-color: #FFFFFF;
      }

      The CSS is correctly applied to the top level MenuBar but the submenu items seem to ignore the CSS entirely. Is there a specific CSS subclass that I can define to override the default menu item style? I'm fairly frustrated at this point due to the lack of documentation / resources that I can find online regarding this and any help would be greatly appreciated.
        • 1. Re: Customizing MenuBar style with CSS
          Level 7

          "burroinquieto" <webforumsuser@macromedia.com> wrote in message
          news:gd37mi$15i$1@forums.macromedia.com...
          > Has anyone been able to successfully apply a CSS attribute of
          > background-color
          > to the submenu items displayed in a MenuBar? I'm setting the styleName
          > attribute of the MenuBar to an external style sheet defined as follows:
          >
          > .mainMenuBar {
          > color: #E6EBEC;
          > fill-alphas: 1.0, 1.0;
          > fill-colors: #000000, #000000;
          > background-color: #FFFFFF;
          > }
          >
          > The CSS is correctly applied to the top level MenuBar but the submenu
          > items
          > seem to ignore the CSS entirely. Is there a specific CSS subclass that I
          > can
          > define to override the default menu item style? I'm fairly frustrated at
          > this
          > point due to the lack of documentation / resources that I can find online
          > regarding this and any help would be greatly appreciated.

          Try menuStyleName instead of styleName.

          HTH;

          Amy


          • 2. Re: Customizing MenuBar style with CSS
            ntsiii Level 3
            For all style questions, I have to post the link to the Flex Style Explorer.
            http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

            Tracy
            • 3. Re: Customizing MenuBar style with CSS
              burroinquieto Level 1
              Thanks for the reply. Unfortunately, using menuStyleName appears to remove the applied CSS from the top level MenuBar component and doesn't seem to affect the menu items. Any other suggestions?
              • 4. Re: Customizing MenuBar style with CSS
                burroinquieto Level 1
                Thanks also for the link, I've messed around with that app in the past and thought it was pretty cool (not to mention useful). However, the generated CSS doesn't seem to produce the same effect in Flex 3. The menu items don't appear to derive the backgroundColor or background-color attributes defined in the style class.
                • 5. Re: Customizing MenuBar style with CSS
                  Level 7

                  "burroinquieto" <webforumsuser@macromedia.com> wrote in message
                  news:gd3prf$l4p$1@forums.macromedia.com...
                  > Thanks also for the link, I've messed around with that app in the past and
                  > thought it was pretty cool (not to mention useful). However, the
                  > generated CSS
                  > doesn't seem to produce the same effect in Flex 3. The menu items don't
                  > appear
                  > to derive the backgroundColor or background-color attributes defined in
                  > the
                  > style class.

                  http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html


                  • 6. Re: Customizing MenuBar style with CSS
                    burroinquieto Level 1
                    Ahh, I didn't realize they had a style explorer for Flex 3. Definitely good to know. It looks like I'm still out of luck though. If you select the MenuBar in the style explorer and change the background color before selecting one of the menu items on the right hand side you'll notice that the submenu items are still displayed against a white background. Starting to wonder if this is a bug...
                    • 7. Re: Customizing MenuBar style with CSS
                      m_hartnett Level 3
                      This is what your css should look like. The backgroundColor has been deprecated for 3.0. Use menuStyleName and then define the style like below. (You can put all the additional styles in either of the css definitions but this will change the background color of the drop down menu).

                      MenuBar {
                      menuStyleName:"menuStyleName"
                      }
                      .menuStyleName {
                      backgroundColor: #00cc33;

                      }
                      • 8. Re: Customizing MenuBar style with CSS
                        Level 7

                        "burroinquieto" <webforumsuser@macromedia.com> wrote in message
                        news:gd4tbe$3au$1@forums.macromedia.com...
                        > Ahh, I didn't realize they had a style explorer for Flex 3. Definitely
                        > good to
                        > know. It looks like I'm still out of luck though. If you select the
                        > MenuBar
                        > in the style explorer and change the background color before selecting one
                        > of
                        > the menu items on the right hand side you'll notice that the submenu items
                        > are
                        > still displayed against a white background. Starting to wonder if this is
                        > a
                        > bug...
                        >

                        MenuBarItem does not support a backgroundColor property, but MenuBar does
                        allow you to specify itemUpSkin, itemOverSkin, etc. You could also look at
                        providing your own itemRenderer, or dig through the code and see exactly
                        what kind of control is being popped up when the menu opens to look at its
                        styling options.

                        HTH;

                        Amy



                        • 9. Re: Customizing MenuBar style with CSS
                          Level 7

                          "mhartnett" <webforumsuser@macromedia.com> wrote in message
                          news:gd4v0e$58a$1@forums.macromedia.com...
                          > This is what your css should look like. The backgroundColor has been
                          > deprecated for 3.0. Use menuStyleName and then define the style like
                          > below.
                          > (You can put all the additional styles in either of the css definitions
                          > but
                          > this will change the background color of the drop down menu).
                          >
                          > MenuBar {
                          > menuStyleName:"menuStyleName"
                          > }
                          > .menuStyleName {
                          > backgroundColor: #00cc33;
                          >
                          > }

                          Heh. I'd assumed when I suggested that and he didn't say it worked, it
                          didn't work ;-).


                          • 10. Re: Customizing MenuBar style with CSS
                            burroinquieto Level 1
                            Yeah, seems like I made a rather obvious mistake during my last "fast and furious" copy / paste session. If you look at the assignment to the background-color attribute you'll notice that the value is defined as #FFFFFF. Somewhere along the line I must have pasted over the original value of #000000. Frustrating, yet kind of funny in retrospect. Specifying both the styleName and menuStyleName attributes seems to do the trick (styleName overrides the top level menu bar style, while menuStyleName applies to the contained menu items). Makes perfect sense now.

                            Funny how the things that are right in front of my face can sometimes be the hardest to see. Thank you all for your help.
                            • 11. Re: Customizing MenuBar style with CSS
                              g.kosmin

                              I was trying to apply background-color to the submenu items displayed in a PopUpButton, using CSS. Nothing worked, only the top level PopUpButton had the style applied correctly, the submenus were ignoring it completely.

                               

                              I eventually solved the problem by setting the background-color to the List:

                               

                              List{
                                 color: #ffffff;
                                 backgroundColor: #000000;
                              }
                              

                               

                              Hope it helps someone.

                              • 12. Re: Customizing MenuBar style with CSS
                                JonGilman

                                check out the attribute content-background-color

                                 

                                I had the same problem - the white background was always displaying, then I assigned the menu bar to a style called MenuBar with the following CSS code, and it worked:

                                 

                                .MenuBar

                                {

                                content-background-color: #01344F;

                                }