Borders around products

I don't know if this is the right place to post this if it is not sorry to all. I have searched and could not find anything on this subject.

Can someone please tell me how and what file i need to modify to get boarders to show around the category pictures and the featured, new products and so on.

Like the picture shown

Thank you

With css can create the effect although may not prefect, it is a starting point

/* Add borders to the cells of columnar display in center column */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	border-top: 0.1em solid #E7E7E7;
	border-left: 0.1em solid #E7E7E7;
	margin-right: -0.06em;
	margin-left: -0.06em;
}

/* For style of the link which under the images of above column display */ 
.centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
	display: block; 
	text-align: center;
	padding-left: 5%;
	padding-right: 5%;
}

Thank you that worked for me..

I do have another question can it be done for category images also. If it can How and what is the code i have to add for that.

In what page?

.

On This page here is a link.

http://citynights.no-ip.info/edy/index.php?main_page=index&cPath=1

and on these pages

http://citynights.no-ip.info/edy/index.php?main_page=index&cPath=1_3

also thanks for the quick response.

You are welcome! :smile:

dscott1966:

On This page here is a link.

http://citynights.no-ip.info/edy/index.php?main_page=index&cPath=1
This under the class below.
.categoryListBoxContents

dscott1966:

and on these pages

http://citynights.no-ip.info/edy/index.php?main_page=index&cPath=1_3

also thanks for the quick response.
And this under the class below.
.centerBoxContentsProducts

They can be grouped together if no special requirement.

/* Add borders to the cells of columnar display in center column */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsProducts {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	border-top: 0.1em solid #E7E7E7;
	border-left: 0.1em solid #E7E7E7;
	margin-right: -0.06em;
	margin-left: -0.06em;
}

Thank you so much it looks alot better. You have been a big help.

I do have one more question how do you get the border to go on the right side its on the left but not on the right. do i just play with the settings or do i need to put something else in the code. you can look at the last post at the links to see what i'm talking about.

That is ok figured it out i just need to add this code, border-right: 0.1em solid #E7E7E7; to the one you gave me eariler to get it on the right.

Again Thank you, You have been a big help.

Yes, the code above only have the borders for the left and top, and not for the right and bottom. You can add both of the the right and bottom borders to the css.

And in some situations, add a height attribute will give uniform display and improve the effect.

I do have one more question you said height, will that help to close of the boxes so that it will not have any spaces in between the first set and the second set and so on. if not how do i get that effect of a close box. that is the only problem. what is the code for that.

Take a look at this to see what i'm talking about please.

http://citynights.no-ip.info/edy/index.php?main_page=index&cPath=1

You can add both of the 4 borders and form as a box. Also add a height to the css for uniform display but it need to predict the max height first. Otherwise the boxes will layout unevenly for different height.

/* Add borders to the cells of columnar display in center column */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsProducts {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	border-top: 0.1em solid #E7E7E7;
	border-left: 0.1em solid #E7E7E7;
        border-right: 0.1em solid #E7E7E7; 
        border-bottom: 0.1em solid #E7E7E7; 
	margin-right: -0.06em; /* add more negative value if the cell drop to lower line */
	margin-left: -0.06em; /* add more negative value if the cell drop to lower line */
        height: 15em; /* adjust according to the maximum height of the product's data */ 
}

I Thank you again for all your help and knowledge that you have given and showing me the way to work with the style sheet to get the effect that i needed.

You are a asset to the community!!!!!!!!!

You are most welcome! :smile:

And glad to hear that you have the problem solved. :smile:

Hi dscott1966... how did you get your new products box to change pictures and title? Looks so...:cool:

I got that from the downloads section: Here is the url

http://www.zen-cart.com/index.php?main_page=index&cPath=40_52

and it is called: Scrolling Whats New Sidebox