This blog explains a quick and dirty way to customize AboutMe webpart in MySite.
Method 1:
I had a requirement to hide “SHOW MORE/SHOW LESS” buttons in the “ProfileInfo” Webpart pages for all users. This OOB webpart doesnt have any provisions to disable this. Since these pages are loaded from person.aspx of my site root site collection, we can disable these buttons by adding script editor webpart. The steps are 1) Open Person.aspx using SPD 2013 in advanced mode 2)Find the ID of “ProfileInfowebart” in my case its “g_33faa336_e58c_4bbc_a81a_1704ccaff199” 3) Add a script link webpart with the following code (Replace the webpart ID with your’s)
_spBodyOnLoadFunctionNames.push("removeShowless");
function removeShowless()
{SP.SOD.executeFunc('portal.js',ShowHideProfileInfoDetails,
function() {
ShowHideProfileInfoDetails('ctl00_ctl41_g_33faa336_e58c_4bbc_a81a_1704ccaff199_ProfileViewer', 'ctl00_ctl41_g_33faa336_e58c_4bbc_a81a_1704ccaff199_ProfileViewer_showHideLink&', '','', ctl00_ctl41_g_33faa336_e58c_4bbc_a81a_1704ccaff199_ProfileViewer_hidden');});
}
4) Save and publish the page.
How this works?
SP.SOD.executeFunc()
Microsoft uses SP.SOD.executeFunc(key, functionName, fn) (Script On Demand) extensively to load on demand scripts. Refer this fanstastic blog post by Christain Glessner for more details.
“key” parameter must match to the ScriptLink’s Name property (Use small letters for key, because an issue with string normalizing in RegisterSodDep).
“functionName” awaits a type name of an ASP.NET AJAX JavaScript class. ExecuteFunc first checks if the AJAX class has already been registered, when not it checks additionally if a SOD with this key has already been loaded and finally it will load the SOD. Load means adding dynamically the corresponding script tag to the HTML head. The check for the type helps to ensure that the script has not been already loaded via an usual script tag before. When you don’t want to work with AJAX JavaScript classes you can use “null” value for the functionName.
fn defines a callback that will be executed when the SOD has signaled finished loading.
In the above code, the function ShowHideProfileInfoDetails() is modified to hide the buttons. (Use the IE developer tools to understand the original implementation in the page and just reverse it)
Method 2:
Then of course there is always CSS.
You could do this:
/*you will have to locate your ID number and replace in the line below*/
#ctl00_ctl32_g_dc992ff0_0776_4fd4_ad6f_cda68ca93c89_ProfileViewer_showHideLink
{
display:none;
}
.ms-profile-hiddenDetails
{
display:block !important;
overflow:visible !important;
}
Thanks Stone for suggesting this.
SPBreed's Blog 
Then of course there is always CSS.
You could do this:
/*you will have to locate your ID number and replace in the line below*/
#ctl00_ctl32_g_dc992ff0_0776_4fd4_ad6f_cda68ca93c89_ProfileViewer_showHideLink
{
display:none;
}
.ms-profile-hiddenDetails
{
display:block !important;
overflow:visible !important;
}
a[id$=”_ProfileViewer_showHideLink”]{ /* element that ends with string*/
display:none;
}
.ms-profile-hiddenDetails
{
display:block !important;
overflow:visible !important;
}
Thanks Steinn for suggesting this. Updated the blog post.
Noob comment here, but I am trying to just fix this on a sharepoint mysite profile view and how should I apply the CSS? Is there a web part I should place on the page? If so which type?
Thanks!
Hi Joe,
For all the mysites, person.aspx is rendered from host mysite site collection. That can be administered from the mysite root. So you need to add edit this person.aspx page from the mysite host site collection , add a script link webpart with the above code.
-Karthik
The following works and no need to locate ID number
[id*=”showHideLink”] {
display:none;
}
.ms-profile-hiddenDetails {
display:block!important;
overflow:visible!important;
}
The suggested CSS above lets the content of the profile info web part overflow onto the web parts that are placed under it (the In Common webpart for instance). This is quite undesirable. A better approach would be to let the content box grow to the size of the hidden contents.
This is my solution for the hidden detail box:
.ms-profile-hiddenDetails {
display:block;
overflow:hidden;
height:100%;
}
I agree. Overflow looks bad if you’ve got a WP under ProfileInfo. I’d recomend setting heith: auto!important in the css
Tnx Bruno, exactly what I was looking for!
CSS is pretty easy but don’t forget the “height:auto;” for the hiddendetails CSS, otherwise the organizational chart and stuff below the info area will display on top of the previously hidden info. Here’s what I used:
.ms-profile-toggleDetails
{
display:none;
}
.ms-profile-hiddenDetails
{
overflow:visible !important;
height:auto;
}
Thanks, it works fine!
Could you please be more specific what to add and where to the person.aspx and where to put the Javascript file or can it be embedded in the page?
And where is the CSS located and can it be edited with SPD2013 or must it be done from WebFrontEnd server files directly?
thx.