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

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.