border around product listing like classic

Hi,

I started customizing based on the template_default template. I got most of the results I wanted but have a difficult time finding the section in the stylesheed.css where I can define a box or border around the product listing. Just the way it looks when I use the classic template.

I managed to create separating lines between each listing and created a bit of space between each product but I just can't create a border around the whole listing on the page.

Thank you for any input...

Since you didn't post a way for us to see exactly what you are talking about, get a copy of FireFox and install the Web Developers Toolkit. Using the information bar that it adds, you can find exactly where you need to enter the border parameters.

Please refer to the following topic.
Product Listed to close together

In the post:
No. 11

For the border only, add the codes below to your stylesheet and adjust the values for what you desire.

.productListing-data {
padding: 0.5em 0.2em 0.5em 0.2em;
border: 1px dotted #E6E6E6;
}

Your suggestion produced a border for each cell. I wanted a border around the whole thing.

.productListing-data {
padding: 0.5em 0.2em 0.5em 0.2em;
border: 1px dotted #E6E6E6;
}

I used the developer toolkit in firefox but could not find anything at first. When I analized a template set to classic, I found this:

.centerBoxWrapper, .tabTable {
padding: 0px;
height: 1%; /do not remove- IEhack/
border: 1px solid gray;
margin-bottom: 1em;
}

I inserted it to my stylesheet and it worked! I was a bit concerned to do this because this is a entry taken from the old classic stylesheet. I hope this is not negatively affecting other things as my template is based on template_default. Anybody any thoughts on my solution? Is this safe to use?

Again, without seeing your site, it's difficult to be "spot on".

You've got FireFox and the toolkit, so try this. Comment out your addition as the new stylesheet does not use the tabTable anyway.> /*

.centerBoxWrapper, .tabTable {
padding: 0px;
height: 1%; /do not remove- IEhack/
border: 1px solid gray;
margin-bottom: 1em;
}
*/
Then open your site in FireFox and, under the Information menus of the Developers Toolbar, select "Display Div Order". Look for the line that surrounds the area in question. On your home page, it will probably be > div #whatsNew .centerBoxWrapper
Whichever it is, you'll need to search the stylesheet for the > .whateverItIs in your stylesheet. It should already be there somewhere and what you have added is probably repetitive in many cases.
Once you've found the "whateverItIs" in your stylesheet, enter the desired information there.
NOTE: Many times items are "nested" where, for instance, a border is applied for several areas in the same "call". If ".whateverItIs, .whateverItWas, and .whateverItCouldBe" are nested and you only want to change the border for ".whateverItIs", just add a line below the nesting that would look something like > .whateverItIs {
Border: 1px solid #123456
}
Items that come last in order in the stylesheet take precedence so the new border for ".whateverItIs" would change the "nested" border to the new specifications.

If this all makes the border you're looking for, go back and delete the following code from the stylesheet > /*

.centerBoxWrapper, .tabTable {
padding: 0px;
height: 1%; /do not remove- IEhack/
border: 1px solid gray;
margin-bottom: 1em;
}
*/

A copy of TopStyle Lite would be very helpful to your cause.:thumbsup:
HTH

Here is my link https://www.mydanilo.com
The code I added is doing exactly what I want. After looking at my site, do you still think I should change it to what you are suggesting above?

Thank you for the help here....

Since there is no ".tabTable" in the stylesheet, your code is working and, unless you want to remove the ", .tabTable", you don't need to. It will work either way.

You do have an error in your stylesheet.css around line 288

#navBreadCrumb {
padding: 0.5em 0.5em;
margin: 1px;
background-color: #ffffff;
}
The breadcrumb is working but the code is not being read correctly because the semicolon (in red above) is missing from the end of the margin line.

HTH

I Like the colors of the site as they compliment the products while keeping things simple. Too many think having 256 colors means you have to use them all.

Off the topic of site appearance but...

It appears that you have shied away from attributes and options for the products. Not sure why you did this but, allow me to relay my thinking for just one item.
Shopper Scenario:

You have the "Green Pears on Wooden Tray" which looks GREAT and something I might want to purchase. AND, if I could personalize it some more, I'm sure I would want one in my home. The colors would be better if I could have Orange, Gold, and Red. And, in the dining room, I'd like all Brown.

By adding Option Names of Color1, Color2, and Color3 you can allow the customer to pick and choose to match their decor. Each Option Name would have eight values. The first would be "Please Choose a Color" and the next seven would be the seven available colors.

The "Please Choose a Color" would be set at default and display only. This forces the customer to select the three colors they want while still allowing them to have all three the same, a two/one combo, or a mixture of their choice.

The item now becomes "Pears on Wooden Tray" with over 200 combinations!

I don't think I would use this on the Pear Candles themselves as you lose the colorful display and there are only seven colors anyway. In this case, the colors alone will make the shopper want to scroll down to see them all.

Just my two cents worth from a Texas point of view.:D

Off topic...

Misspelling of New Products as "ew Products". :blink: