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..
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
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.
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.
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.
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.
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).
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
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.
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
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!