-
1. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
Edwin J Ward Apr 20, 2012 3:11 PM (in response to Edwin J Ward)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 OShea Apr 20, 2012 4:01 PM (in response to Edwin J Ward)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
-
3. Re: Spry Menu Bar 2.0 overrides persistent page indicator text color?
Edwin J Ward Apr 20, 2012 5:28 PM (in response to Nancy OShea)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?
BenPleysier Apr 20, 2012 6:43 PM (in response to Edwin J Ward)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 Apr 21, 2012 4:44 PM (in response to BenPleysier)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 OShea Apr 21, 2012 5:17 PM (in response to Edwin J Ward)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?
BenPleysier Apr 21, 2012 6:55 PM (in response to Edwin J Ward)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 Apr 23, 2012 10:46 AM (in response to BenPleysier)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.