6 Replies Latest reply: Aug 14, 2012 4:14 PM by Jeff Howard RSS

    dark popover

    Jelmer Steen

      Hi everybody,

       

      I would like the background of the popover dropdown menu's to be white instead of black. I could overwrite the styling in custom css, but I see that the popover menu's have a "dark" class. So I would like to remove the dark class.

      I found were to remove it for the top right menu (in navbar.ftl). But I can't find any other places where this class is added and the menu's remain black.

       

      Can anybody tell me where I can remove the dark class?

       

      Regards,

       

      Jelmer nav

        • Re: dark popover
          astewart

          Hi Jelmer,

           

          I'm a designer and not a dev, so my knowledge might be a bit rusty, but if I recall correctly this option is set in the javascript when the tooltip is invoked. So, in the navbar js (sorry, I'm not sure what the file is called), look for

           

          "darkPopover: true"

           

          and just set it to false instead.

           

          Hope that helps, if not let me know and I'll try to dig in a little deeper.

           

          Amy

           

          Message was edited by: Amy Stewart

            • Re: dark popover
              Jelmer Steen

              Hi Amy,

               

              Thank you for your response.

              I tried to find it but I can't find any javascript files. Where do I find these? Can I do this whitin the theme?

               

              Jelmer

                • Re: dark popover
                  astewart

                  Hi Jelmer,

                   

                  Ah that's right, you're working in a theme. You probably wouldn't see the js files listed.

                   

                  I talked to a couple of developers here, and unfortunately the consensus is that writing an override rule to the "dark" css class is your best bet. You probably wouldn't want to theme that many js files to remove a css class, just for your own sake.

                   

                  If/when you do theme the light menu, make sure to hit the link hover classes too. The dark popover is usually used to denote a menu, and each link inside gets some special background/foreground styling.

                   

                  Hope that helps

                  Amy

              • Re: dark popover
                Jeff Howard

                If you want to change them easily in the header, you'll find a reference or two to darkPopover in soy/nav/navbar.soy... Simply set the value to false. I haven't been able to find this declaration for the browse arrow button. /soy/nav/navlink.soy seems to hint at it, but ...."* @param actionPopover Whether or not this is a dark action popover" .... this line appears to be incorrect, as this parameter seems to add the j-action-popover class to the div, rather than the dark class. I believe it will be found in the menuAppScript parameter, where ever that's passed in from (a java bean perhaps?).

                 

                Here's a hack of a way to remove the class via javascript (specifically for the browse arrow). The click bind is needed since the dark class is added every time the popover is opened. tweaking the setTimeout might be necessary, as slower machines might take longer than 10 milliseconds to setup the popover. The tradeoff is, upping the milliseconds too far may make the dark popover visible for an instance before the class gets removed.

                 

                jQuery(document).ready(function($){

                  //remove dark class from browse popover

                  var browseArrow = $('#jive-nav-link-browse-more');

                  browseArrow.bind('click', function(){

                       setTimeout(function(){

                            $('#jive-nav-link-browse-menu').parent().removeClass('dark');

                       }, 10);

                  });

                });

                 

                Again, I don't really recommend this approach, but it kind of works. The non header popovers will still be dark through, so CSS is likely still the best option.

                  • Re: dark popover
                    Jeff Howard

                    Not sure if this is completely thorough, but here are the dark popover style overrides to make them look like white popovers (jive 5.0.3)

                     

                    .j-popover.dark {

                      background: #fff;

                      border: 1px solid #c6c6c6;

                      -moz-box-shadow: 0 1px 6px rgba(0,0,0,.3);

                      -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.3);

                      box-shadow: 0 1px 6px rgba(0,0,0,.3);

                      color: white;

                    }

                     

                    .j-popover.dark .belowArrow {

                      top: -13px;

                    }

                     

                    .j-popover.dark .belowArrow {

                      background-position: -124px -329px;

                    }