Logos and Color Scheme

sysman sysadmin

The license terms allow you to replace the Allegra logo with your own company logo, as long as you do not distribute the modified version of Allegra outside of your company.

To replace the Allegra logo with your company logo, go to Administration > Customize > Branding. There you can also change the color scheme and the background image of the login screen.

• trackLogo.png (68x28) for the web interface logo at the top right

• trackLogo-inverted.png (68x28) for the web interface logo at the top right and dark skins, where the standard logo would not have enough contrast

• mailLogo.png (98x40) for mail templates

• reportLogo.png (254x105) for report templates

You can also override all CSS styles for each theme. Example for an orange menu bar:

.headerMaster {
     background-color :  #ff6600 !important ;
 }

 .x-panel-header-default {
     background-image :  none ;
     background-color :  #ff6600 ;
 }

 .headerMaster .x-btn.x-btn-menu-active.x-btn-default-toolbar-large,
 .x-btn.x-btn-pressed.x-btn-default-toolbar-large {
 }

Example for a company-specific login page:

.logonView {
        background-image: url('https://www.yourcompany.com/images/desktop-image.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

.logonView .headerMaster {
    display: none !important;
}

.logonView .statusBarMaster {
    border-width: 0px !important;
    background-color: transparent!important;
}

.logonView .statusBarMaster .x-toolbar-text  {
    color: white !important;
}

.logonView div[id^="loadmask"] {
    position: fixed;
    border-width: 0px !important;
}