Need help? Check out our Support site, then


Changing color of border around gravatar

  1. When I post something, my gravatar (which is an image) is displayed next to the title of my post. There is a white border around my gravatar. Does anyone know how I can change the color of this border?

    The blog I need help with is in-fide-scientiam.com.

  2. To change the color around Gravatars shown at the left of posts in the Sundance theme, you should adjust the background color as well as the border. Here is an example:

    .avatar {
    	background-color: #ff0;
    	border: 1px solid #00f;
    }

    Change the color codes to colors of your choice.
    http://en.wikipedia.org/wiki/Web_colors#X11_color_names

  3. Thank you! Now, do you know how I can change the size of the gravatar?

  4. Now, do you know how I can change the size of the gravatar?

    Well, you can stretch the image with CSS rules, but the size the original image is set by the theme's PHP code and cannot be adjusted with CSS only. That means that changing the size will probably make the image look blurry. It might work if you only change the size a little. Here is a CSS rule you can experiment with:

    .avatar {
    	width: 70px;
    	height: 70px;
    }

    An alternative would be to replace the image manually with CSS, but it has a downside which is that it gets rid of the hovercard feature. Here it is an example if you want to try it out:

    .avatar {
    	display: none;
    }
    
    .entry-header > a {
    	background: url(http://2.gravatar.com/avatar/89d03635943476a1a503a911b2926b65?s=75) no-repeat;
    	float: left;
    	margin: 9px 0 0 -16.66666666%;
    	width: 75px;
    	height: 75px;
    }

    Note how I changed the Gravatar URL so that it ended with "?s=75". Make sure that number matches whatever width/height you pick.

  5. Thank you so much for your help!

  6. No problem. :)

Topic Closed

This topic has been closed to new replies.

About this Topic