View Full Version : Changing the BG hover color/nav bar?

08-04-2010, 12:00 PM

Dan actually responded to me by email on how to do this, but it apparently went over my head, so perhaps someone here can break it down for me as I'm sure he has to be busy.

I am trying to change the background hover color (Not the link color - I know you can do that in "styling.")

So for example, when someone hovers over the page links on the navigation bar, the hover background color turns black (the color I want), not just gray like the default.

In Dan's response to that part of my email, he wrote...

If hover image, here’s the path to it on our site.

You would need to change that image (on your site).. there’s also a PSD file to help as well.

So uh, I managed to find both files through my ftp, but I'm still not exactly sure what to do. Try to download and edit the png or the psd? Will this file/image resemble a navigation bar? Will this change the entire color of the nav bar or just when its hovered over?

Sorry, just when I thought I was getting cocky and customizing things pretty good, something that I thought would be simple is stumping me and reminding me of my newbieness.

Any detailed help would be appreciated. In the meantime, I'll be googling for answers to see if that may clear things up.

...and my site is http://winejobstoday.com (I'm very much still working on it - not launched yet)

Thanks in advance,

08-04-2010, 12:16 PM

That image is used as the background of a nav button that the mouse is currently hovering over. Edit it in your favorite graphics program and then upload back to that directory.

08-04-2010, 12:49 PM
Thanks Lynne,

But that's just it, I'm so used to editing jpeg images in gimp with no problems, but opening this png file threw me for a loop. For one thing, it was very small so I had to magnify it to 400%, then it had no resemblance to a navigation bar or even the shape of a hover image (at least what I thought it would look like - it was a thin vertical image with the gray checkerboard fill (gamma?), so I wasn't sure exactly what to do. I tried to fill it in black, save it, and upload it back to my site....but nothing, still the same.

So I dunno. At this point I've just been stubborn about this because it's not really all that important since I should be working on content!

If you have any other ideas though please send them, otherwise again I appreciate the help!

08-05-2010, 06:07 AM
Hi Mark

The image you need to change is topNavBgOv.png

I've done two black images for you....

the first is totally black

The 2nd is a black gradient

I've also done a wine site with colored navigation panel and hover images.

If you would like to get a pack of navigation panels, they are available here...

I'm currently working on a pack of colored hover images..... stay tuned:)

08-05-2010, 06:47 AM
Wow, thanks so much Joanna! I could kiss you! (Well you know what I mean)

But...for some reason it didn't work. Perhaps there's something small I'm not doing.

Here's what I did after seeing your message:

- copied both images you provided to my computer (I chose the 1st image)
- uploaded that image to my site overwriting the original topNavBgOv.png
- then went to my site and refreshed...no change

Also, I'm pretty sure Dan made an error in directing me to the NavSlash.png because I'm thinking that is probably the little divider between pages on the navigation bar. That's why it looked so weird to me as something to edit as a 'hover image/background' and why it didn't work.

08-05-2010, 01:24 PM
Thanks Mark :o

For some reason the new image hasn't uploaded....

If you have a look here, it is still showing original image

If you PM me your login details FTP or CPanel login details, I'll fix it for you

08-06-2010, 08:29 AM
Hi Mark

All done!

Dan was right!.... it actually does use the navSlash.png file both for the little divider between each page nav AND for the hover image.

So I've changed that image for you to black :)

08-06-2010, 08:53 AM
Thanks so much to the both you. You went above and beyond the call of duty on that one. I almost feel embarrassed to have a thread this long on a 'hover background color!'

Much appreciated

10-03-2010, 05:45 PM

Dan was right!.... it actually does use the navSlash.png file both for the little divider between each page nav AND for the hover image.

Where would I find this image? I looked via FTP but no luck. If I got your color pak, how would I change the image's color? Along the same lines, how can I change the RSS button color to match my site?

Sorry for the newbie Q's.


10-04-2010, 04:13 AM
Hi Steve

If you buy my color pack, this only contains different colors for the actual nav bar image which is (completeNavBg.png)

To change the hover color you need to edit the navSlash.png file which is located in the images folder

Hope this helps :)

I will be releasing a pack containing different colored navSlash files in the near future. (when time permits)