Logos and background image

Logos and background image#

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 your company.

To replace the Allegra logo with your company logo, go to Administration > Branding. There you can also change 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 default logo would not have enough contrast

  • mailLogo.png (98x40) for mail templates

  • reportLogo.png (254x105) for report templates

In addition, you can override all CSS styles for each theme. Example of 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 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!important;
}

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

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