Skip to content

Latest commit

 

History

History
316 lines (242 loc) · 11 KB

colorandlogo.adoc

File metadata and controls

316 lines (242 loc) · 11 KB
Raw

Color and Logo Management

Table of Contents

You can change the logo and base colors of the {product-short} {web-client} themes without having to customize individual {product-name} themes. This can be done from the administration console or the CLI.

Changing Theme Color and Logos on the {product-short} {web-client}

Base colors for themes, and custom logos can be configured as a global setting or as a domain setting.

  • When the global settings are changed, the changes apply to themes on all servers.

  • When the domain settings are changed, the base color and logos for themes on the domain are changed.

If global settings and domain-level settings for theme base colors or logos are not identical, the domain values are displayed for the domain.

Important
 If the logo and base colors are customized in multi-domain {product-name} environments, you must set a virtual host as the base color: logo attributes are displayed based on the Host header sent by the browser.
Note
 Various Zimbra themes are included with {product-name}. Some of these themes - such as lemongrass, Hot Rod, and Waves - have been designed with graphics or color codes that do not change when you modify the base color. You might want to disable those themes from user’s Theme preferences selection.

Customizing Base Theme Colors

The following base colors in {product-short} {web-client} themes can be changed:

  • The primary background color displayed in the client.

    This color is the background of the page. Variants of the color are used for buttons, background color of the Content and panes, tabs, and selection highlight. In the following image, the background color displays with the logo, the variant of the background color displays in the login area.

  • The secondary color is the color used for the toolbar.

  • The selection color is the color displayed for a selected item such as a message or an item in the Overview pane.

  • The foreground color is the text color displayed. The default text color is black. The text color usually does not need to be changed.

You can replace the logo with your company’s logo globally or per domain.

Note
 License Policy for Logo Replacement
The Zimbra Public License does not allow removing the Zimbra logo in the {product-short} {web-client}. Only Network Edition customers can replace Zimbra logos that display in the {product-short} {web-client}. Therefore, only customers of the Network Edition should use these instructions. Additional information about the license usage can be found at https://www.zimbra.com/license/.

Graphics to Replace

The following logo files can be changed. Your logos must be the same size as specified here or the image might not display correctly. These graphic files can be saved on another server or in a directory that is not overwritten when {product-name} is upgraded.

  • Company logo that displays on the login and splash screens for {product-short} {web-client} and the {product-name} administration console. The dimension of the graphic must be exactly 300 x 30.

  • Small company logo in the upper-left of the {product-short} {web-client} application and the administration console. The dimension of the graphic must be exactly 170 x 35.

  • Company Web address that links from the company logos.

Graphics not replaced

The icon that displays in the Advanced search toolbar and the favicon.ico that displays in the URL browser address field cannot be changed at this time.

On the administration console, the Global Settings and the Domains settings include a Themes page that can be configured to customize the color scheme and to add a company logo and logo URL. You upload your company logo to be used on the {product-short} {web-client} and administration console pages.

Changing Base Theme Colors

You can either select colors from popup view of predefined colors, or enter the six-digit hexadecimal color value for an exact color match to set theme colors for the following categories:

  • Foreground, which is the text color.

  • Background, which is the primary background color displayed in the client.

  • Secondary, which is the color used for the toolbar and selection headers in the pane.

  • Selection, which is the color displayed for a selected item such as a message, right-click, or drop down menu selection.

Note
 Changes to theme settings require the server theme cache to be flushed. To flush a server, go to Home → Configure → Servers to get the list of servers. Right-click on a server and select Flush Cache from the popup menu.

Use the Customize the theme colors container to set colors for your theme categories:

Admin Console:

Home → Configure → Global Settings → Themes or
Home → Configure → Domains → domain → Themes

  1. Click on the field alongside the theme category to be modified, then use the popup color selector to define the color for your selection.

    You can either click directly on a color, or use the entry field to write the hexadecimal value of the color. In either case, your selection will be displayed in the field.

    If you opt out of your color selections, click reset all theme colors to discard your settings.

  2. Navigating away from this page results in query for save of the settings.

    Click Yes (to save) or No (to discard your settings).

You can replace the {product-name} logo with your company’s logo globally or per domain from the appropriate Themes page. Your logos must be the same size as specified in the Graphics to Replace section or the images might not display correctly. The graphic files are saved on another server or in a directory that is not overwritten when {product-name} is upgraded.

Note
 When you configure the Customize the logo of the themes section in the Global Settings → Theme page, all fields in this section must be completed to display the graphics correctly.

The Zimlet icon that displays in the Advanced search toolbar and the favicon.ico that displays in the URL browser address field are not changed.

Use the Customize the logo of the themes container to a logo to accompany the theme:

Admin Console:

Home → Configure → Global Settings → Themes or
Home → Configure → Domains → domain → Themes

Table 1. Logo Settings
Option Description

Logo URL of the themes

The company web address to be linked from the logo.

Application logo banner URL of the themes

The company logo that displays on the login and splash screens for the {product-short} {web-client} and admin console. the dimension of the graphic must be exactly 450x100.

Application logo banner preview (200x35)

The company logo in the upper-left of the {product-short} {web-client} application and the administration console. the dimension of the graphics must be exactly 120x35.

Login logo banner URL of the themes

Login logo banner preview (440x60)

To change the {product-short} {web-client} theme base colors and logos, use the zmprov command. The following attributes are configured either as a global config setting or as a domain settings. Color values are entered as a six-digit hexadecimal codes.

Table 2. Color Attributes
Attribute Description

zimbraSkinBackgroundColor

The hex color value for the primary background color displayed in the client.

zimbraSkinSecondaryColor

The hex color value for the toolbar and selected tabs.

zimbraSkinSelectionColor

The hex color value for the color of the selected item.

zimbraSkinForegroundColor

The hex color value for the text. This usually does not need to be changed as the default is black.

Changing base colors for themes

Before you begin, identify the six-digit hexadecimal base color values for the various elements you are changing. You will be using these in your command entries.

Global Settings
zmprov modifyConfig <attribute-name> [“#HEX_6digit_colorcode”]
Domain Settings
zmprov modifyDomain <domain> <attribute-name> [“#HEX_6digit_colorcode”]

Modifying a domain

The example in this section demonstrates how to change to the following base colors:

  • Background color = Coral, #FF7F50

  • Secondary color = turquoise, #ADEAEA

  • Selection color = yellow, #FFFF00

    1. Specify the skin colors: Log in as the zimbra user and use zmprov to modify the domain:

      zmprov modifyDomain example.com \
 zimbraSkinBackgroundColor "#FF7F50" \
 zimbraSkinSecondaryColor "#ADEAEA" \
 zimbraSkinSelectionColor "#FFFF00"

      The quote marks, "", are required so the use of the # sign does not comment out the text that follows.

    2. Use the zmmailboxdctl command to apply the changes by restarting the mailbox server process:

      zmmailboxdctl restart

      Reload the {web-client}, and {product-name} themes for that domain should now display these colors.

Adding Your Logos

You add the company logo information and URL by modifying these the following attributes for logos:

Table 3. Logo Settings
Attribute Description

zimbraSkinLogoURL

The company Web address that you want linked from the logo.

zimbraSkinLogoLoginBanner

The company logo file name that is displayed on the login and splash screens for the {web-client} and the {product-name} administration console.

zimbraSkinLogoAppBanner

The logo graphic file name for the graphic in the upper-left of the {web-client} application and the administration console.

To add logos for a domain

If logo files are saved in the {product-name} server, they must be in a subdirectory of /opt/zimbra/jetty/webapps/zimbra.

If the logos are hosted on another machine, enter the full URL when identifying the logo.

Use steps in this section to update the logo(s) displayed over a domain:

  1. Change the URL link:

    zmprov modifyDomain zimbraSkinLogoURL https://url.example.com/

  2. Modify the logo display:

    To change the logo displayed in the login and splash screens:

    zmprov modifyDomain zimbraSkinLogoLoginBanner /zimbra/loginlogo.png

    To change the logo displayed on the {product-short} {web-client} main page:

    zmprov modifyDomain zimbraSkinLogoAppBanner /zimbra/applogo.png

  3. Stop/start the server:

    zmcontrol restart
Note
 Not currently supported: Logo modification for the {product-short} {web-client}.