I am editing the Mineral theme in VSD to create a separate homepage for my shopping cart site.

I'm having a problem with the mouseover buttons though. I have edited the originals so they show my chosen colours but when I hover over the button in my preview the background goes black where the button is, despite the fact that there isn't a background and it's fine in the original image.

I have hopefully attached a couple of screenshots to show what I mean.

Any ideas how I can stop this happening?

Hi Jennifer,

In your image editor, check that the background is correct in each of these files:

about_btn_hov.png
mo_about_btn_sel.jpg
about_btn_reg.png

The 3 versions of the button must carry the same background and size etc. in order for the mouseover function to work properly - visually.

Dave

Hi Dave,

How do I reinsert the "about_btn_sel.png" image into VSD? I've done the hov and reg buttons but couldn't see any reference to the select button. I have changed it to match the others in the file.

Although I don't use VSD, it's my understanding that png images with transparency will show up as black in VSD preview but will appear correctly when viewed on-line. Try uploading a test page and see what happens!

Your understanding is understood and correct.

Ok, I've located the mo_about_btn_sel.jpg file, changed those too and uploaded a test page but it's still happening

Test page is here: http://www.jsminiatures.co.uk/staging/

Anything else I can try?

Because the images are over the top of another image VSD is converting them to jpegs. Might try nudging them up just a little as they look to be over the top of two images slightly. They may not get converted if they are only touching one. To test move them off to the side where they will only be touching one object.

I don't understand how to resolve the problem. As far as I am aware I've just used the 2 images - the sel and the hov images to create the mouseover.

The mo_about_btn_sel.jpg file uploads when you publish the page so are you saying it's created when VSD uploads the files?

How do I fix it so I don't get the black box around my button?

Your buttons are sitting on top of the nav_bar.png and they are touching the main content area background. You could try narrowing down the transparent border of the png's to the smallest possible amount.

Ah, I see what you're getting at. Is that something to set when you export the png from web image studio? or should I crop the image?
(The original buttons for the mineral theme were bigger)

The other thing I've noticed is that VSD seems to make text in images slightly blurred. Is there a way to stop that?
It's very noticeable when I'm switching from my SCCP site to the same logo and buttons in the VSD site.....