# Global CSS & JS

Custom CSS and Javascript allow you to enhance your branding and UI/visual tweaks, without completely changing the look and feel of your app. For example, you can use Custom CSS to change the style of the components: colors,  size, text alignment, etc.

**Using Custom CSS & JS:**

**How to add Global CSS & JS**

1. **Go to the App Settings**
2. **Go to the Scripts and Styles**

{% embed url="<https://www.loom.com/share/5ee5e1c2f92b4228b97d3c4f6d894831>" %}

Custom CSS and JS are used in the same way for the app and the Sign-in/Sign-up page, but they are configured independently. The Custom CSS/JS settings can be accessed in the Scripts & Styles sections of the App Settings and Sign in & Sign up menus.&#x20;

1. Go to App Settings or Sign in & Sign up menu

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FsXfBpfcl9t9tldB6a0e1%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-04-11%20%D0%B2%2020.17.53.png?alt=media&#x26;token=8b824cdc-44ef-46a9-bd3e-445037e25c3b" alt=""><figcaption><p>App Settings menu location</p></figcaption></figure>

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FfRXXRq7rXjRAiUzeUec3%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-04-11%20%D0%B2%2020.14.21.png?alt=media&#x26;token=0aabdc90-cd08-4cea-9f72-6128362e0acd" alt=""><figcaption><p>Sign in/Sign up menu location</p></figcaption></figure>

2\. Go to **Scripts & Styles** in the menu and paste your CSS or JS in the appropriate **Global CSS** or **Global Javascript** field.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FduxABR7w9628XMtPMBkW%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-04-11%20%D0%B2%2020.21.10.png?alt=media&#x26;token=5370ef33-5346-4e64-abd9-317470e39d83" alt=""><figcaption><p>Scripts &#x26; Styles menu section</p></figcaption></figure>

### Menu Style

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FhjApEgRtxcMX6k2jTbVv%2Fimage.png?alt=media&#x26;token=91c735a0-bb10-4465-820d-58ff8f1ba5f3" alt=""><figcaption></figcaption></figure>

Update menu background color:

```css
.admin-header{
    background-color:#C4CDFB;
}

.admin-header-link__label{
    color:#000;
    text-size:18px;
}
```

Update menu item style:

```css
.admin-header__title {
    font-size: 16px;
    color: #2B50ED;
    text-align: center;
}
```

### **Detail. Text Font and Size**

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FbUIdwqxZnnBJlMMya34p%2Fimage.png?alt=media\&token=319a47f6-ecb4-4918-ad18-9be1fdfd17f3)

```css
[data-component-id="{text-component-id}"] .text-truncate{
    text-align: center;
    font-size: 40px;
    color: black;
}
```

### Input Text Field Style

```css
.field__label {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 8px;
    color: #2B50ED;
}

.field__content {
    font-size: 16px;
    color: #2B50ED;
}
```

### Table Row Style (Selected row color)

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FVyZZJfmBHJi0gjpAc2gc%2Fimage.png?alt=media&#x26;token=917993fb-83d8-40c8-bfdd-67f444cda65b" alt=""><figcaption><p> ()</p></figcaption></figure>

```css
.table__row_selected:nth-child(2n) {background: red !important;}
.table__row_selected:nth-child(2n+1) {background: red !important;}

.table__row_selected:nth-child(2n), .table_openable .table__row_selected:hover:nth-child(2n) {
    background:#04CFC9 !important
}

.theme_dark .table__row_selected:nth-child(2n), .theme_dark .table_openable .table__row_selected:hover:nth-child(2n) {
    background:#2b50ed !important
}

.table__row_selected:nth-child(2n + 1), .table_openable .table__row_selected:hover:nth-child(2n + 1) {
    background:#04CFC9 !important
}

.theme_dark .table__row_selected:nth-child(2n + 1), .theme_dark .table_openable .table__row_selected:hover:nth-child(2n + 1) {
    background:#2a4acf !important
}
```

{% @arcade/embed flowId="OdUvwFm2QlotIZLrS4HU" url="<https://app.arcade.software/share/OdUvwFm2QlotIZLrS4HU>" %}