Custom CSS Guide

This is the custom CSS guide, here we will provide you with steps required to make the most popular CSS change, you can read the complete guide from start to finish or use the navigation quick links to quickly view the section that interests:

Customise chat header
Customise chat message box
Hide chat room users profile picture
Hiding the sidebar in the chatroom
Change the font of the chat message
Hide "Already have an account?" on the chatroom popup
Remove markdown hints from the bottom of the textbox

Where to add custom CSS?

To make CSS changes in the chatroom first, log in to Dead Simple Chat and there on the dashboard page scroll down to see a list of chat rooms

from there choose a chatroom for which you wan to change the CSS and click on its corresponding chatroom settings button

and then on the chatroom settings page / Update Chat Room page add your custom CSS and then click on the Update Chat Room button to save changes.

Customize the chat header:

This document provides an overview of how to use the custom CSS feature in Dead Simple Chat.

If you want to customize the chat header, go Edit Chat Room page from the dashboard and use the class .chat-header to customize the chatroom header

For example, if we want to change the background colour of the chatroom header to read, we will use the following custom CSS:

.chat-header {
  background-color: red;
}

We will press the "Update Chat Room" button this will update the background of our chat header to red.

If we want to remove the border, then we will set the border-bottom to none;

.chat-header {
    background-color: red;
    border-bottom: none !important;
}

And as you can see in the screenshot below, the border is no longer present.

In the same manner, the height can be adjusted by setting the height CSS property and if you want to hide the header, it can be hidden by setting visibility: hidden; property.

Customize the chat message box

The chat message box can be customized by overriding the properties of the .textarea-div class, and the textarea inside .textarea-div container with the id #messageTextAre

Suppose if we want to change the border thickness and color of the chat message text box then we will use the following CSS code.

.textarea-div {
 	border: 1px solid blue !important;
}

The above screenshot has our custom css code as well as the css code that we have added in the previous step to customize the header.

Now suppose if we want to change the height font-family, font-size of the textbox, then we will update the text area inside of our textbox container.

#messageTextArea {
    font-family: monospace !important;
    font-size: 11px !important;
    height: 20px !important;
    padding-top: 5px !important
}

Hide Chat Room Users Profile Picture

If you wish to hide the profile pic of the chatroom users,

you can use the following custom CSS.

.profilePicContainer {
    display: none;
}

Just paste this code in the custom css section on the Update chatroom/ chatroom settings page and click on the update chat room button:

End result:

as you can see the users' profile picture has been hidden

If you want to hide the sidebar:

then use the following snippet

.sidebar {
    visibility: hidden;
}

Paste this code snippet in the custom CSS section on the chatroom settings/update chatroom page and click on the "update chatroom button" button to save changes:

End Result:

As you can see the Sidebar is no longer present in the chatroom

Change the font of the chat message

To change the font of the chat message, you use the following custom CSS.

.chat-container {
  font-family: monospace !important;
}

Hide Already have an account?

If you want to hide the registered account from the login screen:

We have written a separate article for this: Here is the link:

Remove Markdown hints:

To remove the markdown suggestions, use the following CSS code:

.hints {
  display: none !important;
}