Another menu icon problem

Ha, I must have done something strange because the change to blue effect on hover is no longer working too?

So you’re trying to get the gray stars to change to blue stars like the default setting, or are you trying to use a different icon (i.e., something other than a star) for the menu items?

Both now, the blue effect has stopped working and I can’t change the stars to something else

I’m putting together a detailed answer for you so please wait a few minutes.

Before I give you instructions on how to change the icons to something different, the reason why you’re no longer seeing the transition to the blue stars is that you have a syntax error in this rule:

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24x 0 no-repeat;
}

You need to change the -24x to -24px (somehow the p got dropped).

Thanks first of the two problems, good work so far. Thanks

So this is the way it works:

The icons are being read from this image file. You’ll notice that there’s a column of gray icons, and an identical column of blue icons next to it.

Each individual icon is 24px high by 24px wide.

The position of each icon is referenced relative to the top left corner of the entire image. In other words:
The gray star is 0px from the left and 0px from the top.
The blue star is 24px from the left and 0px from the top.
The gray leaf is 0px from the left and 72px from the top.
The blue leaf is 24px from the left and 72px from the top and .

You can see a kind of pattern: All the gray icons will be 0px from the left and all the blue icons will be 24px from the left. To find out the top position of a particular icon, you can use this formula:
Top = (icon # – 1) x 24
The envelope is icon #5 (i.e., the 5th icon down), so the top will be:
(5 – 1) x 24 = 4 x 24 = 96px

So now we look at the CSS rules which control the display of the icons.

This rule controls the normal appearance of the icons:

#menu1 > li > a > i {
display:	block;
width: 24px;
height: 24px;
margin: 0 auto 5px auto;
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 0 no-repeat;
}

This rule controls the appearance of the icons when the menu item is “hovered,” i.e., the mouse is held over the menu item:

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px 0 no-repeat;
}

Notice that the width and height properties are set to 24px. That means, instead of displaying the entire image, we’re only going to show a small part of the image that is 24px square (which is the same size as one icon).

The two numbers you want to pay attention to, though, are the ones just before the no-repeat clause. The first number is the number of pixels that you want to shift the image sideways (along the x-axis) and the second number is the number of pixels you want to shift the image up & down (along the y-axis). From high school geometry, you might remember that moving to the left along the x-axis is moving towards the negative side, and moving down along the y-axis is also moving towards the negative side.

So the first rule has 0 0 as the image position, which means don’t shift the image at all. Therefore the gray star, which is at the origin (top left) of the image, will be displayed.

The second rule has -24px 0, which means shift the image 24px to the left (since it’s a negative value), but don’t shift the image up or down. This will give you the blue star, since it’s the image that is 24px to the right of the origin.

Let’s change the icons to the jet plane.

The jet plane is the 10th image down. We already know that the gray plane will be 0px from the left and blue plane is 24px from the left. The top of both icons is:
(10 – 1) x 24 = 9 x 24 = 216px.

So change the first rule so it looks like this:

#menu1 > li > a > i {
display:	block;
width: 24px;
height: 24px;
margin: 0 auto 5px auto;
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 -216px no-repeat;
}

You’re just changing the number just before no-repeat to -216px.

And the second rule so it looks like this:

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px -216px no-repeat;
}

Again, you’re just changing the number just before no-repeat to -216px.

Now you should have jet planes for your menu icons.

You can do all sorts of crazy things, like having a gray plane change to a blue heart. You can also create your own image file and use that instead. All you would need to do is change the url property to point to your own icon image file. You can see an example here. The designer uses the head of a woman as the default menu icon, and it transitions to a man’s head when hovered. Notice that she also changed the color of the icons to match the color scheme of her site.

thanks for that information, the code I included showed customised icons for of the pages I have as per instructions on the Use Menu Page. Here is the extract in question

#menu1 > li > a > i {
display: block;
width: 24px;
height: 24px;
margin: 0 auto 5px auto;
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 0 no-repeat;
}

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px 0 no-repeat;
}

/* Part 1- for default state: */
#menu1 .contact-us > a > i { background-position: 0px 0px; }
#menu1 .faq > a > i { background-position: 0px -24px; }
#menu1 .home > a > i { background-position: 0px -48px; }
#menu1 .services > a > i { background-position: 0px -72px; }
/* Part 2 – for hover state: */
#menu1 .contact-us:hover > a > i, #menu1 .contact-us.active > a > i { background-position: -24px 0px; }
#menu1 .faq:hover > a > i, #menu1 .faq.active > a > i { background-position: -24px -24px; }
#menu1 .home:hover > a > i, #menu1 .home.active > a > i { background-position: -24px -48px; }
#menu1 .services:hover > a > i, #menu1 .services.active > a > i { background-position: -24px -72px; }

As you can see in that code I have just copied in over the top of the default. as per instructions but its not loading the icons. i.e. with the code above it should be showing a leaf not the star.

OK, so it looks like you want a leaf over the Services menu item. The problem is that you are using the incorrect selector. Change this rule:

#menu1 .services > a > i { background-position: 0px -72px; }

to this:

#menu1 .page-services > a > i { background-position: 0px -72px; }

And this rule, for the hover state:

#menu1 .services:hover > a > i, #menu1 .services.active > a > i { background-position: -24px -72px; }

to this:

#menu1 .page-services:hover > a > i, #menu1 .services.active > a > i { background-position: -24px -72px; }

All you were missing was the word page- in front of services.

Same with the other rules. For the Home menu item, change the selector to .page-home.

Ah great that works heaps better thanks CrouchingBruin. Not sure if you are the guy who created this but the self help page about “Using Menu Icons” is incorrect and does not include the missing “page-” part.

I’m not the developer, but I try to support other users who are using the theme. Thanks, I’ll pass along the info.