How to apply styles only to your own comments with templates

An example of CSS that applies a different style only to your own comments

※ Always duplicate the template and create a separately named folder before customizing it

Display the template in OBS, and add CSS like the following to the custom CSS

[data-user='Your Name'] {  
  background: #000;  
}

Example: Making a specific user's speech bubble appear on the opposite side in the Line template

Add the following CSS to the custom CSS in OBS

※ Change the "TestUser" part to match the username

[data-user="TestUser"] {  
  --lcv-side-left-visible: none;  
  --lcv-side-right-visible: block;  
  --lcv-side: var(--lcv-side-right);  
  --lcv-icon-side: var(--lcv-icon-side-right);  
  align-self: flex-end;  
}  
[data-user="TestUser"] .comment-block {  
  text-align: right;  
}  
[data-user="TestUser"] .comment-text {  
  text-align: left;  
}

※ For line-right

[data-user="TestUser"] {  
  --lcv-side-left-visible: block;  
  --lcv-side-right-visible: none;  
  --lcv-side: var(--lcv-side-left);  
  --lcv-icon-side: var(--lcv-icon-side-left);  
  align-self: flex-start;  
}  
[data-user="TestUser"] .comment-block {  
  text-align: left;  
}  
[data-user="TestUser"] .comment-text {  
  text-align: right;  
}