Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #321224

    Hi,

    I’ve been fooling around with the CSS for a quite a while checking out the forums here and I was able to solve one of my problems in the product detail page, but not the shop catalog page.

    I’m looking to control the borders around each element of the images. In the website, you will see a border around the man, then a border around the product name and price and then one around the options. How can one control each of these borders or is that not possible?

    Thanks

    #322596

    Hi slui!

    1) Use this code to change the border color of the preview image container:

    
    .main_color .thumbnail_container img, .main_color div.thumbnail_container{
    border-color: #444;
    }
    

    2) This code will change the style of the product name + price container:

    
    #top .inner_product_header{
    border-color: #444;
    }
    

    3) This code will change the border of the buttons bellow the product name/price:

    
    #top #wrap_all .avia_cart_buttons{
    border-color: #444;
    }
    

    Regards,
    Peter

    #322686

    Hi Dude,

    What you provided did not work. I took another closer look and it is under the class called “products”. If I change the border-color attribute, I’m able to remove all three borders in each area but that is not what I want. When I do this it also changes the hr color to a different color as well which is not what I want.

    I look forward to hearing from you.

    sl

    #323459

    Hey!

    If you want to separately control the border of the product items, try this:

    .inner_product {
    border: none;
    }
    
    .inner_product .thumbnail_container {
    border: 1px solid red;
    border-bottom: none;
    }
    
    #top .inner_product_header {
    border: 1px solid blue;
    border-bottom: none;
    }
    
    .avia_cart_buttons {
    border: 1px solid orange !important;
    border-top: none;
    }

    Regards,
    Ismael

    #324582

    Hi Ismael,

    This worked perfectly. Thanks. You can close this off now.

    sl

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘WooCommerce Shop Catalog Image Borders’ is closed to new replies.