WordPress.org

Forums

Twenty Twelve
[resolved] Question about comment gravatars (5 posts)

  1. pikahyper
    Member
    Posted 2 years ago #

    Does anyone know how the 3.5 beta 1 gravatar images in comments are getting rounded corners? Normally <img>'s can't be rounded via border-radius but somehow the comment avatars in twentytwelve are and it isn't from javascript.

    Is this something on the gravatar side? I've duplicated the css exactly and been unable to reproduce it. I also went through the functions.php file to make sure there wasn't a function in there rounding them and didn't see anything.

    Is there some build in function with version 3.5 beta 1 for rounding img corners that isn't in version 3.4.2? cause using twentytwelve in 3.4.2 doesn't have the rounded corners, if there is a built in function does anyone know where it is located so I can make it work in 3.4.2?

    Any help would be appreciated, thanks.

    http://wordpress.org/extend/themes/twentytwelve/

  2. Drew Jaynes
    4.2 Release Lead
    Posted 2 years ago #

    Do you have a link to your site where the corners are rounded on gravatars? I can't reproduce this on a clean 3.5 Beta 1 build with Twenty Twelve.

  3. pikahyper
    Member
    Posted 2 years ago #

    Normally I wouldn't cause I do everything local but it just so happens this time I did install it on my web server trying to fix a bug in a plugin, link, you can see that the gravatar in the comment has rounded corners and when you disable/enable the border-radius in Chrome inspector it does go from rounded to square and back but it really shouldn't.

    Updated to add: whoops small mistake, that is a clean install of 3.4.2 using the twentytwelve theme and even then it uses the rounded corners so it isn't a build in 3.5 function and must be built into the twentytwelve theme but I still don't see where.

  4. Drew Jaynes
    4.2 Release Lead
    Posted 2 years ago #

    The theme at the link you supplied is Twenty Eleven and according to Firebug, the rule/properties in style.css you're looking for are:

    .commentlist .avatar {
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 1px 2px #CCCCCC;
      left: -102px;
      padding: 0;
      position: absolute;
      top: 0;
    }
  5. Normally <img>'s can't be rounded via border-radius

    Not sure where you got that idea. The border-radius properly applies to img's just fine. Has for at least a year. Some older browsers didn't support it properly, but all the major browsers I know of work fine with that now.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic