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%<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;
    widthfont-size: auto !important;
}

#custom-user-search-results-dialog {15px;
    width: 50%233px;
    min-widthheight: 350px50px;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table    display: flex;
    padding: 0 10px;
}

button.aui-button.search.undefined {
    widthfont-size: 90%0px;
    border-collapseheight: separate50px;
    border-spacingwidth: 15px 10px50px;
}
#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     border-radius: 8px;
}

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

button#dialog-close-button.aui-button {
    boxborder-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.17)radius: 8px;
}

tablespan.aui:not(-avatar.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 {avatar-large .aui-avatar-inner img {
    height: 100% !important;
    width: auto !important;
}

#custom-user-search-results-dialog {
    width: 50%;
    bordermin-bottomwidth: none350px;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table td.display-column-0,  {
    width: 90%;
    border-collapse: separate;
    border-spacing: 15px 10px;
}
#custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table th.display-column-0td, #custom-user-search-results-dialog .aui-dialog2-content table#custom-user-search-results-table th {
    widthborder-top: 55pxnone;
    height	padding: 55px10px;
}
.aui-avatar.aui-avatar-large, .aui-avatar.aui-avatar-large .aui-avatar-innertable tbody tr {
    heightbox-shadow: 55px;
2px 2px 9px  max-width: 55px;
    max-height: 55px;
    width: 55px0 rgba(0, 0, 0, 0.17);
}
.insidetable.aui:not(.aui-table-cell.field-value a {
    color: var(--primary-color)!important;
    text-decoration: none;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)none;
}
.inside-table-cell.field-value a:hover {
    text-decoration: underline;
}

.custom-user-list-macro table {
    border-collapse: separate;#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: 99%55px;
    border-spacingheight: 0px 10px55px;
	margin: 0 auto;
}
.customaui-useravatar.aui-listavatar-macrolarge, .customaui-useravatar.aui-listavatar-tablelarge td .confluenceaui-avatar-userlinkinner {
    font-weightheight: var(--font-weight-super-title);55px;
    max-width: 55px;
    max-height: 55px;
    width: 55px;
}
.inside-table-cell.field-value a {
    color: var(--primary-color)!important;
    text-decoration: none;
}
.custom-user-list-macro .custom-user-list-table td .confluence-userlink    font-weight: var(--font-weight-super-title);
}
.inside-table-cell.field-value a:hover {
	    text-decoration: underline;
}

.custom-user-list-macro .custom-user-list-table td .aui-avatar {
    marginborder-rightcollapse: 20pxseparate;
}
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 {    width: 99%;
    paddingborder-spacing: 15px0px 20px;
}
.tableFloatingHeaderOriginal{10px;
	topmargin: 50px0 !importantauto;
}

#custom.custom-user-search-results-list-macro .custom-user-list-table td .add-my-contact-buttonconfluence-userlink {
	display: none;
}


.custom-card-container .image-container img {
    object-fit: contain    font-weight: var(--font-weight-super-title);
    widthcolor: 150px var(--primary-color)!important;
    heighttext-decoration: 150px !importantnone;
}

.profilecardcustom-user-list-macro .image-container {
    width: 200px;
    height: 200px;
}

a .custom-card-containercustom-user-list-table td .confluence-userlink:hover {
	text-decoration: underline;
}
.custom-user-list-macro .custom-user-list-table td .aui-avatar {
    widthmargin-right: 200px20px;
}


/* New user search styling */

.aui-button.search{
	width: 50px;
	min-width: 50px;
	max-width: 50px;
}

#prev-listcompanies, #next-listcompanies{
	border-radius: 4px;
	background-color: white;
	border-color: var(--primary-color);
	color: #767676;
	height: 50px;
}

#custom-user-search-results-dialog{

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;
}

/* Styling for the search and filter divs */
#filters-list{
	height: auto;
}

.filterByStrength #filters-list {
    margin-top: 52px;
}
 .filterByStrength .dropdown-content {
    width: 60%!important100%;

}

.inside-table-cell{
	font-size: 15px!important	display: flex;
    justify-content: center;
    align-items: center;
}

.inside-table-cell a{
	font-size: 15px!importantfilterByStrength #filters-list:after {
left: 64%;
}

button#dialog-close-button {
    border-radius: 4px.filter-btn p.filter{
	display: block !important;
}


.searchSection {
    justify-content: space-between;
    backgroundmargin-colortop: white50px;
    colorpadding: var(--primary-color) 0px 25px;
}

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

input.searchInput{radius: 4px;
    border: solid 1.5px #767676;
    borderbackground-radiuscolor: 4px!important#ffffff;
    heightcolor: #767676 50px!important;
    font-size: 16px!important15px;
	color    width: #767676!important233px;
    text-indentheight: 10px!important;
}
form.aui.custom-user-search-form{50px;
    display: flex;
    marginjustify-content: 0 100px!important;
    padding: 0 15px!importantcenter;
	flex-direction: row;
}

button.aui-button.search{
    height: 50px;
    width: 100px;

/* REMOVE EXTRA SPACE AT TOP */
#main-content p:first-child {
    background-colordisplay: whitenone;
}

    color: #767676;#main-content p:nth-child(3) {
    border-radiusdisplay: 4pxnone;
}

#myCards-listcompanies{
	justify-content: flex-start!important;
	width: calc(100% + 80px)!important;
}

/* ---------- */


.image-container{
	padding: 0px!important;
}
div.rw_formatting_item {
    width: calc(100vw - 400px/* BANNER */

div.banner {
    margin-top: -40px;
    height: 368px;
    background: url('https://passport-media.s3.us-west-1.amazonaws.com/Morgan+Stanley/companiesbanner.svg');
    marginbackground-position: 0 100px!importantcenter;
 /* Center the display: flex;image */
    justifybackground-contentrepeat: flexno-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 {repeat; /* Do not repeat the image */
    borderbackground-radiussize: 4pxcover;
  }

div.titleSection {
   border margin: solid 1.5px #76767690px 80px;
    fontflex-familydirection: var(--main-font-family);
    font-size: 15px;column;
}

.titleSection .custom-title {
    font-weightfamily: 500'MS Gloria II Std';
    color: #000000#ffffff;
    backgroundfont-size: #ffffff60px;
}

button.largeimagewithtextbelow-autocards .image-containertab-control-button {
    borderwidth: solid 1px #afafaf;
}

div.largeimagewithtextbelow-autocards .card-text-container {155px;
    height: 35px54px;
}

.largeimagewithtextbelow-autocards .card-text-container {
    background: transparent;
}

div.largeimagewithtextbelow-autocards {    margin: 0 12px 0 0;
    border-radius: 8px;
    border: solid 2px rgba(255, 255, 255, 0.75);
    background: transparent;
    font-sizefamily: 20pxKarla;
    font-weightsize: bold16px;
    font-familyweight: var(--secondary-font-family);
}

button.nextprevbuttonbold;
    color: #ffffff;
	outline: none;
}

button.tab-control-button:hover {
    widthcursor: 165pxpointer;
}

/* CONTENT SECTION  height: 54px;*/
div.contentSection {
    borderflex-radiusdirection: 8pxcolumn;
	width: calc(100%   background-color: #187aba400px);
    colormargin: #ffffff0 200px;
}

/* CARDS */
div.largeimagewithtextbelow-autocards card-title cardSectionStyle {
    fontflex-family: var(--secondary-font-family);direction: column;
}

div#myCards-membercards, div#myCards-membercards1, div#myCards-membercards2, div#myCards-membercards3, div#myCards-membercards4, div#myCards-membercards5 {
    font-sizemargin: 20px;
    padding: 0 !important;
}

div.largeimagewithtextbelow-autocards:hover {
    background: transparent;
}

div#myCards-userlist {
    margin: 20px auto 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);#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 {
    margindisplay: 0 200pxblock;
}

div#next-prev-container-userlist {
    justify-content: flex-end;
}

button.nextprevbutton.pagination-cardstyle:hover {#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;
    opacityfont-weight: 1bold;
}

button.nextprevbutton:focus.largeimagewithtextbelow-listmempag .card-subtitle {
    backgroundfont-colorfamily: var(--primary-color)Karla;
    colorfont-size: #ffffff18px;
}

div.rw_formatting_itemcustom-card-container.cardstyle.largeimagewithtextbelow-listmempag {
    paddingbackground: 30px 0transparent;
}


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



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

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

ul#user-search-results {
    marginoverflow: 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>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 User Search (deprecated)

userGroups	morganstanley-alumnicompanies-

...

placeholderText
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-59

...

contentSection

	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<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 120

New Version 121

Key