WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
change the featured posts thumbnail holder from round to square (9 posts)

  1. ugly_duck
    Member
    Posted 1 year ago #

    Hi, How can i change the shape of the image holder for the featured pages on the homepage?
    By default its a circle, but i want to change it to be a square.

    Also how do i add more than 3 features pages on the home page?

  2. idigitaloutreach
    Member
    Posted 11 months ago #

    I have the same question. I would like a rounded square or rectangle. And, I would like to add one more, but have the option to add more as needed. Thanks for the support!

  3. ElectricFeet
    Member
    Posted 11 months ago #

    .round-div {
        border-radius: 0;
    }

    should do it. If you want to stop them zooming, then make it:

    .round-div {
        display: none;
    }

    @Nikeo: for the FAQ:
    <li><a href="http://wordpress.org/support/topic/change-the-featured-posts-thumbnail-holder-from-round-to-square">make all the round images square?</a></li>

  4. Lyubomir
    Member
    Posted 2 months ago #

    @ElectricFeet And how to do the zoom not only to square but the square to have rounded corners? I tried with

    .round-div {
    border-radius: 10px;
    }

    or other number of pixels but nothing happens.

  5. d4z_c0nf
    Member
    Posted 2 months ago #

    Lyubomir, if you look at the css for .round-div you can see its border is 104px for "window" width > 979px otherwise is 94px.
    So to see an appreciable result start with a border radius of 106px (96px) and fine tune it. Or use percentages.
    Don't forget to use the right prefixes for different browsers engines,
    as you can see here:
    http://www.themesandco.com/snippet/featured-images-squared-instead-of-rounded-in-customizr/

  6. Lyubomir
    Member
    Posted 2 months ago #

    I tried many options and I realized that 'border-radius' indeed makes the corners of the square round but the OUTSIDE shapes of the corners (which we do not see anyway), not the INSIDE. The zoom effect is made by the inner parts of the square where 'border-radius' has no effect. Or at least this is the point I reached. If there is somebody out there that already did it successfully, please, share the snippet.

  7. d4z_c0nf
    Member
    Posted 2 months ago #

    as I said, tested live on themes and co demo : http://i61.tinypic.com/108dbhh.png
    edit:
    And this on your site:
    http://i58.tinypic.com/t70aj4.png

    isn't what you wanted? Sorry if I failed to understand

  8. Lyubomir
    Member
    Posted 2 months ago #

    Yes, yes, this is exactly what I want! Thank you @d4z_c0nf !!! You are very good!
    For me, this topic is resolved but I cannot close it because I am not its creator.

  9. d4z_c0nf
    Member
    Posted 2 months ago #

    Glad to hear that, you're welcome ;)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic