Branding User Guide - Zurich Intermediary · Branding – User Guide 17 Allows you to make changes to the colours on the charts, such as bar charts and pie charts found within the

Branding User Guide

Branding – User Guide 2

BrandingThis guide will help you when you are using the Zurich Intermediary Platform. Please note that more detailed instructions regarding branding are included in the Firm Administrator user guide. Included in this guide are examples of the branding options and how to do this.

The guide can also be accessed by clicking the icon at the right hand side of the page, this feature is on all screens of the Platform. Once familiar with the system, this guide can be used as a reference document.

Helpful icons on the Zurich Platform Contents

Helpful information

Enables you to edit the

information

Enables you to delete the information

Denotes a mandatory detail. You must

complete mandatory details to be able to

move forward

Branding 3

Finding the exact colours for your Logo 5

Login 6

Text 8

Background 9

Navigation 10

Tables 12

Buttons 14

Images 15

Icons 16

Charts 17

Image and Icon Pixel Sizes (Horizontal x Vertical) 18

Enables you to save your work and exit the

process. You can restart the process by selecting the item in

your ‘Work in Progress’

Denotes that the portfolio is linked

Expands the information


Branding

Firm administrators can brand the Platform to be in line with their firm colours and logo. Updates are available to view instantly and can be made as frequently as required.

This can be completed separately for the internal and client views of the Platform.

To edit the appearance of the client view, from the Firm dashboard, select Administration > Branding > Client branding

To edit the appearance of the view for your firm’s users, select Administration > Branding > Professional branding

TIP Any branding changes you make can be previewed instantly within the branding page by clicking the Preview button. If you are happy with the results, click Save to apply the changes.

TIP Any branding changes you save will be applied the next time you log into the Platform.


Branding (continued)

There are a number of options available to customise the Platform. Our key tip is to ‘keep it simple’.

Select the Firm if there is more than one with which you are associated.

Click Define branding

We suggest that key areas you initially customise are:

• The Global background colour, found under the Background tab, to change the grey border background on every screen

• The logo, found under the Images Tab, to change the Zurich logo at the top left hand side of the Platform to your logo

Any branding changes you make can be previewed instantly within the branding page by clicking the Preview button.

After you have finished defining the branding you require, click Save. Any branding changes you save will be applied the next time you log into the Platform.

TIP If you need to match colours exactly to your company logo, the quickest way of achieving this is to submit the RGB or HEX codes into the Platform. These should be obtainable from the person or company who designed the logo.

TIP You can restore the all original Zurich settings by clicking Restore default.


Finding the exact colours for your Logo

From the top menu bar select Colours > Edit Colours.

In the pop up window click Define Custom Colour.

to reveal the exact colour codes for Red, Green and Blue.

Return to the Platform and enter the figures into any of the branding screens where the Colour boxes feature.

TIP Enter the colour code in the order of red, green, blue.

TIP If you already have them, you can also input HEX colour codes anywhere you see the icon.

If there is an exact colour that needs to be replicated then copy and paste a ‘screen print’ of the colour into your computer’s Paint application. This can be accessed via the Start menu on your PC > All programs > Accessories > Paint.

In Paint, select Pick Colour from the left tool box, and then click once on the desired colour in the screen print.

The colour you have picked will appear in the bottom left hand corner of the screen.


This screen allows you to brand the Platform login page, changing the images, font and colours. To do this you must first personalise the Platform website address in the URL field to be create your own login page.

UrlTo personalise your firm’s url for the Platform, enter the personalised text you wish to have in the following format:www.personalised-text.zplatform.co.uk

ImagesIf you have an image you wish to upload for the login page, click the icon to find and select it.

The Login background image is the full image shown below.

The Login welcome banner is the image shown below.

TIP Images have to be specific sizes, this is an exact not a maximum size. If you try to upload an image that is the incorrect size the Platform will give precise size instructions in pixels, it will also inform you of the current size of your image.

TIP Images pixel sizes can be found at the end of this guide.

Login


Login (continued)

PanelThe Panel refers to the background colour of the boxes on the login page, which can be changed to a different colour with a degree of transparency (Alpha) if required.

Click the icon to select a colour or enter the specific HEX colour code and hit the ‘Enter’ button on your keyboard.

If you know the RGB colour codes you wish to use, enter them into the colour fields (in the order of red, green, blue).

Alpha can be between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

The default client login page below (left) has Alpha: 0.70.

Compared to a branded panel (right) with Alpha: 1.00.

TextYou can change the font and colour of the text on the login page. Select a font from the dropdown menu and colour by clicking the icon or entering the colour codes.

TIP The font size is present to prevent formatting issues.


You can change the font and colour of the text on the Platform. Select a font from the dropdown menu and colour by clicking the icon or entering the HEX or RGB colour codes.

TIP Title will change text that appears in the pop-up boxes e.g. confirmation box titles.

TIP Hyperlink refers to external links and the headings below.

TIP Breadcrumb refers to wording that shows the Platform navigation on each screen.


Text


The options on this page allow you to change the colour schemes of the Platform’s background.

Content background is the central area (highlighted in blue).

Global background is the outer colour (highlighted in yellow).

Enter the RGB colour codes or click the icon to select a colour or enter the specific HEX colour code and hit the ‘Enter’ button on your keyboard.

TIP If you select a different 1st and 2nd colour the colours will be faded together with the 1st colour at the top and the 2nd at the bottom.

Here are the effects of the background branding with the following colours.

Background


You can edit the Font and Font colour of the navigation menu.

Select a font from the dropdown menu and the colour by clicking the icon, entering the RGB colour code or entering the HEX colour code and hitting the ‘Enter’ button on your keyboard.

TIP 1st level menu is the main navigation bar.

2nd level menu is the option list directly under a tab when you click on it.

3rd and 4th level menus appear to the right of options with the icon.

The selected menu is the tab currently in use…

The non selected menu is all the other tabs…

Navigation


The 2nd, 3rd and 4th level menus hold all the options under the main menu tabs, and each can be branded.

However for a simple, tidy look, we suggest keeping the colour scheme consistent for all three of the lower level menus.


Navigation (continued)


Allows font and colour changes to all tables on the Platform such as the Message Centre table on the dashboard, see below.

Select a font from the dropdown menu and colour by clicking the icon or entering the colour codes.

Line colour 1 & 2

Header colour 1 & 2 gives the option to fade the colours within the table header.

Differing header colour creates this effect in the header…


Tables


The Roll over colour and Roll over font relates to the text colour and font when the cursor is hovered over a table entry.

Selected line colour and Selected font colour will appear after clicking on the item.

Tables (continued)


Small button allows font, colour and shape changes to all buttons on the Platform. See below for examples of buttons.

TIP If you select a different 1st and 2nd colour the colours will be faded together with the 1st colour at the top and the 2nd at the bottom.

Here is an example of a branded button:

Buttons


The screen allows changes to the Logo and other images on the Platform. Click the icon to select files from your computer.

TIP Use the button to open an entry field

TIP Images have to be specific sizes, this is an exact not a maximum size. If you try to upload an image that is the incorrect size the Platform will give precise size instructions in pixels, it will also inform you of the current size of your image.

TIP The image pixel sizes are as follows:

Horizontal x Vertical

Logo 332 x 55

All other function images 152 x 434

Client Portal Dashboard 302 x 452

Images


Allows you to change the icon images on the Platform, such as the Helpful Icons at the start of the user guide. If you have an icon you wish to upload, click the icon to find and select it.

The icon pixel sizes must be exact to fit in the Platform:

Horizontal x Vertical

Help Icon 16 x 16

Minus Icon 7 x 7

Pie Chart Icon 22 x 22

All other icons 20 x 20

Icons


Allows you to make changes to the colours on the charts, such as bar charts and pie charts found within the magnifying glasses on the dashboard.

After you have finished defining the branding, click Save. You can then log out and log back in again to instantly see your changes.

Charts


Login tab Login Welcome Background 1148 x 588

Login Welcome Banner 400 x 60

Images tabLogo 332 x 55

All other function images 152 x 434

Client Portal Dashboard 302 x 452

Icons tabHelp Icon 16 x 16

Minus Icon 7 x 7

Pie Chart Icon 22 x 22

All other icons 20 x 20

Image and Icon Pixel Sizes (Horizontal x Vertical)

NP7

1448

9050

(08

/13)

RR

D

Zurich Intermediary PlatformA better business experience

For use by professional financial advisers only. No other person should rely on or act on any information in this advertisement when making an investment decision. This advertisement has not been approved for use with clients.

Zurich is a trading name of Sterling ISA Managers Limited. Sterling ISA Managers Limited, authorised and regulated by the Financial Conduct Authority. Registered in England and Wales under company number 02395416. Registered Office: The Grange, Bishops Cleeve, Cheltenham, GL52 8XX.

Zurich Life Assurance plc is authorised and regulated by the Central Bank of Ireland and subject to limited regulation by the Financial Conduct Authority for the conduct of insurance business in the UK. Registered office: Zurich House, Frascati Road, Blackrock, Co Dublin, Ireland. Registered in Ireland under company number 58098.

Documents

Branding User Guide - Zurich Intermediary · Branding – User Guide 17 Allows you to make changes to the colours on the charts, such as bar charts and pie charts found within the