Page History

HTML

<script>
AJS.toInit(function(){

let searchIcon = $('.lipifo-search')[0];
$('.aui-button.search')[0].innerHTML = "";
$('.aui-button.search')[0].append(searchIcon);


$("form.aui.custom-user-search-form").on("submit", function(){
	var checkExist = setInterval(function() {
   		if ($('.inside-table-cell.field-value a').length) {

			// change href attr to be this site's mentor prof link
			$("#custom-user-search-results-table a").each(function() {
				if (this.href.includes("/~")) {
					let email = this.href.split("/~").pop();
  					console.log(email);
  					this.href = "/display/MSCOM/Company+Page?company=" + email;
				}
			});
      		clearInterval(checkExist);
   		}
        console.log("does not exist");
	}, 100); // check every 100ms
});
});
</script>

HTML

<style>
/* SEARCH BAR */
[class^="lipifo-"]:before, [class*=" lipifo-"]:before {
    color: white;
}

button.aui-button.search {
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    background-color: var(--primary-color) !important;
    color: white;
}

form.custom-user-search-form input.searchInput.text {
    border-radius: 4px;
    border: solid 1.5px #767676;
    background-color: #ffffff;
    color: #767676 !important;
    font-size: 15px;
    width: 233px;
    height: 50px;
    display: flex;
    padding: 0 10px;
}

button.aui-button.search.undefined {
    font-size: 0px;
    height: 50px;
    width: 50px;
    border-radius: 8px;
}

/*-----------------------SEARCH POPUP------------------------*/
.inside-table-cell.field-name {
    width: 70px;
}

button#dialog-close-button.aui-button {
    border-radius: 8px;
}

span.aui-avatar.aui-avatar-large .aui-avatar-inner img {
    height: 100% !important;
    width: auto !important;
}

#custom-user-search-results-dialog {
    width: 50%;
    min-width: 350px;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table {
    width: 90%;
    border-collapse: separate;
    border-spacing: 15px 10px;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table td, #custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table th {
    border-top: none;
	padding: 10px;
}
table tbody tr {
    box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.17);
}
table.aui:not(.aui-table-list)>tbody>tr>th, table.aui:not(.aui-table-list)>tfoot>tr>th, table.aui:not(.aui-table-list)>tbody>tr>td, table.aui:not(.aui-table-list)>tfoot>tr>td {
    border-bottom: none;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table td.display-column-0, #custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table th.display-column-0<style>
h2#PeopleHome-Noalumnitodisplay {margin: 20px;}

.largeimagewithtextbelow-listmempag .image-container {
    border: 1px solid #afafaf;
}

div#section1CardsSearch {
    height: 51px;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-listmempag {
    width: 200px;
}

.largeimagewithtextbelow-cc .image-container img {
    height: 100% !important;
}

#myCards-membercards1 .cardstyle.largeimagewithtextbelow-cc {
    padding: 0;
}

.largeimagewithtextbelow-listmempag .image-container {
    width: 200px !important;
    height: 200px !important;
}

#myCards-membercards .card-title, #myCards-membercards1 .card-title, #myCards-membercards2 .card-title, #myCards-membercards3 .card-title, #myCards-membercards4 .card-title, #myCards-membercards5 .card-title {
    padding: 14px 17px 0px 17px;
	font-size: 22px;
}

div.largeimagewithtextbelow-listmempag .card-subtitle {
    font-size: 18px;
    padding: 0px 17px 14px 17px;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-cc {
    height: unset !important;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-cc {
    width: 200px;
}

.largeimagewithtextbelow-cc .image-container img {
    height: 100% !important;
}

.largeimagewithtextbelow-cc .image-container {
    width: 200px !important;
    height: 200px !important;
}

div.largeimagewithtextbelow-cc .card-subtitle {
    font-size: 18px;
    padding: 0px 17px 14px 17px;
}

.largeimagewithtextbelow-cc .card-subtitle {
    font-family: Karla;
    font-size: 18px;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-cc {
    background: transparent;
}

div.largeimagewithtextbelow-cc .card-text-container {
    height: fit-content;
}


/* FILTER DROPDOWN */
div#filters-inner-list {
    overflow: scroll;
    height: calc(100vh - 100px);
    max-height: 500px;
}

/* SEARCH BAR */
form.custom-user-search-form input.searchInput.text {
    border-radius: 4px;
    border: solid 1.5px #767676;
    background-color: #ffffff;
    color: #767676 !important;
    font-size: 15px;
    width: 233px;
    height: 50px;
    display: flex;
    padding: 0 10px;
}

button.aui-button.search.undefined {
    font-size: 0px;
    height: 50px;
    width: 50px;
    border-radius: 8px;
}

/*-----------------------SEARCH POPUP------------------------*/
.inside-table-cell.field-name {
    width: 55px70px;
    height: 55px
}

button#dialog-close-button.aui-button {
    border-radius: 8px;
}

span.aui-avatar.aui-avatar-large, .aui-avatar.aui-avatar-large .aui-avatar-innerinner img {
    height: 55px100% !important;
    max-width: 55px;auto !important;
}

#custom-user-search-results-dialog {
    max-heightwidth: 55px50%;
    min-width: 55px350px;
}
.inside-table-cell.field-value a#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table {
    colorwidth: var(--primary-color)!important90%;
    textborder-decorationcollapse: noneseparate;
    fontborder-weightspacing: var(--font-weight-super-title);
}
.inside-table-cell.field-value a:hover15px 10px;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table td, #custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table th {
    textborder-decorationtop: underlinenone;
}

.custom-user-list-macro table	padding: 10px;
}
table tbody tr {
    borderbox-collapseshadow: separate;
2px 2px 9px  width: 99%;
    border-spacing: 0px 10px;
	margin: 0 auto0 rgba(0, 0, 0, 0.17);
}
.custom-user-list-macro .custom-user-list-table td .confluence-userlinktable.aui:not(.aui-table-list)>tbody>tr>th, table.aui:not(.aui-table-list)>tfoot>tr>th, table.aui:not(.aui-table-list)>tbody>tr>td, table.aui:not(.aui-table-list)>tfoot>tr>td {
    fontborder-weightbottom: var(--font-weight-super-title);
    color: var(--primary-color)!important;
    text-decoration: none;
}
.custom-user-list-macro .custom-user-list-table td .confluence-userlink:hover {
	text-decoration: underline;
}
.custom-user-list-macro .custom-user-list-table td .aui-avatar {
    margin-right: 20px;
}
table.aui>thead>tr>th, table.aui>tbody>tr>th, table.aui>tfoot>tr>th, table.aui>thead>tr>td, table.aui>tbody>tr>td, table.aui>tfoot>tr>td {
    padding: 15px 20px;
}
.tableFloatingHeaderOriginal{
	top: 50px !important;
}

#custom-user-search-results-table .add-my-contact-button {
	display: none;
}


.custom-card-container .image-container imgnone;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table td.display-column-0, #custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table th.display-column-0 {
    width: 55px;
    height: 55px;
}
.aui-avatar.aui-avatar-large, .aui-avatar.aui-avatar-large .aui-avatar-inner {
    height: 55px;
    max-width: 55px;
    max-height: 55px;
    width: 55px;
}
.inside-table-cell.field-value a {
    object-fitcolor: containvar(--primary-color)!important;
    widthtext-decoration: 150px !importantnone;
    height: 150px !importantfont-weight: var(--font-weight-super-title);
}

.profilecard .image-container {
    width: 200px;.inside-table-cell.field-value a:hover {
    heighttext-decoration: 200pxunderline;
}

a .custom-user-cardlist-containermacro table {
    widthborder-collapse: 200pxseparate;
}


/* New user search styling */

.aui-button.search{
	width: 50px99%;
	min-width: 50px    border-spacing: 0px 10px;
	max-widthmargin: 50px0 auto;
}

#prev-listcompanies, #next-listcompanies{
	border-radius: 4px;
	background-color: white;
	border-.custom-user-list-macro .custom-user-list-table td .confluence-userlink {
    font-weight: var(--font-weight-super-title);
    color: var(--primary-color)!important;
	color: #767676;
	height: 50px    text-decoration: none;
}

#custom.custom-user-search-results-dialog{

    width: 60%!important;

}

.inside-table-cell{
	font-size: 15px!important;
}

.inside-table-cell a{
	font-size: 15pxlist-macro .custom-user-list-table td .confluence-userlink:hover {
	text-decoration: underline;
}
.custom-user-list-macro .custom-user-list-table td .aui-avatar {
    margin-right: 20px;
}
table.aui>thead>tr>th, table.aui>tbody>tr>th, table.aui>tfoot>tr>th, table.aui>thead>tr>td, table.aui>tbody>tr>td, table.aui>tfoot>tr>td {
    padding: 15px 20px;
}
.tableFloatingHeaderOriginal{
	top: 50px !important;
}

button#dialog-close#custom-user-search-results-table .add-my-contact-button {
	display: none;
}

/* Styling for border-radius: 4px;
    background-color: white;
    color: var(--primary-color);
}

div.contentSection, div.contentSection1{
	margin: 0 100px!important;
	width: calc(100% - 200px)!important;
}

input.searchInput{
    border-radius: 4px!importantthe search and filter divs */
#filters-list{
	height: auto;
}

.filterByStrength #filters-list {
    margin-top: 52px;
}
 .filterByStrength .dropdown-content {
    width: 100%;
	display: flex;
    heightjustify-content: 50px!importantcenter;
    fontalign-sizeitems: 16px!importantcenter;
	color: #767676!important;
    text-indent: 10px
}

.filterByStrength #filters-list:after {
left: 64%;
}

.filter-btn p.filter{
	display: block !important;
}


form.aui.custom-user-search-form.searchSection {
    marginjustify-content: 0 100px!importantspace-between;
    paddingmargin-top: 50px;
    padding: 00px 15px!important25px;
}

button.aui-button.searchfilterByStrength .dropdown {
    heightborder-radius: 50px4px;
    widthborder: 100pxsolid 1.5px #767676;
    background-color: white#ffffff;
    color: #767676 !important;
    borderfont-radiussize: 4px15px;
}

#myCards-listcompanies{
	    width: 233px;
    height: 50px;
    display: flex;
    justify-content: flex-start!importantcenter;
	widthflex-direction: calc(100% + 80px)!importantrow;
}



/* ---------- REMOVE EXTRA SPACE AT TOP */


.image-container{
	padding: 0px!important;
}
div.rw_formatting_item#main-content p:first-child {
    display: none;
}

#main-content p:nth-child(3) {
    width: calc(100vw - 400px);display: none;
}

/* BANNER */

div.banner {
    margin-top: 0 100px!important-40px;
    displayheight: flex368px;
    justify-content: flex-start;
	padding-left: 15px!important;
}

.rw_search_item.rw_formatting_item.rw_search_box_theme_gray .rw_search_module_container>div .rw_search_item input.rw_search_query {background: url('https://passport-media.s3.us-west-1.amazonaws.com/Morgan+Stanley/companiesbanner.svg');
    background-position: center; /* Center the image */
    borderbackground-radiusrepeat: 4pxno-repeat;
 /* Do not border:repeat solidthe 1.5px #767676;image */
    fontbackground-familysize: var(--main-font-family)cover;
    font-size: 15px;}

div.titleSection {
    font-weightmargin: 500;
    color: #00000090px 80px;
    backgroundflex-direction: #ffffffcolumn;
}

.largeimagewithtextbelow-autocardstitleSection .imagecustom-containertitle {
    borderfont-family: solid 1px #afafaf;
}

div.largeimagewithtextbelow-autocards .card-text-container {'MS Gloria II Std';
    color: #ffffff;
    heightfont-size: 35px60px;
}

button.largeimagewithtextbelow-autocards .card-text-containertab-control-button {
    backgroundwidth: transparent155px;
}

div.largeimagewithtextbelow-autocards {
    backgroundheight: transparent54px;
    font-sizemargin: 20px 0 12px 0 0;
    fontborder-weightradius: bold8px;
    font-family: var(--secondary-font-family);
}

button.nextprevbutton {
    width: 165pxborder: solid 2px rgba(255, 255, 255, 0.75);
    heightbackground: 54pxtransparent;
    border-radius: 8pxfont-family: Karla;
    font-size: 16px;
    backgroundfont-colorweight: #187ababold;
    color: #ffffff;
	outline: none;
}

divbutton.largeimagewithtextbelowtab-autocards card-titlecontrol-button:hover {
    font-familycursor: var(--secondary-font-family)pointer;
}

/* CONTENT   font-size: 20pxSECTION */
div.contentSection {
    flex-direction: column;
	width: calc(100% - 400px);
    paddingmargin: 0 !important200px;
}

/* CARDS */
div.largeimagewithtextbelow-autocards:hovercardSectionStyle {
    backgroundflex-direction: transparentcolumn;
}

div#myCards-userlist {
    membercards, div#myCards-membercards1, div#myCards-membercards2, div#myCards-membercards3, div#myCards-membercards4, div#myCards-membercards5 {
    margin: 20px auto;
	margin-top: 30px;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 300px200px);
    grid-gap: 30px26px;
    width: 100%;
    justify-content: space-evenly !important;
    height: auto !important;
}

div.contentSection, div.contentSection1 {
	flex-direction: column;
    width: calc(100% - 400px);
    margin: 0 200px;
}

div#next-prev-container-userlist#myCards-membercards p:first-child, #myCards-membercards1 p:first-child, #myCards-membercards2 p:first-child, #myCards-membercards3 p:first-child, #myCards-membercards4 p:first-child, #myCards-membercards5 p:first-child {
    justify-contentdisplay: flex-endblock;
}

button.nextprevbutton.pagination-cardstyle:hover {
    background-color: var(--primary-color);
    opacity: 1;
}

button.nextprevbutton:focus#myCards-membercards .card-title, #myCards-membercards1 .card-title, #myCards-membercards2 .card-title, #myCards-membercards3 .card-title, #myCards-membercards4 .card-title, #myCards-membercards5 .card-title {
    backgroundfont-color: var(--primary-color)family: Karla;
    font-size: 22x;
    colorfont-weight: #ffffffbold;
}

div.rw_formatting_item.largeimagewithtextbelow-listmempag .card-subtitle {
    padding: 30px 0;
}


/* ================================================================= MOBILE STYLING ================================================================= */ 
@media only screen and (max-width: 480px) and (min-width: 320px){



p {
    margin: unset !important;
}

form.aui.custom-user-search-form {
    margin: unset !important;
    padding: unset !important;
    width: 90%;
    margin: 0 auto !important;
}

div.contentSection, div.contentSection1 {width: 90% !important;margin: 20px auto !important;margin-top FONT-WEIGHT: 200;}

}
</style>font-family: Karla;
    font-size: 18px;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-listmempag {
    background: transparent;
}

div.largeimagewithtextbelow-listmempag .card-text-container {
    height: fit-content;
}

div.cardSection1, div.cardSection2, div.cardSection3, div.cardSection4, div.cardSection5 {
	display: none;
}

ul#user-search-results {
    overflow: unset;
}

.rw_body.rw_body_white, body.rw_body_white {
    background: var(--main-background);
}

div#rw_theme_header {
    z-index: 11;
}

.textSearch div#user-search-bar-container {
    height: auto;
}

/* ================================================================= MOBILE STYLING ================================================================= */ 
@media only screen and (max-width: 480px) and (min-width: 320px){
	.titleSection .custom-title {
    margin-top: unset;
    margin-bottom: 25px;
}

.titleSection .buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

button.tab-control-button {
    margin: 0 10px 10px;
}

div.contentSection {
    width: auto;
    margin: unset;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-listmempag {
    margin: unset;
}

div.custom-card-container.cardstyle.largeimagewithtextbelow-cc {
    margin: unset;
}

.searchSection .filterByStrength {
    margin-bottom: 20px;
}

div.titleSection {
    margin: 60px 80px;
}


}
</style>

Custom section

Class	banner

Custom section

Class	titleSection

Custom title

Title	Companies

Custom ui tabs

Custom ui tab

Name	Current Cohort

Custom ui tab

Name	Alumni

Custom section

Class	contentSection

Custom section

Class	cardSection cardSectionStyle

Custom section

CustomCSS	width: auto;
Class	searchSection

Custom section

CustomCSS	width: 100%; justify-content: flex-end;
ContainerID	section0CardsSearch
Class	textSearch

Custom User Search (deprecated)

userGroups	morganstanley-companies
profileFieldSearch	cup.field-54,cup.field-60,cup.field-55,cup.field-56,cup.field-59,cup.field-62,cup.field-50,fullName
profileFieldView	cup.field-50,cup.field-60,cup.field-59
placeholderText	Search...

List members pagination

GroupName	morganstanley-companies
Type	largeimagewithtextbelow-listmempag
CardURL	/display/MSCOM/Company+Page?company=
UniqueIdentifier	membercards
PreviousButtonText	Prev
Limit	100
NextButtonText	Next

Custom section

Class	cardSection1 cardSectionStyle

Custom section

CustomCSS	width: auto;
Class	searchSection

Custom section

CustomCSS	width: 100%; justify-content: flex-end;
ContainerID	section1CardsSearch
Class	textSearch

Custom section

Class	banner

Custom section

Class	titleSection

Custom title

Title	Companies

Custom ui tabs

Custom ui tab

Name	Current Cohort

Custom ui tab

Name	MCIL Team

Custom User Search (deprecated)

userGroups	morganstanley-

...

alumnicompanies-users
profileFieldSearch	cup.field-54,cup.field-60,cup.field-55,cup.field-56,cup.field-59,cup.field-62,cup.field-50,fullName
profileFieldView	cup.field-50,cup.field-60,cup.field

...

contentSection

-59
placeholderText	Search...

Custom section

CustomCSS

display: flex; justify-content: center; flex-wrap: wrap;

Class

List members pagination

GroupName	morganstanley-

companies

UniqueIdentifier
alumnicompanies-users
Type	largeimagewithtextbelow-listmempag
CardURL	/display/MSCOM/Company+Page?company=

listcompanies

Limit
membercards1
PreviousButtonText	Prev

15

100
NextButtonText	Next

Paginate

true

HTML

<script>
$('.tab-control-button.0').click(function() {
	// Hide all except div 0
	$('div.cardSection').css('display', 'flex');
	$('div.cardSection1').css('display', 'none');
	$('div.cardSection2').css('display', 'none');
	$('div.cardSection3').css('display', 'none');
	$('div.cardSection4').css('display', 'none');
	$('div.cardSection5').css('display', 'none');
	// Hide mentor filter
	//$('.filterByStrength').css('display', 'none');
});

$('.tab-control-button.1').click(function() {
    // Hide all except div 1
	$('div.cardSection').css('display', 'none');
	$('div.cardSection1').css('display', 'flex');
	$('div.cardSection2').css('display', 'none');
	$('div.cardSection3').css('display', 'none');
	$('div.cardSection4').css('display', 'none');
	$('div.cardSection5').css('display', 'none');
	// Hide mentor filter
	//$('.filterByStrength').css('display', 'none');
});
</script>

HTML

<script>
// REPLACING ALL THE AUTOMATICALLY-GENERATED PROFILE LINKS IN SEARCH POPUP WITH PROFILE LINKS:
const replacePopupLinks = () => {
  let links = Array.from(document.getElementById("custom-user-search-results-dialog").getElementsByTagName("A"));
  links.forEach(link => {
    if (link.href.includes('/display/~')) {
      let email = link.href.split('/display/~').pop();
      link.href

HTML

<style>
/* Styling for company cards */

.image-container img{
	width: 100%;
	height: 100%;
}

.image-container{
	width: 300px;
	height: 300px;
	background-color: white;
	border: 1px solid #afafaf;
}


.custom-card-container{
	width: 300px;
	height: auto;
	border-radius: 0;
	background-color: transparent;
	box-shadow: 0;
}

.custom-card-container:hover{
	border-radius: 0px;	
	box-shadow: none;
	background-color: transparent;
	transform: none
}

.card-text-container{
	width: 100%;
	margin-top: 30px;
}
.card-title{
	width: 100%;
	text-align: left;
    padding: 0;
    font-family: var(--secondary-font-family);
    font-weight: normal;
    color: black;
}



div.largeimagewithtextbelow-autocards .card-title {
    padding: 0;
    font-family: var(--secondary-font-family);
    font-size: 20px;
}
</style>

<script>
function setCardLinks() {
	let cardLinks = Array.from($("#myCards-userlist").find("a"));
	cardLinks.forEach(a => {	
		let companyName = a.href.split('companies/')[1];
		// /display/MSCOM/Company+Page?company=
		let newLink = '/display/MSCOM/Company+Page?company=' + companyNameemail;
		a.href = newLink;
	    }});
}

window.addEventListener("DOMContentLoaded", () => {
	//setCardLinks();

	/*
	$('#myForm-tdmcompanies input').click(function()
const popupReadyPolling = () => {
  if (document.getElementById("custom-user-search-results-dialog")) {
    replacePopupLinks();
  } else {
    	setCardLinks(setTimeout(popupReadyPolling, 200);
	  });
	*/

});

AJS.toInit(function(){
	let bannerElement = document.createElement('img');
	bannerElement.classList.add('service-banner');
	bannerElement.classList.add('hide-on-mobile');
	bannerElement.src = "https://passport-media.s3-us-west-1.amazonaws.com/Morgan+Stanley/Company+Images/screen.jpg";
	document.getElementById('main-content').prepend(bannerElement);
});
</script>

<style>
.service-banner{
	height: 368px;
}

</style>
}

// Set the polling function to start when page is done loading: 
window.addEventListener('DOMContentLoaded', () => {
	var searchBars = document.getElementsByClassName("custom-user-search-form");
	for(var i = 0; i < searchBars.length; i++) {
    	searchBars[i].addEventListener("submit", popupReadyPolling)
	}
});

</script>

Content

Space Tools

Versions Compared

Old Version 1

New Version Current

Key