如何用模板讓樣式只套用在自己的留言上

讓不同樣式只套用在自己留言上的 CSS 範例

※務必先複製模板、建立另一個名稱的資料夾後再進行自訂

在 OBS 中顯示模板,並在自訂 CSS 中加入如下套用的 CSS

[data-user='你的名字'] {  
  background: #000;  
}

範例:在 Line 模板中讓特定名稱使用者的對話框顯示在另一側

在 OBS 的自訂 CSS 中加入以下 CSS

※「測試使用者」的部分請改成對應的使用者名稱

[data-user="測試使用者"] {  
  --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="測試使用者"] .comment-block {  
  text-align: right;  
}  
[data-user="測試使用者"] .comment-text {  
  text-align: left;  
}

※ line-right 的情況

[data-user="測試使用者"] {  
  --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="測試使用者"] .comment-block {  
  text-align: left;  
}  
[data-user="測試使用者"] .comment-text {  
  text-align: right;  
}