Custom CSS - CometChat Docs

You’re reading the legacy documentation for Calling SDK v4 (JavaScript).Follow this page only if your app is on v4.x. If you’re using v5, see the Calling SDK v5 documentation instead.Ready to move off v4? Follow the v4 → v5 migration guide.

Passing custom CSS allows you to personalize and enhance the user interface of the call screen.

Common CSS Classes

There are a few common classes used for different modes in the call screen

cc-main-container - The outermost component of the calling component is represented by a white border in the screenshots above, indicating that it acts as a container for other components.
cc-bottom-buttons-container - The container located at the very bottom of the interface houses various action buttons, such as the mute/unmute audio and video, end call, settings icon, and participants icon, among others. It is represented by the red border in above screenshot.
cc-name-label - This class is passed in user name text container in all modes. It is represented by green border in the above screenshots.
cc-video-container - This class is passed to the video container in all modes. It is represented by orange border in the above screenshots.

Bottom Buttons

cc-bottom-buttons-container - This is the container of all the buttons in calling.
cc-bottom-buttons-icon-container - This is the div of every button in the button bar.

Individual bottom buttons CSS classes

cc-audio-icon-container
cc-audio-icon-container-muted
cc-video-icon-container
cc-video-icon-container-muted
cc-screen-share-icon-container
cc-switch-video-icon-container
cc-end-call-icon-container

Example

.cc-end-call-icon-container {
  background-color: green;
}
.cc-audio-icon-container {
  background-color: blue;
}
.cc-video-icon-container {
  background-color: blue;
}
.cc-audio-icon-container-muted {
  background-color: orange;
}
.cc-video-icon-container-muted {
  background-color: orange;
}
.cc-switch-video-icon-container {
  background-color: blue;
}
.cc-screen-share-icon-container {
  background-color: blue;
}
.cc-main-container {
  border: 2px dotted white;
}
.cc-video-container {
  border: 2px dotted orange;
}
.cc-bottom-buttons-container {
  border: 2px dotted red;
}
.cc-name-label {
  border: 2px dotted green;
}

The above example results in the below output:- Mode: DEFAULT

Mode: TILE

Mode: SPOTLIGHT

.cc-bottom-buttons-icon-container {
  height: 50px !important;
  width: 50px !important;
}

.cc-audio-icon-container {
  background-color: #0073ff !important;
  border-radius: 4px !important;
}

.cc-video-icon-container {
  background-color: #0073ff !important;
  border-radius: 4px !important;
}

.cc-screen-share-icon-container {
  background-color: #0073ff !important;
  border-radius: 4px !important;
}

.cc-end-call-icon-container {
  background-color: #ab0090 !important;
  border-radius: 4px !important;
  margin-left: 50px !important;
}

.cc-bottom-buttons.cc-bottom-buttons-container {
  gap: 25px !important;
}

.side-bar-main-user-video video {
  background-color: black !important;
  background-image: repeating-conic-gradient(
    #0073ff2a 0% 25%,
    #00000031 0% 50%
  ) !important;
  background-position: 0 0, 10px 10px !important;
  background-size: 20px 20px !important;
}

.cc-name-label {
  background-color: #0073ff !important;
}

.bottom-buttons-other-options {
  gap: 20px !important;
}

The above example results in the below output:-

Guidelines for Customizing the Grid Layout

CSS Classes:
- Please ensure that you only apply CSS classes specified in this documentation. Introducing CSS classes not covered here may cause unexpected UI issues.
Grid Container Resizing:
- Avoid resizing the grid container. Altering the grid container’s dimensions can negatively impact the grid layout, leading to undesirable visual distortions.

By following these recommendations, you can maintain a stable and visually consistent grid layout.

​Common CSS Classes

​Bottom Buttons

​Individual bottom buttons CSS classes

​Example

​Guidelines for Customizing the Grid Layout

Common CSS Classes

Bottom Buttons

Individual bottom buttons CSS classes

Example

Guidelines for Customizing the Grid Layout