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

# Custom CSS

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

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-quoted-replies-notification-prefere/CCJujGzAjk2-bziC/images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png?fit=max&auto=format&n=CCJujGzAjk2-bziC&q=85&s=9f7924e6f6fd681732d545644216f44b" width="2560" height="1440" data-path="images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png" />
</Frame>

**Mode: `TILE`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-quoted-replies-notification-prefere/jBE9M7KNCL_pchJ2/images/07530757-88nhrrr1z95e78wy4t0k4pz8c9zcaxhphmrv0db07w4g2eqmf8haza2lb2kyfnb1-590d2ccb6836274ba955bba8f8181308.png?fit=max&auto=format&n=jBE9M7KNCL_pchJ2&q=85&s=065345573f6e4ac25d361b0b88170b98" width="2560" height="1440" data-path="images/07530757-88nhrrr1z95e78wy4t0k4pz8c9zcaxhphmrv0db07w4g2eqmf8haza2lb2kyfnb1-590d2ccb6836274ba955bba8f8181308.png" />
</Frame>

**Mode: `SPOTLIGHT`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-quoted-replies-notification-prefere/85MlAS0q3FP17EkV/images/0ccea4cb-ivplmg27823qlaxthfhug5ihcebjfzif5dobx2pdl3x07x9qu18ai3fu98tz0t6u-82de98478427a58dcb9441afdd54f1a7.png?fit=max&auto=format&n=85MlAS0q3FP17EkV&q=85&s=62c41857ab130769f8434deea28186f6" 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-quoted-replies-notification-prefere/uWLmUSD7KhP75bTU/images/97410b02-98nyrur1z95e78wy4t0k4pz8c9zcbyhyimrv0db07w4g2eqmf8haza2lb2kyfnb1-458156083bf242abfa2ee89a0cf795fb.png?fit=max&auto=format&n=uWLmUSD7KhP75bTU&q=85&s=5a874acdccd36f87c90a6d7ec443e7ca" 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.