Horizontal and vertical lines

Hi,

May I have horizontal and vertical lines which will seperate the categories/products?

Thanks

Hello,

Could you please provide me with a URL to your product category page, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

The url is http://www.pantikidis.gr/carpnew/eshop
In case that you are able to provide me with the category solution, I think that the products solution will be about the same.

thanks

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

.category-view .row .category .spacer {
   text-align: center;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
   padding:  20px 10px;
}

.category-view .row .category:nth-child(2n) .spacer {
   border-right: 0;
}

.category-view .row .category {
   padding: 0;
}


I would like to pick up on this subject and make it work for our needs:

In category and product view, we mainly show 3 items per row, sometimes even 4 items per row.

Can this override be modified to show horizontal and vertical lines (in category and product view) as shown in this example?

Hi,
@[email protected], could you provide your website URL (here or via private message)? Then I'll try to help.

Try with this code:

Code: Select all

.category-view .row .category .spacer,
.browse-view .row .product .spacer {
   text-align: center;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
   padding:  20px 10px;
}

.category-view .row .category:nth-child(3n) .spacer,
.browse-view .row .product:nth-child(3n) .spacer {
   border-right: 0;
}

.product.vertical-separator {
   padding:0!important;
}


Hi Piotr,

thank you, almost perfect!

As you can see in the screenshot below, some of the horizontal lines are higher or lower, depending on the length of the product name.



Is there a way to assign fixed heights to the product names and product thumbs? I guess this would solve this problem.

Bye...
Andy

Change the previous fragment to:

Code: Select all

.category-view .row .category .spacer,
    .browse-view .row .product .spacer {
       text-align: center;
       border-bottom: 1px solid #000;
       border-right: 1px solid #000;
       padding:  20px 10px;
       height: 290px;
}


(height value added).

Hi Piotr,

based on your latest solution, I added a fixed height for "catProductTitle" to the override and now it's working.

Thank you very much...
Andy