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

# Custom CSS

> Custom CSS — CometChat documentation.

Custom CSS helps you to customize the call screen of CometChat which comes with default settings.

* You might want to reposition the calling containers and
* Change the names of participants in the call with different fonts and sizes.
* Change the background color of the call screen or
* Change the height and width of the participants' call screen

You now have access to the custom CSS classes which help you change accordingly to suit your need. Please go through the examples below.

### **Example**

Let's add all the classes that we need to pass inside the calling component in a variable CSS.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let CSS=`
    .custom-main-container{
      border: 1px solid #F0F0F0;
    }
    .custom--tile-main-call-container{
      border: 2px solid #6929CA;
    }
    .custom-tile-main-video-container{
      border: 2px solid yellow;
    }
    .custom-spotlight-main-video-container{
      border: 2px solid orange;
    }
    .custom-tile-list-container{
      border: 2px solid #FFFFFF;
    }
    .custom-tile-container{
      border: 2px solid pink;
    }
    .custom-local-spotlight-stream-container{
      border: 2px solid #FFFFFF;
    }
    .custom-button-bar{
      border: 2px solid red;
    }
    .custom-button {
      border: 2px solid green;
    }
    .custom-grid-container{
      background-color: blue;
    }
    .custom-name{
      color:grey;
      font-weight:bold;
      border: 1px solid #F0F0F0;
    }`
    ```
  </Tab>
</Tabs>

You need to pass the CSS string in CallSettings in `setCustomCSS`.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    var callsettings = new CometChat.CallSettingsBuilder()
    .setSessionID(sessionID)
    .setIsAudioOnlyCall(false)
    .showEndCallButton(true)
    .enableDefaultLayout(true)
    .showScreenShareButton(true)
    .showMuteAudioButton(true)
    .showEndCallButton(true)
    .showScreenShareButton(true)
    .showPauseVideoButton(true)
    .setCustomCSS(CSS). //HERE
    .build();
    ```
  </Tab>
</Tabs>

| Property     | Description                                     | Type   | Value |
| ------------ | ----------------------------------------------- | ------ | ----- |
| setCustomCSS | Option to update the custom css for call screen | String | CSS   |

## Common CSS Classes

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

1. **custom-main-container**

This is the most outer component of the calling component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/ad2028a2-1623199872-ff9f27db5d4e8caa8fae2ac6329a3e04.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=34dbaaa56f176cad02f9758b8c3ed167" width="1406" height="698" data-path="images/ad2028a2-1623199872-ff9f27db5d4e8caa8fae2ac6329a3e04.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    //Default value is
    {
    height: 100vh;
    width: 100vw;
    }  
    ```
  </Tab>
</Tabs>

2. **custom--tile-main-call-container**

This the Container of the main video and till list or a local stream component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/ce32b938-1623199874-de5dfb0f5ad4fe483ad483f5e3d19b4c.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=813f8c0cf3278180f26d2a8144d5c930" width="1341" height="651" data-path="images/ce32b938-1623199874-de5dfb0f5ad4fe483ad483f5e3d19b4c.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default style
    {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: row; //if opened in mobile and in portrait mode its value is column
    justify-content: flex-start;
    }
    ```
  </Tab>
</Tabs>

3. **custom-name**

This class is passed in user name text in all components.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b604c8fa-1623199876-a0b52cffb03313a96a1e5e7bdd1bef00.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=133dd31efae5013f82948a7e4e61bc8b" width="1341" height="651" data-path="images/b604c8fa-1623199876-a0b52cffb03313a96a1e5e7bdd1bef00.png" />
</Frame>

## Tile mode

1. **custom-tile-main-video-container** This is the main video container. It is the div that has the main speaker video, for tile mode.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/36140e13-1623199878-6f2a4bd27bf599c60ccec5e0b0707e50.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=b4a329d552ab566d02369c8d913583c5" width="1341" height="651" data-path="images/36140e13-1623199878-6f2a4bd27bf599c60ccec5e0b0707e50.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default value 
    {
    display: flex;
    flex: 1 1;
    height: 93%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    position: relative;
    justify-content: center;
    background-color: #000;
    border-radius: 20px;
    }

    #Default CSS for mobile in portrait mode
    {
    display: flex;
    width: 90%;
    height: 63%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-top: 5%;
    position: relative;
    justify-content: center;
    background-color: #000;
    }
    ```
  </Tab>
</Tabs>

2. **custom-tile-list-container** This is the div that contains a list of tiles.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3b6bc9fb-1623199880-17eb7e5d843c8b8d891cfe483d4599f4.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=bbadc02197badb254eb1aa2d460fc3ca" width="1341" height="651" data-path="images/3b6bc9fb-1623199880-17eb7e5d843c8b8d891cfe483d4599f4.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default value
    {
    width: 12%;
    padding-left: 0%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 0.5%;
    overflow-y: auto;
    }

    #Default CSS for mobile in portrait mode
    {
    width: 100vw;
    height: 20%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0.5%;
    display: flex;
    align-items: center;
    flex-direction: row;
    overflow-x: auto;
    }
    ```
  </Tab>
</Tabs>

3. **custom-tile-container** The div is used for tile video.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/30ac61b0-1623199881-0b9466e74bb3f65e4135d76ec3d20a81.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=1b6959d1a8a7dfeadd4fad6716d93141" width="1341" height="651" data-path="images/30ac61b0-1623199881-0b9466e74bb3f65e4135d76ec3d20a81.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    Default value 
    {
    width: 90%;
    position: relative;
    aspect-ratio: 1;
    background-color: #000000;
    margin-bottom: 10px;
    border-radius: 0.7rem;
    }

    Default CSS for mobile
    {
    width: 15vh;
    position: relative;
    margin-left: 10px;
    }  
    ```
  </Tab>
</Tabs>

## SpotLight Mode

1. **custom-spotlight-main-video-container** This is the main video container it the div which has the main speaker video, for spotlight mode.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mq8rEbFfi0JjKmkM/images/6444f6f8-1623199884-0e4c3da1a5a57f8bdb81e80d6d9a48c3.png?fit=max&auto=format&n=mq8rEbFfi0JjKmkM&q=85&s=cb057e8bf73a5f5286f0c3b2d2fdf50e" width="1341" height="651" data-path="images/6444f6f8-1623199884-0e4c3da1a5a57f8bdb81e80d6d9a48c3.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default value
    {
    width: 12%;
    padding-left: 0%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 0.5%;
    overflow-y: auto;
    }

    #Default CSS for mobile in portrait mode 
    {
    width: 100vw;
    height: 20%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0.5%;
    display: flex;
    align-items: center;
    flex-direction: row;
    overflow-x: auto;
    } 
    ```
  </Tab>
</Tabs>

2. **custom-local-spotlight-stream-container** This div contains the local video of a user in spotlight mode.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7c875e3e-1623199885-76c5a5eb4223b0781c35b03bc94a3ffa.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=755cb6f6fce0315b7c261545ef463275" width="1341" height="651" data-path="images/7c875e3e-1623199885-76c5a5eb4223b0781c35b03bc94a3ffa.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    Default value
    {
    width: 12vw;
    }
    ```
  </Tab>
</Tabs>

## Bottom Buttons

1. **custom-button-bar** This is the container of all the buttons in calling.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/87c7bacb-1623199887-7e6d283383f52e645767a02130ef2e2c.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=2ec7f9b2c2e0465f844e8c0cd820cd5c" width="1341" height="651" data-path="images/87c7bacb-1623199887-7e6d283383f52e645767a02130ef2e2c.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default value 
    {
    position: relative;
    display: inline-block;
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: rgba(46, 47, 48, 0.6);
    border-radius: 25px;
    }
    ```
  </Tab>
</Tabs>

2. **custom-button** This is the div of every button in the button bar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a8e89f80-1623199889-471443d054008c0a3ca1cf7e5a62f277.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=951ef026ae40c63af57497bfd50a771e" width="1341" height="651" data-path="images/a8e89f80-1623199889-471443d054008c0a3ca1cf7e5a62f277.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default value 

    {
    background-color: #4d4c4f;
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    line-height: 1.33;
    margin: 5px;
    outline: none !important;
    border: none;
    z-index: 5;
    }

    #Default value for mobile
    {
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    line-height: 1.33;
    margin: 5px;
    outline: none !important;
    border: none;
    z-index: 5;
    }
    ```
  </Tab>
</Tabs>

## Grid Mode

1. **custom-grid-container** This is the container of the grid video.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mq8rEbFfi0JjKmkM/images/625d822c-1623199891-ab69dae03448cb6082c0ca0b9ef1981b.png?fit=max&auto=format&n=mq8rEbFfi0JjKmkM&q=85&s=54d442f3926486902ad513b1c8f09e0a" width="1341" height="651" data-path="images/625d822c-1623199891-ab69dae03448cb6082c0ca0b9ef1981b.png" />
</Frame>

<Tabs>
  <Tab title="CSS">
    ```css theme={null}
    #Default value 
    {
    position: relative;
    display: flex;
    height: 100%;
    padding-left: 1px;
    padding-right: 1px;
    margin-left: 0.5%;
    margin-right: 0.5%;
    background-color: #000;
    justify-content: center;
    align-items: center;
    }
    ```
  </Tab>
</Tabs>

<Warning>
  It is recommended to not pass CSS of other classes which are not listed here as it may cause some UI issues. Also resizing of the grid container is not allowed as it may affect the layout of grid mode.
</Warning>