Customize Workspace Layout

Prev Next

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 Your-Server-URL/terms-of-service. This is shown by default as links on the workspace’s login page.

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 Your-Server-URL/privacy-policy. This is shown by default as links on the workspace’s login page.

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 Your-Server-URL/legal-notice.

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.

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: Horizontal or Vertical.

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 blue.ducks and the name is Richards Nate, the default avatar displays BD by default. With this setting enabled, it displays RN instead.

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 @ symbol.

Unread Counter Style

Select how unread message counters are displayed. The options are:

  • Different Style for user mentions: The notification counter is different for normal messages and user mentions.

  • Same style for mentions: The notification counter for regular messages and user mentions is the same.

Allow Special Characters in Room Names

When enabled, it allows using special characters like ! @ # $ % ^ & * in room names. This setting does not affect the room display name.

Show top navbar in embedded layout

When enabled, the top navigation bar is displayed in an embedded layout.

Colors

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.