Merge pull request talkjs#452 from talkjs/fix/add-clickable-avi-theme…

…-to-readme Include theme changes for clickable avi in README
shsaqib99 · Nov 14, 2023 · 7c3f3ce · 7c3f3ce
2 parents c036ad8 + a535d12
commit 7c3f3ce
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/howtos/how-to-make-a-clickable-profile-link/README.md b/howtos/how-to-make-a-clickable-profile-link/README.md
@@ -23,5 +23,18 @@ To run this tutorial, you will need:
    2. Select to **Edit** your current theme.
    3. In the list of **Built-in Components**, select **ChatHeader**.
    4. Find the code for displaying the user's name in the header (something like `<span>{{user.name}}</span>`) and replace it with the following:
-      `<span><ActionButton action="goToProfile" data-userId="{{user.id}}">{{user.name}}</ActionButton></span>`
-   5. If you are in Live mode, select **Copy to live**.
+      ```
+      <span><ActionButton action="goToProfile" data-userId="{{user.id}}">{{user.name}}</ActionButton></span>
+      ```
+   5. Find the code for displaying the conversation image in the header (something like `<ConversationImage conversation="{{ conversation }}" />`) and replace it with the following:
+      ```
+      <ActionButton t:if="{{ conversation.otherParticipants.length == 1 }}" class="action-button-image" action="goToProfile" data-userId="{{ conversation.otherParticipants[0].id }}"><ConversationImage conversation="{{ conversation }}" /></ActionButton>
+      <ConversationImage t:else conversation="{{ conversation }}" />
+      ```
+   6. In the `<style>` section at the bottom of the template file, add the following CSS code:
+      ```css
+      .header .image button[data-action] {
+        border-radius: 50%;
+      }
+      ```
+   7. If you are in Live mode, select **Copy to live**.