8 Replies Latest reply: Apr 23, 2012 10:46 AM by Edwin J Ward RSS

    Spry Menu Bar 2.0 overrides persistent page indicator text color?

    Edwin J Ward Community Member

      Hello,

       

      I've gotten my menu bar to look exactly as I want with one exception. I would like the text and arrow  during the "you are here" state to echo the hover state and be #ffffff. Following Nancy O's excellent and easy tutorial - http://alt-web.com/Articles/Persistent-Page-Indicator.shtml - I got  the button color gradient as I want it but not the text and arrow. The menu bar's CSS seems to be overriding my color callout, and adding the arrow as a background image in the CSS below jacks up the layout when viewed in Firefox. Could someone please guide me in the right direction as far as adding another rule to accomplish my goal of white arrow and text?

       

      Here's a link to a single page so you can see the menu in action:

       

      http://www.mentalwarddesign.net/Andrea/Fragrances/spiceherb.html

       

      And here's the CSS based on Nancy O's tutorial:

       

      body.home a.home, body.fragrances a.fragrances, body.oils a.oils, body.leather a.leather, body.deodorants a.deodorants, body.technical a.technical, body.shipping a.shipping {

          color: #8aaad9;

          background: #f38ab3; /* Old browsers */

          background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

          background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

          background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

          background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

      }

       

      If anyone is interested in using gradients, here's a link to the code generator I used:

       

      http://www.colorzilla.com/gradient-editor/

       

      Thanks in Advance for your help,

       

      Ed

        • 1. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
          Edwin J Ward Community Member

          Oops. The first line of the CSS should be (and is on the site) color: #ffffff.

          • 2. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
            Nancy O. CommunityMVP

            For persistent highlighting, you'll need to be more specific with your CSS selector names.  See changes in green.

             

            body.home #MenuBar a.home,

            body.fragrances #MenuBar a.fragrances,

            body.oils #MenuBar a.oils,

            body.leather #MenuBar a.leather,

            body.deodorants #MenuBar a.deodorants,

            body.technical #MenuBar a.technical,

            body.shipping #MenuBar a.shipping {

                background-image:url("images/ArrowMenuRightHov.gif");

                 background-position:right center;

                 background-repeat:no-repeat;

                 color: #FFFFFF;

                background: #f38ab3; /* Old browsers */

                background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

                background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

                background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

                background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

            }

             

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/

            http://twitter.com/altweb

            http://alt-web.blogspot.com/

            • 3. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
              Edwin J Ward Community Member

              Thanks Nancy, but that doesn't seem to work. It's still deferring to the MenuBar rule. However the background image no longer blows up the layout in Firefox. I was thinking that might be due to a conflict with  a background image used along with background gradients (since I found that gradients won't work with transitions). Guess it actually had to do with "background-repeat:no-repeat." At least I'm learning (I think)…

               

              Any further ideas? Could it be the CSS rule's location (I have it with my global.css as opposed to my MenuBar.css)? Here's the changed code…

               

              body.home #MenuBar a.home, body.fragrances #MenuBar a.fragrances, body.oils #MenuBar a.oils, body.leather #MenuBar a.leather, body.deodorants #MenuBar a.deodorants, body.technical #MenuBar a.technical, body.shipping #MenuBar a.shipping {

                  color: #FFFFFF;

                  background-image: url(../imgGlobal/ArrowMenuRight.gif);

                  background-position:right center;

                  background-repeat:no-repeat;

                  background: #f38ab3; /* Old browsers */

                  background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

                  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

                  background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

                  background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

                  background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

                  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

              }

              • 4. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
                Ben Pleysier CommunityMVP

                With respect to Nancy's solution, which is a very robust solution if it weren't for the quirkiness of SpryMenuBar v2.0, please have a look at the following which  is based on detecting the page's URL and comparing this with the link to the menu item.

                 

                First add the following to the bottom of you document; you could put into an external JS files and link it to the document.

                <script>

                function InitPage(){

                Spry.$$('#MenuBar li').forEach(function(node){ /*for FF Chrome etc*/

                    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

                    if(a.href == window.location){

                        Spry.Utils.addClassName(node,"activeMenuItem");

                    }

                });

                Spry.$$('#MenuBar div.MenuItemContainer').forEach(function(node){ /*for IE */

                    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

                    if(a.href == window.location){

                        Spry.Utils.addClassName(node,"activeMenuItem");

                    }

                });

                }

                Spry.Utils.addLoadListener(InitPage);

                </script>

                Then add a bit of CSS, probably at the bottom of the style rules created by the widget and placed into your document. This can also be linked to an external CSS file.

                <style>

                #MenuBar .activeMenuItem .MenuItem {

                    color: #8aaad9;

                    background: #f38ab3; /* Old browsers */

                    background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

                    background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

                    background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

                    background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

                }

                #MenuBar .activeMenuItem .MenuItem .MenuItemLabel {

                    color: #8aaad9;

                    background: #f38ab3; /* Old browsers */

                    background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

                    background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

                    background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

                    background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

                }

                </style>

                 

                 

                Gramps

                • 5. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
                  Edwin J Ward Community Member

                  Hi Gramps, I didn't have any luck with that solution. Inserted the js as the last item before the </body> tag and tried the CSS first at the end of my MenuBar.css file and then preceding the ie6 styles. Weird thing happened tho. I duplicated the whole site to try your suggestion on a copy. After inserting your code (and before defining the site) I previewed it. The layout was jacked up and the menu showed as pure html. When I clicked the link to the same page I was already viewing it displayed correctly and the page indicator worked…but only in the submenu where I don't want it. I then defined the site after which the layout looked fine while previewing, but the indicator was missing. I'm really starting to miss my t-square, x-acto knive and non-repro blue pen

                   

                  I appreciate both of your efforts. Any further ideas are always welcome. Thanks.

                  • 6. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
                    Nancy O. CommunityMVP

                    Ed,

                    Unfortunately, I don't have time to sift through all your layers of code.

                     

                    HINT:  For testing purposes, create a plain vanilla page with just one menu and omit other extraneous code / scripts / styles.  Keep it as simple as possible.   

                    When you get the menu working, then add other luscious ingredients one-at-a-time.  Preview in browsers often to test.

                     

                    In time, you'll find the right recipe for what you're trying to achieve.  But it takes systematic trial & error.

                     

                     

                    Good luck,

                    Nancy O.

                    • 7. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
                      Ben Pleysier CommunityMVP

                      Have a look here http://pleysier.com.au/edwin/index.html and choose each menu item. Although I did not change the content of each page, I did change the menu to suit each URL.

                       

                      Right click in the browser and choose View Source or similar to see what I have done. Also not that I added a closong list tag to ensure that the menu would work.

                       

                      Gramps

                      • 8. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
                        Edwin J Ward Community Member

                        Thanks Gramps. I'll need to study this a bit, because at first glance (other than your changes to the menu links) it looks identical to the page I initially recreated using your advice (except my css was external). I don't see where I've missed a closing list tag either. Does one of MenuBars quirks have to do with working locally?

                         

                        Even though I'm still a bit confursed, you've obviously got it going in the right direction so I hope to be able to figure it out. I'd appreciate it it if you'd keep this page up for a bit. I'm gonna be gone for over a week and am buried trying to get ahead with work before I leave, so I really won't be able to give this my full attention again until I get back.

                         

                        Thanks once again.