Logos and Color Scheme

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 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 in the upper right corner

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

  • mailLogo.png (98x40) for email templates

  • reportLogo.png (254x105) for report templates

You can also override all CSS styles for each theme. Here is an 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 {
 }

Here is an example of 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 !
}

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

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