Create a circle user photo – Themeco Community

Create a circle user photo

egiesow — Wed, 01 Oct 2014 12:27:23 +0000

Hi I would like to know how to make the user photo a circle shape, specifically when it is used at the end of a blog post to show the author.

I would also like to know how to make the user photo/avatar for an author smaller in size at the end of a blog post.

I appreciate your help.

http://www.ericanderica.org

Reply To: Create a circle user photo

Kosher K — Wed, 01 Oct 2014 13:06:49 +0000

Hi There,

You can do it by using this code below,

Simple add it on Customizer > Custom > CSS

.x-author-box .photo {
   border-radius: 100em;
   max-width: 100px;
}

Simply change max-width value to adjust the photo size.

Hope that helps.

Cheers

Reply To: Create a circle user photo

egiesow — Wed, 01 Oct 2014 17:03:50 +0000

perfect! Thanks! I appreciate it!

Reply To: Create a circle user photo

Cousett — Wed, 01 Oct 2014 19:30:13 +0000

Glad we were able to help. 🙂 Have a nice day.

Reply To: Create a circle user photo

egiesow — Sun, 05 Oct 2014 16:00:54 +0000

Hi again, I switched to the integrity theme and now the code above does not seem to work.

I would like the a author pic a little larger now and circle.

Thank-you for your help

Reply To: Create a circle user photo

Rad — Mon, 06 Oct 2014 00:13:04 +0000

Hi there,

It should be the same, just add the same css as given above.

Thanks!

Reply To: Create a circle user photo

egiesow — Thu, 09 Oct 2014 00:57:20 +0000

Hi again,

I am back on the ethos and have re-entered the above css, but my author photo at the end of blog posts is still really small. And the problem actually starts when I upload my photo on the user profile… the photo is a large/normal size but when it uploads the user profile shows it really small.

Do you know what the issue could be?

Thanks!

ericanderica.org

Reply To: Create a circle user photo

Christopher — Thu, 09 Oct 2014 11:55:03 +0000

Hi there,

Please try this code:

.x-author-box .avatar {
   border-radius: 100em;
   max-width: 100px;
}

Hope it helps.

Reply To: Create a circle user photo

egiesow — Fri, 10 Oct 2014 00:47:22 +0000

Hi, I just plugged that code in and even adjusted the px value a couple times and nothing happened…

Reply To: Create a circle user photo

Rubin — Fri, 10 Oct 2014 12:38:17 +0000

Hey There,

I’ve tried to access your site and it’s just blank can you give me the address of the particular page where I can see the user photo that has to be round.