Changing color of border around gravatar

  • Author
    Posts
  • #1170349

    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.

    #1170553

    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

    #1170560

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

    #1170565

    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.

    #1170566

    Thank you so much for your help!

    #1170567

    No problem. :)

The topic ‘Changing color of border around gravatar’ is closed to new replies.