Gravatar widget rounded image
-
Hi,
I would like to know how to get the Gravatar picture rounded to look like in the Sela theme demo.
Right now I’m using the “gravatar profile (jetpack)” widget. It shows the picture, but is square, not as nice as in the demo 🙂
Many thanks,
Juan
-
Hi Juan!
Can you please share a link to your site so we can take a look? Also, if there is a direct link to a page where you’re seeing a square but want a circle, a link to that would be great! 🙂
Hi Sarah!
here is the link to the site, I just started with it and with wordpress 🙂
The picture that I’m talking about is the one on my avatar.
Many thanks in advance!!
Thanks for the link! And welcome to WordPress! 😀
Do you mean the image (like your avatar) you have in the “about me” widget right now? You could activate the Custom CSS module in the Jetpack plugin. Then go to Appearance > Edit CSS and add the following code to make that image display as a circle:
.grofile-thumbnail { border-radius: 100%; }(Turning that particular image into a circle will cut off some of the text in the photo though, so it may not be ideal.)
The circles on the Sela demo (on the front page featuring Takashi & Caroline) have been created using Testimonials. To use that feature, enable the Custom Content Types module in your Jetpack plugin. Then you can add Testimonials from your dashboard and the image will display the same way on your site.
Let me know if you have any questions! Or if you meant something else and I’ve explained the wrong things. 😉
Thanks Sarah,
Yeah, I meant that image from the avatar on the ‘about’ widget. I tried what you told me and worked fine, thanks! but I want it look like the one on the template. You can see it here: https://theme.files.wordpress.com/2014/12/sela-gravatrprofile.png?w=660
I just got that image from the themes page: https://wordpress.com/themes/sela/
In that same page, they talk about the widget at the end of the post, after the ‘Social links’ paragraph and before the ‘Testimonials’.
I’m trying to get mine to look like that one, but the picture on mine is still too big (you are right, that’s not the best pic but I’ll cahnge it later ;)). I’m not sure if I’m using the right widget, the one I’m using is “gravatar profile (jetpack)”.
Many thanks again Sarah, and sorry if my explanations are a bit confusing!!
Juan
Ah, I see what you mean now! Thanks for the screenshot to help me find which one you meant. 🙂
If you want to use the Gravatar Widget (like in the screenshot), make sure you have the Extra Sidebar Widgets module activated in your Jetpack plugin. When it’s on, you’ll see the Gravatar Profile widget in your widgets area to add to your sidebar.
It looks is a bit different than on WordPress.com (like the demo/screenshot) though, however you could use some custom CSS (Appearance > Edit CSS) to style it to look more like the example, if you’d like.
Here’s some CSS you could add to make the image round and center the text:
#grofile-3 img { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; width: 50%; } #grofile-3 { text-align: center; }Adjust the 50% to change the size of the image to your preference.
Is that getting closer to what you want now? Let me know if you have any questions!
Hey Sarah!!
thanks for your help, it worked! 🙂
The code was slightly different that the one you sent me but now it looks the way I wanted (I’ll change the picture later). This is the code I used:
.grofile-thumbnail { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; width: 50%; } .grofile { text-align: center; }Many thanks for your help!!
Juan
Great! I’m glad you found a variation that works for you. And you’re welcome! 🙂
I mark this topic as resolved.
Thank’s again, I’m very happy with the help received!
The topic ‘Gravatar widget rounded image’ is closed to new replies.
