Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 19, 2013 at 2:43 pm #28043
    jbiasucci

    I would like the images in Enfold to have exactly square corners and no border at all. I haven’t been able to find any thread showing how to produce such square corners, though I’ve seen some discussing removing the border. All my image corners still come out slightly rounded. I would appreciate help on this.

    Thanks,

    John

    August 19, 2013 at 4:22 pm #136247
    Devin

    Hi John,

    Do you have a live example we can see? I can’t think of any functions in the theme that add a border radius to images other than the testimonial user images.

    Regards,

    Devin

    August 20, 2013 at 4:34 pm #136248
    jbiasucci

    Yes. Please look at the featured images for the blog posts shown at the bottom of the home page, and for the featured images at the top of each post on the blog page, for this site:

    uufreethinker.com

    To my eye, these images are slightly rounded (not perfectly sharp corners).

    The site is still under construction, but I will temporarily activate it so that you can look at it.

    Thanks,

    John

    August 20, 2013 at 5:05 pm #136249
    Devin

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    .avia-content-slider .slide-image, .avia-content-slider .slide-image img {
    
border-radius: 0px;
    
}

    Its small enough where I just hadn’t noticed it before but that should remove the border radius.

    Regards,

    Devin

    August 20, 2013 at 11:38 pm #136250
    jbiasucci

    Hi Devin,

    Thanks very much for your prompt reply. It worked fine for squaring the corners on the images at the bottom of the home page showing recent posts. It did not work for squaring the preview images on the blog page or individual post pages. However, by experimenting I found that including “.big-preview img” in the code you sent for custom.css file solved that problem. Here is what the code now says:

    .avia-content-slider .slide-image, .avia-content-slider .slide-image img, .big-preview img {

    border-radius: 0px;

    }

    A follow up question: I’m wondering if I should also include something to square the corners for “.small-preview img” and for “.related-posts img” as well? (I would like to square these corners too if I can.)

    If so, how exactly should I revise the above code? When I tried doing it myself to add these two additional bits of code it seemed to mess up the squared corners on the big-preview images that I had just fixed, so I took these bits back out. I expect I didn’t have the syntax right for adding it.

    Thanks for all your help.

    John

    August 21, 2013 at 1:43 am #136251
    Ismael

    Hey,

    You can use this:

    .small-preview {
    
border-radius: 0;
    
}
    

    
.related_posts img, .related_posts a {
    
border-radius: 0;
    
}

    Regards,

    Ismael

    August 21, 2013 at 7:17 am #136252
    jbiasucci

    Hi Ismael,

    That’s terrific. Works perfectly. May thanks to you and Devin for such prompt and great support. My problem is fully solved.

    John

    August 21, 2013 at 1:47 pm #136253
    Ismael

    Hey,

    Glad we could help. :)

    Cheers,

    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘How create images with exactly square corners (no rounding)?’ is closed to new replies.