Employee circle

On my employee setup how do I change the image to circle? I added the following to my “custom CSS”, but it’s doesn’t change anything?
.employee-photo {
border-radius: 50%;
}
Also how to set the size for the employee photo? how to set the gap space between employee photos? how get I get rid of the white space for my team member Brock and Samantha?
My website is http://sample02.rswedding.com.au/team/
Thanks heaps

Hello there,

Thank you for asking.

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

.roll-team .owl-item{ /* Set the size for the employee photo */
  width: auto !important;
}

.roll-team .avatar img{ /* Set the size for the employee photo */
  width: 500px !important;
  max-width: -webkit-calc(100% + 20px) !important;
  max-width: -moz-calc(100% + 20px) !important; 
  max-width: calc(100% + 20px) !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
  margin-left: -10px;
}  

.roll-team .pop-overlay .team-pop{ /* Get rid of the white space */
  background: transparent;
}  

.roll-team .team-inner{
  border-radius: 50%;
  overflow: hidden;
}

.roll-team .team-inner{
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.roll-team .pop-overlay{
  width: -webkit-calc(100% + 20px);
  width: -moz-calc(100% + 20px);
  width: calc(100% + 20px);
  height: -webkit-calc(100% + 20px);  
  height: -moz-calc(100% + 20px);  
  height: calc(100% + 20px);
  background: #D8689C;
}

#panel-88-1-0-1 .roll-team .team-inner,
#panel-88-1-1-1 .roll-team .team-inner{
  width: 130px;
  height: 130px;  
}

#panel-88-1-0-1 .roll-team .avatar img,
#panel-88-1-1-1 .roll-team .avatar imgr{
  width: 130px !important;
  max-width: -webkit-calc(100% + 10px) !important;
  max-width: -moz-calc(100% + 10px) !important;   
  max-width: calc(100% + 10px) !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: -4px;
  margin-left: -4px;  
}  

#panel-88-1-0-1 .roll-team .team-item .team-pop .team-info,
#panel-88-1-1-1 .roll-team .team-item .team-pop .team-info{
  top: 19%;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hi Kharis,
Thanks for that, it works.
However, the images are just showing the faces, is there a way to adjust the size of the images follow with the width of the circle?
Just a question, which code is it that adjust the gaps between the employee’s photo? and which one is for the size of the circle?
Thanks,
Raymond

Dear Raymond,

> … is there a way to adjust the size of the images follow with the width of the circle?

I thought it would be hard adjusting the existing images to the circle area. The best approach would be by editing your image size manually in Photoshop or other image editing application. You should keep the dimension ratio of the circle.

> … which code is it that adjust the gaps between the employee’s photo? and which one is for the size of the circle?

I’ve put some CSS comments for them in the code above. One of them is /* Set the size for the employee photo */.

Warmest regards,
Kharis

Hi Kharis,
Thanks heaps.
Regadrs,
Raymond

Hi Kharis,
I would like to add a question to this thread. I have actually the same problem. I have posted your code lines to my custom css changed the panel ids to fit my page. I have prepared the pictures to be already round with 125px diameter in Illustrator and exported to *.png. Then I deleted your code lines:

.roll-team .team-inner{
border-radius: 50%;
overflow: hidden;
}

from my css but what I get are avartars that are cut at the top and at the bottom! I have really tried everything to get this simple picture round but I do not have any clou how this works. It seems that the frame for the picture takes the width and then take something like 10% less for the hight and throughs away everything that looks over the div! Even gaining the div “.avart” does not take effect.
I would be absolutely glad if you could help me with that!

Thanks in advance,
Marc from Germany!

Hi Kharis,

P.S. What I forgot!
If I do not delete your code lines and add square pictures (125px x 125px) I do get the same result!

Dear Marc,

Could you please try to apply the following CSS code?

.roll-team .team-item .pop-overlay{
  padding: 0;
}

Let me know how it works.

Regards,
Kharis

Hello Kharis,

thanks for your answer but it did not really work! The image is still cutted at the top and at the bottom. I do not get this. When I increase the size (width or height) of

.roll-team .avatar img

it will not change the fact that the picture is even cutted at the top. And when I increase the size of the container .roll-team .avatar it has no effect as well! Very strange.

Any more ideas?

If not, I will create a rectengular picture with centered round avartar!

I appreciate your help!

Marc

Dear Marc,

Could you please post your URL here so I can have a closer look?

Regards,
Kharis

http://aomarketing.co/

Im having the same issue!

Hello there,

Your original image for employee should be less than 550px x 400px. Otherwise it’ll be scaled down and hard-cropped to 500px x 400px. Please prepare a new image and reupload it.

Regards,
Kharis