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 cornertrackLogo-inverted.png
(68x28) for the web interface logo on the top right and dark skins where the default logo would not have enough contrastmailLogo.png
(98x40) for email templatesreportLogo.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;
}