featured image border.....

[khopek]

I can't find an answer to this exact question...

I am wondering how to put a border around JUST the featured image that shows up in the NEW PRODUCTS sidebox.

I've found answers for how to put a border on product listing images in subcategories, BUT not for just this one picture.

[kuroi]

Add somelike this to your stylsheet

#whatsnewContent img {border: 2px solid red}

[khopek]

Add somelike this to your stylsheet

Great! That did it! Thanks

2 more things...

How do I add padding to the What's New sidebox?

How do I adjust the spacing in between each sidebox?

[sicness]

#categories, /* ->> for categories */
#categoriesContent, /* ->> for categories content */
#shoppingcart, /* ->> for shopping cart ... and how its follows */
#shoppingcartContent,
#whatsnew,
#whatsnewContent,
#information
{padding: 3px 3px 4px 1px;}

Hope this satisfy your questions if u have other questions please ask :))


Kind regards,
Radoslav

[sicness]

ops u can miss thus step up

and modify this lines

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-image:url(../images/sidebox_top.gif);
background-repeat:no-repeat;
padding: 0.2em 0.2em;
}

mistake is mine too much rush for nothing just shame :)

[kuroi]

You haven't been specific about where in the Whatsnew sidebox you want to add the padding. If it is to the header, then sicness's approach will work. If it is to put more space around around the image then you will can do that by adding the the following to your stylesheet

#whatsnewContent {padding: XXem}

Unfortunately this isn't the end of the story. Firstly, this padding will not be added to that already declared for your sideboxes generally (see the orange line below - taken from your stylesheet) it will replace it and so will need to be bigger.

.rightBoxContainer {

align: right;
background-image:url(../images/sidebox_middle.gif);
background-repeat:repeat;
margin-top: .5em;
margin-left: -0.05em;
margin-right: 0.2em;

}

.sideBoxContent {

background-image:url(../images/sidebox_bottom.gif);
background-position:bottom;
background-repeat:no-repeat;
padding: 0.35em;

}

However, as your image is a fixed width, the extra padding (or the border that you added before) can cause it to be pushed to the left, or in standards-compliant browsers such as FF or Opera, overflow the redge of the right hand column.

This happens when If your image width + border-left + border-right + padding-left + padding-right is greater than the width that you have set for your sideboxes on line 2 (I think) of Admin > Configuration > Layout Settings.

I think that you've already experienced this when you added the border and tried to whip the box back in line by pulling from the left (red line above) and pushing from the right (green line).

A better solution woiuld be to increase your sidebox width in Admin (as above), not forgetting to also increase your right column width (same Admin page and around line 16).

To increase the spacing between sideboxes you could increase value of the magenta line above, but this would also push the boxes further away from the top , so you may prefer to add a margin-bottom statement instead. If so please be away that margins are not additive, so anything less than the value of margin-top would have no effect.

[sicness]

pfff :) thanks for the exhaustive answer and explanation :))