How to add your Logo in the Login and App window in Open Source or Network Edition

by Jorge De La Cruz on September 1, 2015 in PowerTips – Admins, Zimbra Server

A frequently asked question in our Forums is if Open Source users can re-brand the Login and App Logo. You can find more information about licensing in the next Official FAQ PDF, question 33 through 37 which contains related questions and answers about re-branding the logo, but here are some basics:

• How can I add my Logo to the Login and App window?
  • This blog entry will show you how, without complex changes in CSS or other Zimbra files.
• It is legal to re-brand the logo if I have Open Source?
  • Yes, the CPAL provides that the attribution should be prominently displayed and the size of the logo should be consistent with the size of other elements of the attribution. Therefore, the size of Zimbra’s logo should be consistent with the size of any other logos displayed in the graphical user interface.
  • If you are using Open Source Edition, per license agreement you must have the Zimbra Logo equal to, or greater, than you own Logo. Failing to have the image or an image smaller than yours will violate the license agreement.
• How many times do I need to change it?
  • Only once, and if you have your logo and the Zimbra logo in one file, and they are the same size, it should take no more than 30 seconds.
• How can I white-label the entire Zimbra Login and App window?
  • You must purchase the Network Edition version if you need to do white-labeling in the Zimbra Product.

How to White-Label Zimbra Collaboration?

Re-branding the Logo and White-labeling in Zimbra Collaboration are different things. Re-branding can be done in the Open Source Edition following the steps and the CPAL instructions described in this Post. This step is important to meet the license agreement.

White-Label is a Network Edition Feature and can be done only for our Customers. Please see the image below to understand each status.

Login Banner and Application Banner Sizing

In Zimbra, you will find two different images to re-brand: one is the image that appears in the Login window and the other is the image in the top-left corner when you are logged in. Each image has a different size, and you should constrain your Logo+Zimbra logo (in FOSS case) according to these max sizes:

Application Banner, 200px X 35px in Zimbra Collaboration 8.x

Application Banner, 170px X 42px in Zimbra Collaboration 8.0.x

Login Banner, 440px X 60px in Zimbra Collaboration 8.x

Login Banner, 450px X 36px in Zimbra Collaboration 8.0.x

How to do White-Label the Web Client using Zimbra Collaboration Network Edition

One of the benefits of using the Network Edition of Zimbra Collaboration is that you can  White Label easily. If you have Network Edition, you can remove the Zimbra Logos, change the colors of the Login and App windows, or even create your own Login page.

If you are using Zimbra Collaboration Network Edition, login in the Admin Console, go to the Domain where you want to White-Label following the next path Home > Configure > Domains, then edit the Domain.

In the Preferences of the Domain, click Themes. You will be able to select the Colors of the Theme, or you can use an HEX code. You will also be able to add your own Logos and the URL where the logos will point.

Remember that these steps, as well as the ability to White-Label your Zimbra Web Client, are available only in Network Edition.

Zimbra Official Logo to use with your own Logo in Open Source Edition

You can find the official Logos to use here:

• Color
• White
• Black

Needed commands to set the Logos in Zimbra

Since Zimbra Collaboration 5.0.7, you can set your logos per domain, and you can set the URL where you want to link the logos. Here are the three simple commands to run per domain. As the zimbra user:

Images hosted in external server (recommended)

The recommended way to present the logos is to host the images in a external server and present this public and valid URL to the Zimbra commands. In this case, even if you upgrade the Zimbra release, the logos will remain in the external server:

zmprov md example.com zimbraSkinLogoURL https://mail.example.com
zmprov md example.com zimbraSkinLogoLoginBanner https://www.example.com/MyLoginBanner.png
zmprov md example.com zimbraSkinLogoAppBanner https://www.example.com/MyAppBanner.png
zmmailboxdctl restart

Images hosted in the same Zimbra server (not recommended)

This is not recommended to host the logo files in this path inside the Zimbra server/opt/zimbra/jetty/webapps/zimbra/logos/. Be sure that you give these files the proper zimbra rights, and run the next commands as zimbra user:

mkdir /opt/zimbra/jetty/webapps/zimbra/logos/

Upload your logos to that new folder

zmprov md example.com zimbraSkinLogoURL https://mail.example.com
zmprov md example.com zimbraSkinLogoLoginBanner /logos/MyLoginBanner.png
zmprov md example.com zimbraSkinLogoAppBanner /logos/MyAppBanner.png
zmmailboxdctl restart

If you add your image as root user, you might be want to change the files privileges to Zimbra:

chown zimbra:zimbra /opt/zimbra/jetty/webapps/zimbra/logos/MyLoginBanner.png 
chown zimbra:zimbra /opt/zimbra/jetty/webapps/zimbra/logos/MyAppBanner.png

This method is easier because you don’t use an external server. However, any Zimbra upgrade will replace your Custom Logos and folders with the default versions.

Final result and examples

The final result will be something like the following. For best results, use .png images. If you are using the default template, we recommend using white logos or white stroke over your logo.

For Open Source Users that comply with the CPAL and follow the License Agreement

Login Banner

Application Banner

Let us know if you have any questions or issues using these steps.