Individual Product & Category Image Border

[CoderJim]

I need to place a 1px border around the image/s on the individual product page as well as on the category page, any idea where to start?

Lingerie Skin

Thanks

[bsmither]

I already see a 1px white border around each image on the 'basic-nylon' category page.

Probably the best place to put it, unless you want this style to be for all sub-styles, is in the black.css file.

Add this rule:

img#preview { border: 1px white solid; }

 

[CoderJim]

The page you site I think of as the sub-category page, whereas 'Menswear' is the category from my question. If you click the Red pant brings up the 'Product' page and that one as well needs a white border on the image.

I do thank you for the suggestion but I do want it for all substyles, in fact every instance of a photo I want a white border if possible, even when showing the basket view with images.

Thanks

[bsmither]

Unfortunately, HTML does not discriminate between what is a 'photo' versus what is an 'image', such as your logo, or what is a 'graphic', such as pointers, dividers, and other skin decorations. They all use the <img> tag.

So, we need to be very specific on how to code the CSS to choose just the <img> tags we want - such as the img#preview that targets the product's 'photo' on the View Product pages.

For all substyles, put the new rules in lingerie.css.

For the photos assigned to sub-categories - as opposed to photos of the products listed in a sub-category - the rule selector is: .subcategory img

For the Latest Products, well, you are not showing any. But for any photo you have added to the Homepage document, can have a style applied: #announcement img

For your logo, #logo img

 

[CoderJim]

Understood about the logo etc. Good point! Do you mean I put code on the content.product.php page? I tried various locations on the lingerie.css/black.css without any luck. Sorry, I don't mean to be dense and I really appreciate your help, but I may need a bit more hand-holding on this one and have you be more specific and include the additions in context with nearby code if possible.

As an option... for instance, could this be modified...

<img itemprop="image" src="{$PRODUCT.medium}" vspace="50" alt="{$PRODUCT.name}" id="preview" />

(As you can see I added the vspace to move the image down the page for design purposes. As an old HTML guy I was trying to hammer it, as we are want to do sometimes.)

I did look for the instances of what I think you meant but obviously don't understand,

I must admit that css is a new to me, I have always done HTML/Perl but I do understand the concept.

Thanks

[bsmither]

Even though the CSS files have been edited, the browser may not realize this. The browser may be using a locally cached copy of the skin's CSS files.

So, if the changes aren't showing up, force your browser to reload all the page's resources: CSS, javascript, images.

The CSS selectors I mentioned above, you will want to add those new rules to the lingerie.css file, probably at the bottom.

[CoderJim]

I got the cache concept, can't remember how many times I told clients about 'fresh reload'. So that's not the problem, I was looking for 'context' I suppose rather than literal which worked! Wow, this is so much easier than Perl.

Thanks