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!

  • 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.