WordPress.org

Ready to get started?Download WordPress

Forums

How to fix round avatars problem (3 posts)

  1. Bubble Wrapped
    Member
    Posted 1 year ago #

    Hi there . . .

    I'm using StudioPress's eleven40 theme, which is here:

    http://demo.studiopress.com/eleven40/

    I can easily make avatars round by adding border-radius to .avatar or to img.avatar. But as soon as I add a border with padding, the image displays with straight edges inside of the round circle made by the border.

    Everything I'm reading says just add border-radius, but nothing seems to address this problem. It looks like both the image and the wrapper with the border need border-radius, but that doesn't fix anything.

    Any suggestions? I've tried asking in the StudioPress forum, but haven't found a solution yet.

    Thanks!

  2. catacaustic
    Member
    Posted 1 year ago #

    What you're reading is right, you do only add border-radius to the CSS rule for those image elements. The way that you're trying to do it isn't going to work because any padding is taken as part of the element so as you've found if the padding is outside of the image then the image won't get rounded.

    To get this to owrk you need to apply border-radius to both the image and the images containing element. If there's nothing around the images now you can add a <div> or similar around the image in your template files.

  3. Bubble Wrapped
    Member
    Posted 1 year ago #

    Thanks for your help. The div tag that wraps around the avatar is comment-author vcard. I'll have to create a new div and see if this works.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags