How to Change Top Navigation Icon Color

Quite a while back I had a reader ask about how to change the color of the rollover icons in the top navigation of the Montezuma theme. His question also included other areas that can’t be changed via CSS but I think it’s safe to assume that the process for those will be the same – just a matter of figuring out what exactly the image file is. If anyone needs step-by-step help with that, feel free to let me know and I will do my best to get it posted.

Before we jump in, I’d like to say thank you to the bytesforall.com forums!!! This post is where I found enough of an explanation about how to accomplish this so that I could do the step-by-step instructions for you guys.

Okay, so let’s get started..

Step 1

You’ll need to FTP or use the file manager provided by your web host to download the image containing all of the icons. The name of the file is menu-icons-0090d3.png and it is located at: wp-content > themes > montezuma > images > menu-icons-0090d3.png

Step 2

Fire up Adobe Photoshop and open the image you just downloaded..

Note: If you don’t have Photoshop, the guy in the original post uses a free image editor named GIMP.

Step 3

With your image open in Photoshop, go to Select > Color Range

Now you’ll have access to the eye dropper tool and you’ll need to select one of the blue icons.

Once you sample the blue with the eye dropper tool, all the icons will be selected.
color-range

 

Step 4

Now you’ll need to set your foreground color to the color you wish to change the icons to.

My personal workflow included opening my logo & sampling the pink within the logo.

Step 5

You’re now ready to change the color of the actual icons!

Select the paintbrush tool and make sure the hardness is set to 100% and use a wide enough brush so that you can make one swipe down the image to change all the icons.

paintbrush

 

Step 6

Now you’ll need to save your file as a .png

What I did to help me keep track of my changes is to append -pink to the end of the file. So what I ended up with is menu-icons-0090d3-pink.png  – this helps me keep the files straight so I can get the new one uploaded to the server without overwriting the original ( in case I ever want to revert back to the blue that comes with Montezuma).

Step 7

Upload your new file to the server & make sure you put it in the same directory as where we downloaded the original.

Tip: Original file location is  wp-content > themes > montezuma > images > menu-icons-0090d3.png

Step 8

Once your new file is on the server & you have verified that it’s in the proper location, change the name of the original image on the server.

What I did is rename the original to: menu-icons-0090d3-original.png

Now that you have the original renamed, your site won’t show any icons when you view it.

Step 9

To activate your new colored icons, simply change the name of your new file to: menu-icons-0090d3.png

My personal steps to accomplish this step was to change menu-icons-0090d3-pink.png to menu-icons-0090d3.png

Success!

 

Did you have any trouble following the steps above? Couldn’t get it to work? Drop me a line in the comments below and I’ll do my best to help!

Leave a Reply

%d bloggers like this: