CSS to change the comment section

Ask for Help
1

Hi.

Can I change the “Add comments” wordings to “Write a message” through CSS?

2

@Robert_Petitto, I saw your reply on my post that you use CSS on comment section for more chat like experience. Could you kindly share that CSS and show how it looks? I am trying to find your template on the community but I am unable to. Thanks.

3

You can get away with something like this, but I don’t recommend it since it might not work on some specific devices. We are overwriting the “click box” here so when the user clicks so far left the chat box won’t open up.

image
image1178×833 49 KB 

<pre><span><style>

[data-test="app-comments-preview"] button :nth-child(2)  {
display: none;
}

[data-test="app-comments-preview"] h4::after {
content: "Write a message....";
margin-left: -50px;
top: 35px;
position: relative;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.0625rem;
font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
color: rgb(2, 186, 173);
}

Normally I use a brand new table, create my own chat flow instead of using the comments component, and use CSS to stick a text entry to the bottom of the screen.

image
image1183×841 93.1 KB

4 Likes
4

I get what you have done. The only problem in your solution is, it will eat up all my row limit until I manually clear the chats between users or maybe use an appscript to auto delete.

5

Yeah, but users should be able to edit and delete their own comments from the app, that’s my priority over the row limit.

6

Hahaha or we can make something like Fiverr chat box where users can not delete/edit their message