Search…
⌃K

CSS for App

Customize the way your app looks
Custom CSS allows you to enhance your branding and UI/visual tweaks, not 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.
  1. 1.
    Go to App Settings
2. Choose Scripts & Styles and paste your CSS in Global CSS
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
}