Thread: Custom CSS Class for product arrows and "view larger image"?

I need to apply a custom CSS class to the arrow images and the "view larger image" image on product detail pages, but I can't find where to do this.

The problem is that we have a CSS class that applies a 2px blue border around all images that are links, but we need to apply an exception (border: none) to these specific images.

Thanks!

You should be able to add a 'ProductNavLink' style to the stylesheet and the software will use that style for those buttons. We reference that style in the XSLT function that creates them.

Not sure if I'm understanding correctly. I tried adding

.ProductNavLink
{
border: none;
}

and

ProductNavLink
{
border: none;
}

into style.css for our default style, but neither worked. We're using v8 of the software.

Can you tell me what I'm doing wrong? Thanks!

I am still having problems with this. When I apply the following CSS

.ProductNavLink img
{
border: none;
}

a:visited.ProductNavLink img
{
border: none;
}

The link borders on the arrows are removed, but NOT the link border on the "view larger image" image button.

Help, please!

There doesn't seem to be any CSS class applied to the "view larger image" image button.

How can I style this image?

That's an image located under your {root}/skins/skin_1/images/showlarger.gif folder.

I know that. My question is, how can I apply a CSS class to remove a border from around this image?

Editing the image itself will be of no help here.

just drop a div or a span around the GetProductImage function and assing a style to that. It should be inherited by child elements.