Making Employees Pictures rounded and color overlay

Hi there,

I enjoy working with this theme. I want to ask if it is possible to show the employees pictures round and have overlay in another color than the “standard color”.

I already found this in another thread .

employee-photo {
border-radius: 50%;
}

but do I paste this in the widget css? or in the overall page additional css?

Thank you so much!
Jennifer

Hi Jennifer,

You can paste those code in: Customize > additional CSS.

Regards,
Awan

Hi, @awan thank you. Can you tell me how I can adjust the color of the employee’s overlay? If I don´t want it to show the main color?

Thank you :slight_smile:
Jennifer

Hi @JenniferZ,

My apologies for late reply. Below is the CSS code to change the color of employees overlay:

.roll-team .team-item .team-pop {
    background-color: grey;
} 

Happy New Year!

1 Like

Thank you @awan!
It´s perfectly in time - I kind of stopped working at the site but are now coming back to it. I have some more questions I will take a look it this already came up.

Have a great weekend

Hi @awan

I tried to apply the code

employee-photo {
border-radius: 50%;
}

but that doesn´t work. Any suggestions?

Hi,

The widget doesn’t use employee-photo class name for the avatar. Use this instead:

.team-item .avatar img {
    border-radius: 50%;
}

Hi @awan thanks for your fast response.

Okay this does have an effect but it makes it look oval.
And there are white borders… hm can I change the border colour and have it really really round?

Thank you so much!
Jennifer

Please adjust the border-radius value from the code in above.

And below is the CSS code to make the white background transparent:

.roll-team .team-inner {
    background-color: transparent;
}