style & look and feel integration - hosted~ftpyellowfin/downloads/docs/style guide.pdf · you...

Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011

Yellowfin Restyling

Guide

February 2011


Yellowfin ®

Under international copyright laws, neither the documentation nor the software may be copied, photocopied,

reproduced, translated or reduced to any electronic medium or machine-readable form, in whole or in part, without

the prior written permission of Yellowfin International Pty Ltd, except in the manner described in the software

agreement.

Copyright © Yellowfin International 2011. All rights reserved.

Trademarks:

Yellowfin and the Yellowfin Logo are registered trademarks of Yellowfin International.

All other product and company names mentioned herein are the trademarks of their respective owners.

Version: 1.0

Published: February 2011


Contents

Introduction ............................................................................................................................................... 4

Special Requirements ........................................................................................................................... 4

Tools ..................................................................................................................................................... 4

Report & Chart Styles ................................................................................................................................ 5

Table Configuration ............................................................................................................................... 5

Default Chart Colours ............................................................................................................................ 6

Examples .............................................................................................................................................. 7

Login Page .............................................................................................................................................. 12

Instructions ......................................................................................................................................... 12

Examples ............................................................................................................................................ 13

Navigation Panels .................................................................................................................................... 15

Navigation Replacement & Functionality.............................................................................................. 15

Page Header.................................................................................................................................... 15

Left Navigation ................................................................................................................................ 16

Page Footer ..................................................................................................................................... 16

Customising Header Navigation .......................................................................................................... 16

Examples ........................................................................................................................................ 17

Customised Toolbar ............................................................................................................................ 18

Examples ........................................................................................................................................ 18

Style Sheet Customisation ...................................................................................................................... 19

Image Customisation .............................................................................................................................. 20

Examples ............................................................................................................................................ 21


Introduction

It is important to style Yellowfin in order to maintain organisational feel between it and other

corporate documents and systems. The corporate branding colours, fonts, logos and links

become the visible aspect of the site and can integrate seamlessly with an OEM application.

When styling Yellowfin it is important to take into consideration the end user experience. It is

recommended that corporate logos, styles, and colours are implemented to ensure it instantly

feels like an extension of the organisation. It is also important to take into consideration any

special needs that users may have.

Special Requirements

An example of user needs can be found here:

http://waxy.org/2011/01/colorblind_leading_the_blind/ in an article written by Andy Baio about

colour blindness and the importance of chart colour selection.

Tools

A useful tool to help you select colours that work well together and are colourblind, print, and/or

photocopy safe can be found at http://colorbrewer2.org/.

http://waxy.org/2011/01/colorblind_leading_the_blind/

http://colorbrewer2.org/


Report & Chart Styles

Table Configuration

The Administration > Report Styles settings allow you to set the default style and colour for you

tables and table titles. Select the desired settings for your Column Headings and Data.


Default Chart Colours

One area of high visual impact is to set the default chart style within Yellowfin. If no default style

is defined Yellowfin automatically select colours for charts based on a pre-defined list.

Although you can manually set many chart colours, setting the default colours means that as you

are doing a demonstration, if you create a chart that chart will automatically have your colour

scheme applied.

To update the chart colour scheme you will have to edit the Chart configuration table from the

administration settings. Administration > Configuration

Insert about 10+ colours to ensure you have specified enough for your charts. You can select up

to 36 colours. Note you can set both the flat colour plus the gradient colours. The gradient

colours should be a slight variant of the flat colour to provide a subtle contrasted highlight.

To turn on default gradient set the default to ‘Yes’. You can also set the default options for line

width and shapes.


Examples

Standard Yellowfin Default Chart Colours & Images on Sample Reports


Custom Chart Colours & Images on Sample Yellowfin Reports


Custom Client Chart Colours & Images on Sample Yellowfin Reports


Custom Client Chart Colours & Images


Custom Client Chart Colours, Images, Header, Footer, and Left Navigation


Login Page

You can change the look and feel of the login page by editing the index_mi.jsp (which you can

find in the Yellowfin/development/examples/ directory), you will have to be careful not to break

any of the JSP or Javascript code.

Instructions

You will have to rename it to something other than index_mi.jsp (maybe index_ias.jsp)

To use this copy it into /yellowfin/appserver/webapps/ROOT/

To make this the default page you will have to edit web.xml and change this section to reflect

your new filename:

<welcome-file-list>

<welcome-file>index_ias.jsp</welcome-file>

</welcome-file-list>

You will also have to change this line in the new index page to also reflect the filename change:

<input type="hidden" name="<%=Const.INDEX_PAGE%>" value="/index_ias.jsp" />

In order for the page to be used for logout as well as login, the following changes will need to be

made:

In the Yellowfin database:

1. Go to the "Configuration" table.

2. Under the column "ConfigCode", look for the entry named "LOGONPAGE". It should be

pointing to index_mi.jsp under "ConfigData".

3. Change the "index_mi.jsp" entry to your custom login page (index_ias.jsp). This .jsp file

must reside in your Yellowfin/appserver/webapps/ROOT/ directory.

4. So once this is changed, the database entry should appear like this:

IpOrg ConfigTypeCode ConfigCode ConfigData

1 SYSTEM LOGONPAGE index_ias.jsp

5. Restart Yellowfin.

Note that with this change, your default login page will be index_ias.jsp, and no longer

index_mi.jsp.


Examples

Standard Yellowfin Login Page

Standard Yellowfin Login Page with Simple Image Replacement

Standard Yellowfin Login Page with Simple Image Replacement


Fully Customised Yellowfin Login Page


Navigation Panels

The Yellowfin application can be integrated into existing or new applications by removing or

replacing the side, top navigation and footer areas. Doing this will replace the navigation

uniformly across all Yellowfin pages. Replacing the navigation with an html fragment allows the

quick addition of customised site links to each page. Removing the navigations may be suitable

for including Yellowfin in an html frame inside the application. Customising the navigation areas is

a quick and easy way to integrate Yellowfin into the application, while preserving full functionality.

Navigation Replacement & Functionality

Removing or replacing navigation has to be evaluated based upon the user actions within

Yellowfin.

Navigation Panels in Yellowfin

Page Header

The Yellowfin top navigation area has been left intentionally blank. The only functionality is the

log-off link. As such replacing this navigation area will have little impact on the usability of

Yellowfin.


Left Navigation

The left side Navigation is used within Yellowfin. However, it is generally a redundant element

since if it is in use it will also be done so in conjunction with the standard wizard steps. The one

place where the side nav is used without the wizard is on the report preview page. The user

would have to use the edit drop down to navigate back to the report data page.

Page Footer

The page footer in Yellowfin does not contain any navigation so it’s easily replaced with a custom

file containing your logo and details. You can’t perform a simple image replacement in this case

as the standard footer is built in and needs to be completely removed. Use the same process as

the Custom Header Navigation below.

Customising Header Navigation

6. To customise the navigation areas, the user must be logged in with a role that has

access to the Configuration page.

7. Go to the Administration section, and click on the Configuration link. For the top

navigation, the available options are:

Standard Yellowfin

Header

Use the standard Yellowfin header on every page. This includes

the title of the page, and a link to log the user off.

No Header Do not include any header.

Custom Header Use a custom header.

8. Select Custom Header from the list as shown below.

Custom Header URL


9. A Custom URL will need to be entered. This is a link to an html fragment that will be

included at run-time every time a page is loaded. It can be located on any server that the

Yellowfin server can access, but for best performance, it should be connected via a fast

link. Ideally, the included html fragment would be hosted on the same server as Yellowfin.

The easiest way to host the html fragment (and the only way if there is no separate web

server) is to store it in the Yellowfin program directory:

C:\Program Files\Yellowfin\appserver\webapps\ROOT\my_custom_header.jsp

This fragment will then be available via the URL: http://localhost/my_custom_header.jsp

The included html should be an html fragment, suitable for including inline within another

html page, rather than a full html document. That is, it should not contain <html>, <head>

or <body> tags. Remember that any links inside the html will be relative to the Yellowfin

page. It is recommended to use absolute URL links

It is also important to remember that the standard Yellowfin header provides the only link

for a user to log out of the system. If the header is being replaced provide a link to log off

by the URL: javascript:on_submit(‘logoff’);

This link will log the user off from any Yellowfin page.

Examples

Standard Yellowfin Header

Custom Header Images


Customised Toolbar

Yellowfin allows the creation of a customised tool bar which replaces the existing tool bar. This is

a useful way to change the look and feel of the tool bar – eg create buttons or add additional links

for functionality.

To get this to work an include file must be created, which contains the same links as the Yellowfin

toolbar – and any additional needed for the application. Because these links are not always

displayed in Yellowfin there is a parameter that can be passed to the application to determine

whether the toolbar should be showing or not. Yellowfin will pass the parameter "yftoolbar" to the

custom header, and it'll be set to "true" on pages where the toolbar links would normally be

shown.

eg. header.jsp?yftoolbar=true

Examples

Standard Yellowfin Header & Navigation

Complete Custom Header & Navigation


Style Sheet Customisation

Use the Style sheet settings to change the Link and visited link settings.

A:link The default hyper link colour within Yellowfin.

A:visited The default hyper link colour within Yellowfin, after that link has been visited.

Usually this is the same as the link colour.

A:hover The default hyper link hover colour within Yellowfin.

Below is an example of changing the above options where your Yellowfin links can go from the

blue at the top to the pink below:


Image Customisation

As well as style sheets, Yellowfin uses a set of images to update its look and feel. Generally the

following images are changed as a minimum.

header_logo.gif

header_middle_bkg.gif

dash_left.gif dash_middle.gif

dash_right.gif

tab_right.png tab_right_off.png

tab_middle.png tab_middle_off.png

tab_left.png tab_left_off.png

tab_left_filter.png tab_line.png

tab_scroll_left.png tab_scroll_left_over.png

tab_scroll_right.png tab_scroll_right_over.png

tab_scroll_left_disabled.png tab_scroll_right_disabled.png

tab_select.png tab_select_over.png

entity_open.gif entity_open_over.gif

entity_close.gif entity_close_over.gif

icon_dropmenu.gif icon_dropmenu_over.gif

icon_maxwin.gif icon_maxwin_over.gif

icon_closewin.gif icon_closewin_over.gif

icon_wintable.gif icon_wintable_over.gif

icon_winchart.gif icon_winchart_over.gif


Examples

Clear Dashboard Portlets, Images, & Header – Customised with images and CSS


Yellowfin Standard & Pink Yellowfin – Customised with images and CSS

Styled Images & CSS – Pink

Styled Images & CSS – Blue/Grey and Green


Styled Images & CSS – Black & Orange

Styled Images & CSS – Blue, Grey & Yellow

style & look and feel integration - hosted~ftpyellowfin/downloads/docs/style guide.pdf · you...

Documents