Change profile images to squares

Before you start

• You need access to the Control Panel with permission to manage the Developer Framework.

Note: This example is a sample, not officially supported by Interact Technical Support. Review and test it with your development team before use.

Overview

Within Interact, each person with an account can have a picture that helps you identify the people using the system. By default these images are round.

One downside is that it can be hard to line up someone's face in the centre of the image so that they appear central to the circle.

The following CSS changes these images from a circle to a square, which makes the result more predictable once images are uploaded and viewed within Interact:

#profile figure, #hc figure, .Widget_People_Standard figure {
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;
}

.img-circle {
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;
}

.people-directory-followed, .people-directory-not-followed {
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;

}
#Endorse figure, #document figure, #imageParameters figure, #CurrentUser figure, #Interact-Trial figure, #Search figure {
    -webkit-border-radius: 0px!important;
    -moz-border-radius: 0px!important;
    border-radius: 0px!important;
}

Add this CSS to the MasterPage CSS section of the Developer Framework within Interact. Here is what it looks like in place:

Related

• Custom CSS
• Target specific pages or sections