The Layout feature lets you personalize the appearance of your Rocket.Chat workspace. This includes defining content, applying custom CSS, and incorporating JavaScript, providing you with the means to tailor your workspace's visual aspects.
Go to Administration > Workspace > Settings > Layout to access this setting.
Custom CSS
In the Custom CSS section of the Layout settings, you can define custom CSS to modify your workspace's appearance. The Customizing Colors guide explains the available classes and colors for easy customization in Rocket.Chat.
For example, the following CSS code snippet changes the color of your Rocket.Chat rooms and sidebar:
.rcx-sidebar--main {
--rcx-color-surface-sidebar: #122B40 !important; /* The sidebar color. */
}
.rcx-css-7tefqp {
background-color: #122B40; /* The background color for the room menu. */
}
.messages-container-main {
background-color: #163650; /* The background color for the message container. */
}
.rcx-message-divider__wrapper, .rcx-message-divider__wrapper--unread {
background-color: #163650; /* The background color for the area around the date and divider. */
}The following screenshot shows how a room looks with the CSS customization:
Custom scripts
The Custom Scripts section allows you to execute JavaScript code in response to specific events in the workspace. The following settings are available:
Field | Description |
|---|---|
Custom Script for Logout Flow | Define a script that will be executed during any logout process for all users. |
Custom Script for Logged Out Users | Define a custom script that will always run for any user who is not logged in, for example, when they access the login page. |
Custom Script for Logged In Users | Define a custom script that will always run for any logged-in user. For example, they will be logged in whenever they enter the chat. |
For example, setting a custom script for logged-in users, as demonstrated in the example below, will trigger a Welcome alert when a user logs in and is on the /home page.
if(window.location.pathname == '/home'){
alert("Welcome")
}The following screenshot shows the result of the script:
Home page content
This section allows you to change the content of your workspace homepage.
Field | Description |
|---|---|
Home Title | The title on the header of the first screen that your users will see when they log in. |
Show home page button on sidebar header | When enabled, the Home button is displayed on your workspace’s navigation menu.
|
Content block | This is the content that is displayed on the home page screen. |
Show custom content to homepage | Enable this option to display the custom content on the home page that you provided in the Content block field. |
Show custom content only | Enable this option to hide all other content blocks on the home page. Show custom content only can be enabled only when Show custom content to homepage is enabled. This setting is available in the paid plans (Pro and Enterprise). |
Terms of Service | Set the terms of service for your workspace. You can also redirect to |
Login Terms | Specify the terms users are to accept before they log in. |
Privacy Policy | Set your server's privacy policy. It can also be accessed via |
Legal Notice | By default, this screen is accessed through the links on the login page. Here, you can set the legal notice of your server. It can also be accessed via |
Side navigation footer Side navigation footer - Dark Theme | These two settings are used to provide the logo or text on the bottom left of the sidebar, for light and dark modes, respectively. The footer size is 260 x 70px. For better consistency, we recommend using the images set on your Assets.
|
.png)
Login
Customize your workspace’s login page.
Field | Description |
|---|---|
Hide Logo | Enable this to hide the Rocket.Chat logo on the login page. This setting is available on the paid plans (Pro and Enterprise). |
Hide Title | Enable this option to hide the title on the login page. This setting is available on the paid plans (Pro and Enterprise). |
Hide "Powered by" | Enabling this hides the Powered by watermark on the login page. This setting is available on the paid plans (Pro and Enterprise). |
Login Template | Select the direction of the login page: This setting is available on the paid plans (Pro and Enterprise). |
Show Default Login Form | Enable this option to display the default login form. If you disable this option, the login fields will not be displayed. You can use this option in case you want to use an identity provider. |
User interface
Define the user interface behavior for your workspace.
Field | Description |
|---|---|
Display Roles | Enable this option to display user roles beside usernames in messages. |
Group Channels By Type | Enabling this option groups the channels by category (Channel, Private Room, Direct Message, or Discussion) on the left sidebar. |
Use Full Name Initials to Generate Default Avatar | This setting changes default avatars to use the user's full name instead of the username. For example, if the username is |
Use Real Name | Enabling this displays full names in messages instead of usernames. |
Click to Create Direct Message | Enable this setting so that workspace users can create a direct message with another user when they click on their profile. This skips viewing the user's profile. |
Number of users' autocomplete suggestions | Set the number of autocomplete suggestions shown when you begin tagging any user with the |
Unread Counter Style | Select how unread message counters are displayed. The options are:
|
Allow Special Characters in Room Names | When enabled, it allows using special characters like |
Show top navbar in embedded layout | When enabled, the top navigation bar is displayed in an embedded layout. |
Colors
.png)
This section has color settings and definitions you can edit or customize to give your UI elements a different look.
Colors can be set using existing Expressions or Color by specifying them from the color picker provided.
Old Colors
A list of pre-defined color variables for old versions of Rocket.Chat (<6.0) can be found here.