Forum Discussion

bishalgoswami's avatar
bishalgoswami
Guide
3 years ago

Customizing the My Settings page

Hi,

I am trying to figure out how to customize the elements that are part of the My Settings page such as My Bookmarks and My Subscriptions.

However there is no pages in the Studio Page-editor for those.  

All I see is a component called tabs.

Please let me know what I am missing.

UI & Design
  • jeffshurtliff's avatar
    jeffshurtliff
    3 years ago

    Hi bishalgoswami,

    The quilt for the My Settings page (as mentioned by CarolineS) is called MyProfilePage.  However, the primary functionality of the settings page is handled in an out-of-the-box component called "tabs" which is not editable in Studio.

    In my environment where I wanted to make changes to the settings page, I created my own component (which I called "custom.user.settings.tabs") where I first rendered the out-of-the-box component while wrapping it in my own custom div so I could make CSS-based changes, as shown below.

    <#-- Render the out-of-the-box component -->
<div class="rsa-c-user-settings-tabs">
  <@component id="tabs"/>
</div>

    I then used the <@liaAddScript> functionality to add jQuery to make other changes I needed, such as hiding the ability to change their email address or first/last name.  See the screenshots below.

    Hope this helps!

6 Replies

Sort By
  • CarolineS's avatar
    CarolineS
    Boss
    3 years ago

    Hi! 

    I think the page you want to edit is the "View Profile Page". The "My Profile Page", confusingly enough, is just the user settings page, not actually the profile page.

    Hope that's helpful!

  • bishalgoswami's avatar
    bishalgoswami
    Guide
    3 years ago

    Hi CarolineS 

     

    I should have been clear.

    I meant the My Settings page.  In studio for some reason they can it myprofilepage.

  • jeffshurtliff's avatar
    jeffshurtliff
    Boss
    3 years ago

    Hi bishalgoswami,

    The quilt for the My Settings page (as mentioned by CarolineS) is called MyProfilePage.  However, the primary functionality of the settings page is handled in an out-of-the-box component called "tabs" which is not editable in Studio.

    In my environment where I wanted to make changes to the settings page, I created my own component (which I called "custom.user.settings.tabs") where I first rendered the out-of-the-box component while wrapping it in my own custom div so I could make CSS-based changes, as shown below.

    <#-- Render the out-of-the-box component -->
<div class="rsa-c-user-settings-tabs">
  <@component id="tabs"/>
</div>

    I then used the <@liaAddScript> functionality to add jQuery to make other changes I needed, such as hiding the ability to change their email address or first/last name.  See the screenshots below.

    Hope this helps!

  • bishalgoswami's avatar
    bishalgoswami
    Guide
    3 years ago

    Hi jeffshurtliff ,

     

    Thank you very much for the guidance.

    Creating a custom component, calling the Khoros component in it, and using custom JS/JQuery to achieve the results was next on my list and one I was hoping to avoid. We build a lot of custom components and it becomes difficult to maintain in the long run.

    I truly appreciate you taking the time to share your custom code.

  • tmarshall's avatar
    tmarshall
    Advisor
    3 months ago

    Had a requirement to not allow spammers to enter their biography or web URL as there is not an effective way to quarantine users but only their posts. The guidance and screenshots helped. Appreciate it. Cheers.

  • tmarshall's avatar
    tmarshall
    Advisor
    3 months ago
    I thought this would be helpful for other that on the users.widget.my-public-statistics component that if you want to use JQuery to hide other spammy fields like name, location, and URL that the trick is to double escape the CSS values. 
     
    <#-- Render the out-of-the-box component -->
    <div class="rsa-c-user-my-public-statistics">
      <@component id="users.widget.my-public-statistics"/>
    </div>
     
    <@liaAddScript>
    (function ($) {
    <#-- Hide the ability to display public info for spam purposes -->
    $(".lia-property-for-id-profile\\.name").remove();
    $(".lia-property-for-id-profile\\.location").remove();
    $(".lia-property-for-id-profile\\.url-homepage").remove();
    })(LITHIUM.jQuery);
    </@liaAddScript>