Signed up just to get answers (RocketChat Help)

[huko600rr]

Hello everyone - I was hoping that someone here uses the RocketChat platform and has modified some of the layout.

I posted on rocket chat forum and community but nobody seen to have answer or care.
I’m looking for any possible way to change the Role colors, so for eg: I want the users with the “Moderator” role to be shown green in the chatroom, Admins as red, etc.

If anyone can shed some light that would be amazing.
Thank you

P.S - I seen someone was able to have their text changed (Their admin color is purple - so they were able to change it, but the post is very old)

How to add font text color into msg input box?

i hope to get answer for my Question ! im work in meteor project ( Rocket Chat ) and i need to add font color for user msgs in input box to alow the users to select font color from color box and delivery to others with same color for example this my textarea box [image] My textarea code <form class="message-form secondary-font-color" method="post" action="/"> {{> messagePopupConfig getPopupConfig}} {{#if allowedToSend}} <div class="message-input border-component-color"> <div …

[PaulOB]

Hi,

I doubt anyone here has used RocketChat as I haven’t seen any questions or answers about it.

I did a quick google and it seems you can add your own custom css in your admin panel and over-ride the theme styles. Assuming you are only changing a few things and not creating a whole custom theme.

I’m also assuming the video below applies to your version of RocketChat and sin’t an old or deprecated method.

Rocket.Chat #13 How to change color theme of RocketChat with custom css

From the video it looks a pretty simple job of changing items assuming you are familiar with css and the devtools inspector.

Hope it’s of some use anyway

[huko600rr]

Thanks i been through all of that video series - Unfortunately it does not show how you can edit the Group colors, I do appreciate your response

[PaulOB]

@huko600rr

Unfortunately it does not show how you can edit the Group colors,

You would need to use the web inspector and highlight the css for the group colours and then use the same css in your custom css but with your new style colours. The custom CSS would then take over the styling.

I assume your system is not live online otherwise I could look at the css needed to change the colours. If you are having trouble then you could send a screenshot of the devtools panel when you highlight the items you want to change and it may give me a clue.

At the end of the day the css will be what controls your layout and assuming you know how to add the custom css it should be possible to over-ride the defaults unless there is some dynamic scripting going on.

Sorry I can’t give a specific answer but I don’t use that platform at all and my help will be limited.

[huko600rr]

Thanks @PaulOB - I have spent some and indeed was able to change it!
It also changes the other things but for those who want to change in the future:
This is what i needed to change:

}

body.dark-mode .message .reactions>li,
body.dark-mode .message .title .role-tag,
body.dark-mode .message.new-day::before {
background-color: #DC143C;
}

Ideally I wanted to Separate the “title” and the “role-tag” along with the “message.new-day::before”
They all seem to be linked

But so far no luck. Still happy that i can change those 3

It looks like this now:
Pic

Thanks again PaulOB

[PaulOB]

@huko600rr

I have spent some and indeed was able to change it!

Good glad you were able to make some progress and thanks for posting your findings for others

@huko600rr

Ideally I wanted to Separate the “title” and the “role-tag” along with the “message.new-day::before”
They all seem to be linked

I assume you have tried separating them like this:

body.dark-mode .message .reactions>li{
background:red;
}
body.dark-mode .message .title .role-tag{
background:blue;
}
body.dark-mode .message.new-day::before {
background-color: #DC143C;
}

You should be able to style each individually if you want.

[huko600rr]

Paul you are awesome! That worked and i can now separate the colors