Highlight color of menu item

hi,
I wanted the menu item highlight color to be changed..
My using windows look and feel, in that iam getting blue color as highlight.
Cant i change that color to some other color (ex. gray)?
Is it possible in windows look and feel?
Help needed very urgently...
Thanks in advance.
Regards,
Deepa Raghuraman

Try this:
UIManager.put("MenuItem.selectionBackground", new ColorUIResource(new Color(r,g,b));This will change the color for selected MenuItems generally in your whole program.

Similar Messages

Cannot get highlight color on menu items (only submenu items).

I am having a problem with the highlight color when I move over a vertical menu item. You can see what I mean by going to:
http://www.staging-area-1.com
If you move the focus over the "Questions" sub-menu item I get the blue highlight, with white text. BUT if I move over any other menu items (Services, About us or Contact us) I simply cannot get the blue highlight.
Can someone tell me which cdd property I need to change to get this?
Thanks.

It is because you'r overriding the background color with an image in the following
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
     background-color: #33C;
     color: #FFF;
     background-image: url(../images/filler.gif);
Remove the background image and all is well.
Gramps

Can I get different background colors on menu items?

I've been trying to get different background colors on my menu (Quick launch) items for a while, without success. What I want is the even numbered items (the second, fourth, sixth...) to have a different background color than the uneven ones (first, third,
fifth...).
Anyone knows if this can be done?
Thanks, guys!

Can you do something in the javascript code where you have given specific IDs to each buttons in your menu? It could end up in something like "$('#menu_id').css('background-color', '#1B3E70');"
Or, let say you have controls defined like thie:
<body>
<ul class="menu">
<li class="menu-item"><a>item 1</a></li>
<li class="menu-item"><a>item 2</a></li>
<li class="menu-item"><a>item 3</a></li>
</ul>
</body>
Can't you write at render stage this kind of actions by index:
var i = $("li").index( $(this).parent() );
if ( i === 1 ) {
$('body').css('background', 'red');
} else if ( i === 2 ) {
$('body').css('background', 'green');
} else {
$('body').css('background', 'brown');

Adding A Separate Background Image For Each Menu Item

I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
Org question -
I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
Answer -
Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
Does this mean I'd have to write a new rule for each menu item? What?
Thank you.

Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="news.html">Features</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="news.html">Fashion</a></li>
      <li><a href="news.html">Lifestyle</a></li>
      <li><a href="news.html">Calendar</a></li>
    </ul>
This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-transform: uppercase;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 7em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

IE reversing order of spry menu items

I've created a horizontal spry menu bar, and it works great except for one problem. When I open my page in Internet Explorer, the order of menu items from left to right is reversed. For example, "Home", which is my first item in the menu, is supposed to appear on the left, but instead it appears on the right. The menu bar itself is in the correct position, it's just the menu items that are reversed. When I open the page in Firefox or Safari, the order is correct - it's just an IE problem. Any suggestions would be much appreciated. Thanks!

Thanks Ben, here's the code. I was doing some experimenting, and I changed the float property under ul.MenuBarHorizontal li.MenuBarItemIE to "right" instead of "left" as it is shown below. This caused the menu items to appear in the correct order, but it also caused the sub-menu items to appear in a horizontal line below the menu, when in fact they should be hidden until you hover over the corresponding item in the main menu. So I traded one problem for another! Any help would be much appreciated.
To see how it`s rendering, visit http://www.leagueheadquarters.com/RAB. If you look at it in Firefox, you`ll see how it`s supposed to look, and in IE you`ll see the menu items reversed.
CODE:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-variant: normal;
    text-transform: none;
    color: #1f3d73;
    float: right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: auto;
    float: right;
    line-height: 13px;
    height: 16px;
    font-family: Verdana, Geneva, sans-serif;
    font-variant: normal;
    font-style: normal;
    color: #1f3d73;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    width: 8.7em;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 7em;
    text-align: left;
    height: 25px;
    background-color: #1f3d73;
    border-color: #FFF;
    border-right-style: solid;
    border-right-width: thin;
    border-left-style: solid;
    border-left-width: thin;
    border-bottom-style: solid;
    border-bottom-width: thin;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #fff;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #1f3d73;
    color: #1f3d73;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #1f3d73;
    color: #96B0E2;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    background: #1f3d73;
    float: left;

Unwanted space under menu item

When hovering over a menu item, the item turns red. However, you can still see a little bit of the yellow background along the bottom. Can anyone tell me what I need to fix to get the red box to fill the space? Thanks.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    width: 960px;
    font: bold;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: inherit;
    cursor: pointer;
    width: 160px;
    float: left;
    border: 0;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 160px;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    text-align: left;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 160px;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #f6ead6;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #80290e;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #80290e;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: right;
    background: #FFF;

Looks like it was just a minor bit of extra coding. Remove the line height here. Seems to fix it for me.
a:hover, a:active, a:focus {
    line-height: 1.2;    text-decoration: none;

When I select a menu item, the highlight is light blue and the item font color goes white. It is very difficult to read? Any solution?

When I select Bookmarks, the menu item (Bookmarks) is highlighted in light gray color; and the letters of the work itself (Bookmarks) turns white. This same thing happens when you go into individual bookmark selections. It is very difficult to read. Are there any alternatives that can be set by the user?

Are you using a standard Windows theme?
Start Firefox in [[Safe Mode]] to check if one of the add-ons is causing the problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
* Don't make any changes on the Safe mode start window.
See:
* [[Troubleshooting extensions and themes]]

Highlight current menu item whose page is displayed in an iFrame

Greetings,
Looking for the Holy Grail here...
So the parent page has static menu and an iframe which then loads in a specific pages as the user clicks on the menu items (which are ul li tags).
I would like to be able to highlight a menu item based on the page content being displayed in an iframe. It seems to be quite difficult to do for this style of page load using iframe method. I know it would be easier using php, but I can only use iframe (long story).
When page 1 is displayed in the iframe, I would like for the corresponding menu item to be highlighted.
I'm hoping the answer is out there somewhere as iframe has been around forever. If you would like to see my code, I'm happy to provide this.
Thanks!

Sure, here you go...
1. Add this code between your <head> tags:
<script type="text/javascript">
    function offclass(id)
    {document.getElementById(id).className = 'class_off';}
    function onclass(id)
    {document.getElementById(id).className = 'class_on';}
</script>
2. In your css, create your on and off styles (I used <a> you can use <li> the same way)...
a.class_on {
    color:blue;
a.class_off {
    color:red;
3. Add id's (individual to each link), classes (set to the off class you make) and onclick events (one to turn the link on and several to turn off the others) to your links...
<a id="link1" class="class_off" href="http://www.apple.com" target="mr_jones" onclick="onclass('link1'); offclass('link2'); offclass('link3');">Link 1</a>
<a id="link2" class="class_off" href="http://www.adobe.com" target="mr_jones" onclick="onclass('link2'); offclass('link1'); offclass('link3');">Link 2</a>
<a id="link3" class="class_off" href="http://www.foxnews.com" target="mr_jones" onclick="onclass('link3'); offclass('link1'); offclass('link2');">Link 3</a>
4. Give your iframe the name used for your target and a base "on page load source" (I used a # so it's blank on load)...
<iframe id="mr_jones" name="mr_jones" width="420" height="315" src="#" frameborder="0"></iframe>
That's it. As you increase the number of links, you just need to make sure you have an offclass for each new one added in to turn those off when you click.

Configure Firefox color when choosing menu item list

Hi,
At the moment, if I click on the Menu and scroll down and highlight a list from the Menu Item list, the highlighted portion has a white color and I can barely see it, is there anyway to change this.
I got the same effect when I click on a link and then right-click on the mouse and choose item from the list,i.e. Open Link in New Tab etc.

Dear Vanper,
1. Make a Procedure with Following Code .
2. Call it to When-new-form-instance.
Following Code you can Refer.
Declare
rcg_grp RecordGroup;
err_cd Number
Begin
Clear_list('TYPE');
rcg_grp := Create_Group_from_query('GRpName','Select stu_name,Stu_code from Student_master order by Stu_name');
if not id_null(rcg_grp) then
err_cd := populate_group(rcg_grp);
Popluate_list('TYPE',rcg_grp)
else
abort_query;
end if;
End;
1. Instead list I will suggest to user Lov because Student exceed 10 or 20.
Better to user Lov as compare than list Item.

How to make menu-item of current page appear in a different font color?

Hi,
My menu-bar works just fine. Hovering the links I get the text to take display the desired color. Now I want the menu-item of the selected page to show a third color.
With live-code enabled in Dreamweaver CS6, I can see the following code being generated by the Dynamic menu:
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><div id="cat_549633_divs"><ul id="nav_549633"><li class="selected"><a href="/home.html">Home</a></li><li><a href="/leistungen.html">Leistungen</a></li><li><a href="/uhrenservice.html">Uhrenservice</a></li><li><a href="/versteigerungen.html">Versteigerungen</a></li><li><a href="/diamanten.html">Diamanten</a></li><li><a href="/ueber_uns.html">Über uns</a></li><li><a href="/kontakt.html">Kontakt</a></li></ul></div><script type="text/javascript">catSetSelectedCSSItem('nav_549633');</script>
The class .selected is being created in the first list-item (home) as this is the current page.
And here is my CSS:
#nav_549633 {
          float: right;
          list-style-type: none;
          padding-top: 5px;
#nav_549633 li {
          float: left;
          text-align: left;
#nav_549633 li a {
          color:white;
          text-decoration: none;
          margin: 0 27px 0 0;
          font-size: 13px;
          text-transform: uppercase;
#nav_549633 li a:hover {
          color: yellow;
.selected {
          color: green;
The font color green does not appear. It is still white.
In order to see if the class is "working" I tried some other attributes, that DO work!
.selected {
color: green;
padding: 20px
background-color: blue;
In this case, the item appears as a blue box with 20px-padding, just as expected - but the font-color is still white.
Can anyone help me?
Regards,
Herman

Hi Mario,
Here's the link to my site:
http://grootaartseuronics.businesscatalyst.com/index.html
I have found a solution myself for 2 of the 3 questions i had:
I have deleted/changed this div: #nav_1371057 li li
And created a few new ones:
#nav_1371057 li li a, #nav_1371057 li li a:visited (To control the link en visited link colors in the sub-menu other than the root-menu)
#nav_1371057 li li a:hover (to control the hover in the sub-menu other than the root-menu if nessesary)
#nav_1371057 li li.selected a (to control the selected link and let the link change color or bolder like in my case)
Here are the CSS styles I used:
#nav_1371057 li li.selected a { /*Dit veranderd de dikte (bold) van de geselecteerde link in het submenu, dus de pagina waar je bent*/
font-weight:bolder;
#nav_1371057 li li a, #nav_1371057 li li a:visited{
background: #006;
color:#ffffff;
#nav_1371057 li li a:hover{
background: #999;
color:#ffffff;
Only thing i can't figure out is how I can change/control the color of the arrow which is black now. And i want to make it blue.
Thanks,
Frank

Changing only 1 menu item background color in a VerticleSpryMenu

Im working on this Verticle Spry Menu Bar (seen below) . I'm trying to figure out how to change the 'Get Started!' Item to be a different color than orange. Home, Support and Get Started! are clickable links with no submenu whereas the other menu items have submenus. Is there a special code to customize just Get Started!. Through CSS stylesheet I can get Get Started to change color but then Home and Support also change color and I dont want that.
Thanks

For all menu items use the following selectors
ul.MenuBarVertical a
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
For menu items with sub menu items use the following selectors to override the above
ul.MenuBarVertical a.MenuBarItemSubmenu
ul.MenuBarVertical a.MenuBarItemSubmenuHover
Gramps

Highlight color of Places Finder items

Why is it when you change your appearance and highlight color to "Graphite", the highlight color of items in the Finder "Places" sidebar remains "epileptic fit" blue?

Unfortunately it's not possible yet...
https://discussions.apple.com/thread/3962330?tstart=30
Srry

Button highlight colors in layered menu

Hello all,
I am wraspping up a dvd project and just have one small issue. I have a layered menu here with an overlay layer that contains noting but a white background and a few little black boxes for showing up when a button is selected. When a button is selected, I want those boxes to black, and when activated i want it to turn gray, but as it is now when a button is selected those boxes are white, and when activated they turn yellow. Ive messed around some in the colors tab of the buttons, but as of yet have been unable to figure it out. Any help or insight would be greatly appreciated, thanks!

You're welcome, k chen, but be careful. Some clients are very picky about fonts.
The layered menu method lets you basically use any graphic element you want, which can then be replaced with any other graphical element, of the same relative size, for the selected and activated states. So, for example a blue frowny face can be replaced with a multicolored happy face. Or, more specifically to your project, a nonstandard font can change colors. But, you lose reliability, player compatibility, and responsiveness, not to mention audio and video motion background capability.
An overlay menu, which is the standard for commercially produced dvds, is best used to add a graphic element to your menu, rather than replace or alter one that's already there, e.g. an arrow that appears next to a menu item to show that it's selected. What you lose in graphical flexibility, you gain in performance speed, reliability, compatibility. And you can have a video background and audio.
That's why overlay menus are the industry standard.

Multi-row menu item with highlight effect (JDEV - 100202.0230.5526)

I am using the PS2 JDEV ((JDEV - 100202.0230.5526). Is it possible to have a multi row display for a menu item (af:commandMenuItem) while preserving the highlight/roll over selection effect of a typical menu item in af:menu. I would like to display an image (which may not be possible to display as an icon attribute), a description and another field (such as count) below the description.
The menu will then be a list of such items. I would like to then have user select this as a menu item, when the user scrolls to any such item, keeping the rollover/highlight behavior.
Thanks a lot.

Thanks for the response. Is there an example/code snippet for this (using commandLink). Or any other mechanism possible to get similar behavior (if not using commandMenuItem) for highlight in case of multiple components (as a single row/item) ?
Thanks again.

How to set the menu item you want highlighted upon playing DVD

I have a list of about 9 menu items on my main DVD menu. The 6th one is the one that is highlighted when you play the DVD. This happens in submenus as well. I want the FIRST one highlighted at all times. Is there a way to set that?
Thanks for any help in advance.

I was having this problem and I found a fix. It all happens in map view.
I'm viewing my iDVD project map horizontally... Left to Right.
Whatever object is directly to the right, will be the default. Here's a lame diagram.
MENU-MOVIE 1
-MOVIE 2
-MOVIE 3
In this example... Movie 1 is the default. It's right next to Menu. Want to change it? Got everything saved? Then select Movie 1 and hit Cmd-X to Cut.
It will disappear in a poof of smoke. Don't panic. Notice how the other movies got "promoted?"
MENU-MOVIE 2
-MOVIE 3
Now Movie 2 is the default. SO!
Select the MENU object and hit Cmd-V to Paste.
Movie 1 should return at the bottom of the list. Like so.
MENU-MOVIE 2
-MOVIE 3
-MOVIE 1
Now preview your work to make sure.
Good Luck!

Highlight color of menu item

Similar Messages

Maybe you are looking for