Style & Look and Feel Integration - Hosted~FTPyellowfin/downloads/Docs/Style guide.pdf · You can...
Transcript of Style & Look and Feel Integration - Hosted~FTPyellowfin/downloads/Docs/Style guide.pdf · You can...
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Yellowfin Restyling
Guide
February 2011
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 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
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 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
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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/.
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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.
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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.
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Examples
Standard Yellowfin Default Chart Colours & Images on Sample Reports
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Custom Chart Colours & Images on Sample Yellowfin Reports
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Custom Client Chart Colours & Images on Sample Yellowfin Reports
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Custom Client Chart Colours & Images
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Custom Client Chart Colours, Images, Header, Footer, and Left Navigation
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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.
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Examples
Standard Yellowfin Login Page
Standard Yellowfin Login Page with Simple Image Replacement
Standard Yellowfin Login Page with Simple Image Replacement
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Fully Customised Yellowfin Login Page
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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.
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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:
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
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
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Examples
Clear Dashboard Portlets, Images, & Header – Customised with images and CSS
Yellowfin Product Demonstration Guide Copyright © Yellowfin International 2011
Yellowfin Standard & Pink Yellowfin – Customised with images and CSS
Styled Images & CSS – Pink
Styled Images & CSS – Blue/Grey and Green