> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-restapi-chatapi-eng-38785.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> CometChat Calling SDK v4 - Legacy Release - Custom CSS for JavaScript

<Warning>
  **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**](/calls/javascript/overview) instead.

  Ready to move off v4? Follow the [v4 → v5 migration guide](/calls/javascript/migration-guide-v5).
</Warning>

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

1. **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.

2. **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.

3. **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.

4. **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

1. **cc-bottom-buttons-container** - This is the container of all the buttons in calling.
2. **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**

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

The above example results in the below output:-

**Mode: `DEFAULT`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-eng-38785/4L8ayk-hERbJ9q11/images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png?fit=max&auto=format&n=4L8ayk-hERbJ9q11&q=85&s=6b6dd77d3c4017ea91f0c1feba30e703" width="2560" height="1440" data-path="images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png" />
</Frame>

**Mode: `TILE`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-eng-38785/W0-EV6ifuG3vtxwc/images/07530757-88nhrrr1z95e78wy4t0k4pz8c9zcaxhphmrv0db07w4g2eqmf8haza2lb2kyfnb1-590d2ccb6836274ba955bba8f8181308.png?fit=max&auto=format&n=W0-EV6ifuG3vtxwc&q=85&s=75ff7ddb89f7b3c4fb56e6049a5d2291" width="2560" height="1440" data-path="images/07530757-88nhrrr1z95e78wy4t0k4pz8c9zcaxhphmrv0db07w4g2eqmf8haza2lb2kyfnb1-590d2ccb6836274ba955bba8f8181308.png" />
</Frame>

**Mode: `SPOTLIGHT`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-eng-38785/CpvIOkPkBr0-5xG4/images/0ccea4cb-ivplmg27823qlaxthfhug5ihcebjfzif5dobx2pdl3x07x9qu18ai3fu98tz0t6u-82de98478427a58dcb9441afdd54f1a7.png?fit=max&auto=format&n=CpvIOkPkBr0-5xG4&q=85&s=4ff35d9075f8be92a8ab6f70d4f957ca" width="2560" height="1440" data-path="images/0ccea4cb-ivplmg27823qlaxthfhug5ihcebjfzif5dobx2pdl3x07x9qu18ai3fu98tz0t6u-82de98478427a58dcb9441afdd54f1a7.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

The above example results in the below output:-

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-eng-38785/xIlzhdLAG_ElL9WL/images/97410b02-98nyrur1z95e78wy4t0k4pz8c9zcbyhyimrv0db07w4g2eqmf8haza2lb2kyfnb1-458156083bf242abfa2ee89a0cf795fb.png?fit=max&auto=format&n=xIlzhdLAG_ElL9WL&q=85&s=ab4cadaa6f622f59522d4f6def246e56" width="1508" height="945" data-path="images/97410b02-98nyrur1z95e78wy4t0k4pz8c9zcbyhyimrv0db07w4g2eqmf8haza2lb2kyfnb1-458156083bf242abfa2ee89a0cf795fb.png" />
</Frame>

### 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.