Customize the ShareGate Corporate Directory

I was tasked with resizing the corporate directory pictures, and resize the font in the solution created by Sharegate
https://en.share-gate.com/blog/corporate-directory-sharepoint-search

Here's the CSS I used to increase the pictures from 75px to 150px, and set hte font size to 15px

.ms-srch-people-outerContainer {
  width: 264px;
  height: 335px;
  display: inline-block;
  border: 1px solid #e1e1e1;
  margin: 0 5px 10px 0;
  padding: 10px;
  vertical-align: top;
}
.ms-srch-people-outerContainer:hover {
transform: scale(1.05);
position:relative;
z-index: 5;
border: thin #B4B4B4 solid;
background-color:white;
}
/*---people picture resize---*/
.ms-peopleux-userImgWrapper{
width:200px !important;
height:200px !important;
}
.ms-peopleux-userImg{
clip: rect(0px, 200px, 200px, 0px) !important; 
min-height: 200px !important; 
min-width: 200px !important; 
max-width: 200px !important;
}
.ms-srch-people-item #UserPersona{
height:200px !important;
}
.ms-spimn-presenceWrapper{
display:none;
}
/*---end resize picture --*/
.ms-srch-people-outerContainer .ms-srch-people-item {
  width: auto;
  padding: 0;
  min-height: none;
  overflow: visible;
}
.ms-srch-people-outerContainer #UserPersonaContainer {
  text-align: center;
  width: 100%;
  margin-bottom: 5px;
}
.ms-srch-people-outerContainer #UserPersonaContainer #UserPersona .ms-table {
  margin: 0 auto;
}
.ms-srch-people-outerContainer #UserInfoContainer {
  width: 100%;
  margin: 0;
  float: none;
}
.ms-srch-people-outerContainer #UserInfoContainer .label {
  font-weight: bold;
  margin: 0 5px 0 0;
  width: auto;
}
.ms-srch-people-outerContainer #UserInfoContainer #NameField {
  text-align: center;
}
.ms-srch-people-outerContainer #UserInfoContainer #NameField a, .ms-srch-people-outerContainer #UserInfoContainer #NameField a:link, .ms-srch-people-outerContainer #UserInfoContainer #NameField a:visited {
  font-size: 18px;
  color: #005a84;
}
.ms-srch-people-outerContainer #UserInfoContainer #NameField a:hover {
  color: #13b5ea;
}
.ms-srch-people-outerContainer #UserInfoContainer #JobTitleField {
  text-align: center;
  font-style: italic;
  font-size: 13px;
  padding-top: 0;
}
.ms-srch-people-outerContainer #UserInfoContainer #DepartmentField{
  margin-top: 5px;
  font-size: 13px;
}
.ms-srch-people-outerContainer #UserInfoContainer #WorkEmailField, #WorkPhoneField{
  font-size: 13px;
}
.ms-srch-people-outerContainer #UserInfoContainer #MobilePhoneField,
.ms-srch-people-outerContainer #UserInfoContainer #MoreInfoShort,
.ms-srch-people-outerContainer #UserInfoContainer #MoreInfoLong,
.ms-srch-people-outerContainer #UserInfoContainer #SelfSearchInfo,
.ms-srch-people-outerContainer #UserInfoContainer
.ms-srch-people-item-separator {
  display: none;
}
.alpha-controls {
  overflow: hidden;
  margin: 10px 0;
}
.alpha-controls .letter {
  float: left;
  min-width: 16px;
  text-align: center;
  margin-right: 10px;
   margin-bottom:10px;
  padding: 6px 10px;
  cursor: pointer;
  background-color: #005a84;
  color: #fff;
  text-transform: uppercase;
}
.alpha-controls .letter:hover, .alpha-controls .letter.active {
  background-color: #13b5ea;
}

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.