Menu Icon problem

Hi, Karen:

The composite image that Montezuma uses for the menu icons is here. You’ll see that it’s two columns of identical images, with the gray copy on the left and the teal copy on the right. Each individual image is 24px by 24px, so the composite image is 48px wide (2 columns of 24px each) by 2400px high (100 different icons).

The way that the image is used is to set the background property of the menu element icon to point to that image. You’ve seen this rule in your CSS file:

#menu1 > li > a > i {
   display:  block;
   width:    24px;
   height:   20px;
   margin:   0 auto 5px auto;
   background:   transparent url(https://www.health-boundaries.com/wp-content/themes/montezuma/images/menu-icons-0090d3.png) 0 0 no-repeat;
}

The offset of 0 0 at the end of the background value selects the gray star, since that is the very first icon in the composite image file and isn’t offset from the top left corner like the other images. As you have discovered, setting the height to 20px crops the image instead of resizing it. That’s because the background image of an element, unlike regular images, cannot be resized.

So what you’ll need to do is create a new image file, with the dimensions of each icon image the size that you want. For example, if you want your icons to be 20px by 20px, then you’ll need to create a composite image file that is at least 20px high (to contain one set of icons) by 40px wide to contain two identical 20px by 20px images of different colors. Or they can be different images altogether, like a star that transforms into a crescent moon, it’s up to you.

Then you’ll upload your image file and point to it by changing the URL value in the above CSS. You’ll also need to change this CSS:

#menu1 > li:hover > a > i {
	background: 			transparent url(https://www.health-boundaries.com/wp-content/themes/montezuma/images/menu-icons-0090d3.png) -24px 0 no-repeat;
}

Again, change the URL value to point to your new image file, and change the -24px value to -20px value since your second image will be offset 20 pixels to the right instead of 24 pixels.

If you want to see a good example of a site using a custom image for its menu icons, see this site. The normal icon shows a female image which switches to a male image on mouse hover.

You can see the icon image file here. It has just the two images in it, side by side.

I wrote this a couple days ago, but something must have interrupted me before I posted…

Hi CrouchingBruin,

First, it absolutely makes my day to see your name in an email notification. It’s lovely to see you! ??

Second, this is by far, or seems to be, the most complex thing I’ve attempted.

The icons, when I click on the link to them, are so tiny I can’t make them out. And I don’t know how to select one. They don’t seem to have names or ways to be identified. Or, they do and I haven’t seen it.

The images must get bigger, to 24 px, when you use them, because in their present state in the list I don’t think they are more than 4 px for the grey and teal combined.

But, maybe that’s not important. Since I like the stars, I can use them for my new image file, except I don’t know how to separate them from everything else and put them into GIMP. Do I use GIMP to make the new file?

4/2/2014 ~ After looking at my menu repeatedly, I think the thing to do might be to reduce the size enough so that the stars look like little crowns. I’m going to try that. I’ve just been a little overwhelmed… I had a leak in my kitchen for years, the other day it became clear that the plasterboard on the kitchen ceiling was loose. I had it taken down so it wouldn’t fall on me, or my dinner, and that revealed that the insulation was full of water… LOL. Have to laugh. So my website has taken a bit of a backseat.

Still, today I think I’ll have time to try this.

Thank you HUGELY for your help!!!!

Karen

That’s really cool, the image changing from female to male. Except, is the idea that only Men have … Arrived? ??

Do you know a way to make a keyboard key stop sticking???? My zero key takes a great number of strong depressions to make it work… and if I forget, well, things can get weird…

The icons, when I click on the link to them, are so tiny I can’t make them out.

If you click on the picture with your mouse (the cursor should turn into a magnifying glass), the picture should magnify to its normal size.

And I don’t know how to select one.

The way the images are selected is through the background property. The background property has this format:

background: color url(image file) x-pos y-pos repeat;

The x-pos and y-pos are numbers which define an “offset” from the top-left corner as far as where to start when displaying the background image. A value of 0 0 means to start at the top-left corner, with no offset. That’s where the gray star is located.

If you look at this CSS rule:

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

This is the rule that gets used when the mouse is hovered over the menu item. You’ll notice that the x-pos value is -24px, which means to start 24 pixels to the right. The y-pos is still 0, because we want the top-most image (no offset going down). So if you start at the top-left corner and move 24 pixels to the right, that will take you to the beginning of the teal star.

Each image is 24 pixels square, so if you want to pick a different image for your menu icon, you figure out how many images are above it and multiply by 24. For example, if I wanted the leaf image to be the icon, there are three other images above it (the star, the buildings, and a tree. 3 x 24 = 72, so I would set the y-pos of my CSS rule to -72px if I wanted to have the leaf as my menu icon (it’s a negative value

#menu1 > li > a > i {
   background:   transparent url(https://www.health-boundaries.com/wp-content/themes/montezuma/images/menu-icons-0090d3.png) 0 -72px no-repeat;
#menu1 > li:hover > a > i {
   background:   transparent url(https://www.health-boundaries.com/wp-content/themes/montezuma/images/menu-icons-0090d3.png) -24px -72px no-repeat;
}

What would be a really interesting affect is to leave the y-pos of the first rule at 0 (the star) and have the y-pos of the second rule at -72px (the leaf). Then the star would transform into a leaf when hovered over by the mouse.

Do I use GIMP to make the new file?

Yes, I would use GIMP to create your new image file. You can start with a copy of the existing file and crop it down, or start with a new file that has the dimensions you want.

Good luck with the kitchen. Water damage can be very difficult to deal with, and you want to watch out for mold.

Hi CrouchingBruin, Ah ha, so that’s how it works!!!

This gives me a lot to work with, thank you!!!!

Ah yes, mold. With all the insulation taken out there doesn’t appear to be any mold, but the boards are still wet, so the ceiling is open. I’m constantly getting sand and stuff in my hair in the kitchen at present… not ideal…

Hi CrouchingBruin,
I’m ultimately not happy with the cropped stars
https://www.health-boundaries.com/

But I can’t work out what to do to follow your instructions to alter the star image.

Will I change this :

(/images/menu-icons-0090d3.png)

by uploading the new GIMP image and by somehow putting its address into the png thing?

Since I don’t have the menu icons in my media/images file, that I can see, at least, I’m confused.

Maybe it will be easier if I try things in the site I started but haven’t gotten very far with… if I mess it up, it won’t have much in the way of detrimental consequences…

I would try creating a new icon file, uploading it, then pointing to it in the URL value.

1. Decide on the dimensions for your icon, like 13px by 13px (it doesn’t matter what size you pick, as long as you make the adjustments to the rest of the instructions below).
2. Open a new image in GIMP that is 13px high by 26px wide (same height, but twice as wide as your chosen image size).
3. Create your first icon as a 13px by 13px image on the left.
4. Copy the image and paste as a new layer. Move the new layer to the right until it fits the right half of the total image.
5. Change the color of the second image. Now you should have two identical images, side by side,
6. Export it as a .png file.
7. Upload the file.
8. Copy these two rules to the end of your various.css virtual file. The first rule is for the normal menu item, the second is when the mouse is hovered over the menu item:

   #menu1 > li > a> i {
      width: 13px;
      height: 13px;
      background: transparent url(/wp-content/themes/montezuma/images/HealthBoundariesIcons.png) 0 0 no-repeat;
   }
   #menu1 > li:hover > a> i {
      width: 13px;
      height: 13px;
      background: transparent url(/wp-content/themes/montezuma/images/HealthBoundariesIcons.png) -13px 0 no-repeat;
   }

9. Change the url property to point to your uploaded image. Notice that the width and height values are set to the width & height of your new icon. Also notice that in the second rule, for the mouse hover, the x-pos value is -13px (you’ll need to scroll the code window to the right to see it), which means to shift the background 13 pixels to the right so the second image gets displayed.

If you want to see a sample 13×13 menu icon in action, take a look at my sandbox site. I created a new image file with stars which are 13×13 pixels in size. If you want to use that image file, you can get it here. Just save it to your computer and then uploade it to your own site.

Another thought is that you can eliminate the menu icons altogether, and that will give you a little more room. I don’t have them on any of my sites, nor do I use the bar across the top of the menu item; I just change the background color of the menu item.