Global CSS & JS

Customize the way your app looks

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

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.

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

App Settings menu location
Sign in/Sign up menu location

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

Scripts & Styles menu section

Menu Style

Update menu background color:

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

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

Update menu item style:

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

Detail. Text Font and Size

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

Input Text Field Style

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

()
.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
}
PreviousApp ThemingNextAnalytics or Live chats

Last updated

Was this helpful?