White Labeling via Custom Code

Scaleo allows modifying the system interface via custom code. It's possible to set a custom background color, modify the authorization page, set the required colors for the side menu, and more.

Most of the changes are performed by rewriting the CSS code styles.

The HTML and CSS code of the platform can be viewed in any web browser.

To add custom code to your Scaleo platform please go to:

Settings -> UI Customization -> Code.

Simply paste your code there.

You can find some examples below.

Modify the side menu colors.

  <style type="text/css">

body > app-root > scaleo-shell > scaleo-manager-pages > ui-layout > ui-panel-layout > ui-main-layout > ui-aside-left {
background-color: #d8dfe8 !important;
}

body > app-root > scaleo-shell > scaleo-manager-pages > ui-layout > ui-panel-layout > ui-main-layout > ui-aside-left > div > div > scaleo-menu > mod-main-menu   {
color: #2f3137  !important;
}

body > app-root > scaleo-shell > scaleo-manager-pages > ui-layout > ui-panel-layout > ui-main-layout > ui-aside-left > div > div > scaleo-menu > mod-main-menu > mod-main-menu-group> div > a, body > app-root > scaleo-shell > scaleo-manager-pages > ui-layout > ui-panel-layout > ui-main-layout > ui-aside-left > div > div > scaleo-menu > mod-main-menu > mod-main-menu-group> div > a > mod-main-menu-icon > mat-icon > svg  {
color: #494d56  !important;
}

body > app-root > scaleo-shell > scaleo-manager-pages > ui-layout > ui-panel-layout > ui-main-layout > ui-aside-left > div >  mat-icon > svg {
color: #2f3137  !important;
}

Preview:

Modify the authorization page colors and buttons.

<style type="text/css">
body > app-root > scaleo-auth-pages > ui-layout > ui-auth-layout > div > div > scaleo-login > div > div > div.auth__form > form > div.auth__dont-have-account.ng-star-inserted > div.mt-32 > button:nth-child(1), body > app-root > scaleo-auth-pages > ui-layout > ui-auth-layout > div > div > scaleo-login > div > div > div.auth__form > form > div.auth__dont-have-account.ng-star-inserted > div.mt-32 > button:nth-child(2) {
background: #00ff48 !important;
    border-radius:10px !important;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 29px !important;
    padding-top: 24px !important;
    padding-bottom: 22px !important;
    color: #000000 !important
}


.auth__content {
width: 500px !important;
}




body > app-root > scaleo-auth-pages > ui-layout > ui-auth-layout > div > div > scaleo-login > div > div > div.auth__form > form > button
{
 
    background: ##00ff48 !important;
    border-radius: 0px 25px !important;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 29px !important;
    padding-top: 24px !important;
    padding-bottom: 22px !important;
    color: #000000 !important;
}

body > app-root > scaleo-auth-pages > ui-layout > ui-auth-layout > div > div > scaleo-login > div > div > div.auth__form > form > div.auth__dont-have-account.ng-star-inserted > div.mt-32 > button:nth-child(2) {
display:none !important;
}

Preview: