Alter the Appearance (HBS) alter-the-appearance-hbs

Now that the components for the custom comment system in the application directory ( are in place, with a resourceSuperType referencing the default comment system, and the custom Model/View registered, you can edit the implementation.

For a simple demonstration, a visual feature, the avatar shown of the signed-in user who posts a comment, is removed.

To use the extension, the instance of the comment system in a website to be affected ( must set its resourceType to be the custom comment system.

Modify the HBS Scripts modify-the-hbs-scripts

Using CRXDE Lite:

  • Open /apps/custom/components/comments/comment/comment.hbs

    • Comment out the tag which includes the avatar for a comment post (~ line 21):

      code language-none
         <<img class="scf-comment-avatar {{#if topLevel}}withTopLevel{{/if}}" src="{{author.avatarUrl}}"></img>
  • Open /apps/custom/components/comments/comments.hbs

    • Comment out the tag which includes the avatar for the next comment entry (~ line 44):

      code language-none
         <img class="scf-composer-avatar" src="{{loggedInUser.avatarUrl}}"></img>
  • Select Save All

Replicate Custom App replicate-custom-app

After the application has been modified, it is necessary to re-replicate the custom component.

One way to do so is:

  • From the main menu

    • Select Tools > Operations > Replication.
    • Select Activate Tree.
    • Set Start Path to /apps/custom.
    • Deselect Only Modified.
    • Select Activate button.

View Modified Comment on Published Sample Page view-modified-comment-on-published-sample-page

Continuing the experience on the publish instance, still signed in as the same user, it is now possible to refresh the page in the publish environment to view the modification to remove the avatar:


Sample Comment Extension Package sample-comment-extension-package

Attached is a package of the custom comments application created in this tutorial.

Get File