> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/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/QxoaCZzLrVi321Ps/images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png?fit=max&auto=format&n=QxoaCZzLrVi321Ps&q=85&s=0a5053884f401c34d943402f0f32ef9c" width="2560" height="1440" data-path="images/40079cb9-0wq9o8e3el3e41hs1575xiyhybemns1inp3nv4fzji09chlmzwcxe0x2z4k5tz32-a9e4201d93916dda23b05ab5bfddf1bf.png" />
</Frame>

**Mode: `TILE`**

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

**Mode: `SPOTLIGHT`**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/LKT8U_07JOWQgTZK/images/0ccea4cb-ivplmg27823qlaxthfhug5ihcebjfzif5dobx2pdl3x07x9qu18ai3fu98tz0t6u-82de98478427a58dcb9441afdd54f1a7.png?fit=max&auto=format&n=LKT8U_07JOWQgTZK&q=85&s=83f91b779358ee52a230144db8181f7b" 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/7-hZ4AEh99NJJtEC/images/97410b02-98nyrur1z95e78wy4t0k4pz8c9zcbyhyimrv0db07w4g2eqmf8haza2lb2kyfnb1-458156083bf242abfa2ee89a0cf795fb.png?fit=max&auto=format&n=7-hZ4AEh99NJJtEC&q=85&s=4d0c47c2e5202749b863224db2aa6c57" 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.