Helpful icons on the Zurich Platform

Transcription

1 Branding User Guide

2 Branding This 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 Branding 3 Finding the exact colours for your Logo 5 Login 6 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 Text 8 Background 9 Navigation 10 Tables 12 Buttons 14 Images 15 Enables you to save your work and exit the process. You can restart the process by selecting the item in your Work in Progress Expands the information Denotes that the portfolio is linked Icons 16 Charts 17 Image and Icon Pixel Sizes (Horizontal x Vertical) 18 Branding User Guide 2

3 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 User Guide 3

4 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. Branding User Guide 4

5 Finding the exact colours for your Logo 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. 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. Branding User Guide 5

6 Login 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. Url To personalise your firm s url for the Platform, enter the personalised text you wish to have in the following format: Images If 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. Branding User Guide 6

7 Login (continued) Panel The 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: Compared to a branded panel (right) with Alpha: Text You 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. Branding User Guide 7

8 Text 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. 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. Branding User Guide 8

9 Background 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. Branding User Guide 9

10 Navigation 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 Branding User Guide 10

11 Navigation (continued) 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. 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. Branding User Guide 11

12 Tables 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 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. Branding User Guide 12

13 Tables (continued) 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. Branding User Guide 13

14 Buttons 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: Branding User Guide 14

15 Images 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 Branding User Guide 15

16 Icons 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 Branding User Guide 16

17 Charts 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. Branding User Guide 17

18 Image and Icon Pixel Sizes (Horizontal x Vertical) Login tab Login Welcome Background 1148 x 588 Login Welcome Banner 400 x 60 Images tab Logo 332 x 55 All other function images 152 x 434 Client Portal Dashboard 302 x 452 Icons tab Help Icon 16 x 16 Minus Icon 7 x 7 Pie Chart Icon 22 x 22 All other icons 20 x 20 Branding User Guide 18

19 Zurich Intermediary Platform A better business experience NP (08/13) RRD 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 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