Customize The Pentaho 5.x Look

To present a Pentaho BI demo to your company or client, you should upload relevant business data, develop reports, maybe OLAP models and MDX queries, even Dashboards. To take it to the next step, you can modify files to show their logo and text above Pentaho’s marketing messages.

What follows is a list of ‘quick and dirty’ tips to make that customization. It’s not the preferred way a programmer o designer go about it, but it works, so:

Login Screen Images

You will need two images:

• Logo, 360×93 pixels in size. Transparency recommended. Replace at

  pentaho-solutions\system\common-ui\resources\themes\images\puc-login-logo.png

• Background, 1255×663 pixels in size. Edit it and add brightness to emulate original effect. Replace at

  pentaho-solutions\system\common-ui\resources\themes\crystal\images\login-crystal-bg.jpeg

I have tested it with the Crystal (default) and Emerald (available on 5.2) theme.

Login Screen Text

To modify the text in the screen you can edit a message.properties file. I chose to replace the variables by fixed words. The file is:

\biserver-ce\tomcat\webapps\pentaho\jsp\PUCLogin.jsp

To change user, password, login button text, copyright, first copy and paste each one of those lines, comment the original and type your text on the new ones, like this:

<!-- ...getString("UI.PUC.LOGIN.COPYRIGHT", ... -->

 Main Page

What I changed in the main page is the center panel text, leaving intact the navigation bar on the left and upper toolbars and menues. So I edited:

biserver-ce/tomcat/webapps/pentaho/mantle/home/content/welcome/index.html

Its a regular html file, just check the divs as they are rendered as tabs or categories in case you want to keep them.

For CSS modifications, add rules to one of these:

biserver-ce/tomcat/webapps/pentaho/mantle/home/content/welcome/css/main.css
biserver-ce/pentaho-solutions/system/common-ui/resources/themes/crystal/globalCrystal.css
biserver-ce/pentaho-solutions/system/common-ui/resources/themes/onyx/globalOnyx.css
biserver-ce/pentaho-solutions/system/pentaho-emerald-theme/resources/themes/emerald/bootstrap/css/bootstrap-namespaced.css

I installed the new (in 5.2) Emerald Theme and added at the bottom of main.css:

/* Header fonts */
h1.large  { font-size: 2.5em; color: #3BA749; }
.header-navigation-item { font-size: 1.2em; color: #3BA749; }
.content h2 { color: #3BA749; }
/* To avoid Multilist height bug, and jpivot message, I edited  globalEmerald.css */
.parameter-container SELECT { height:auto; }
#deprecatedWarning { display:none; }

For other pages, themes have preference so in bootstrap-namespaced.css I added also at the bottom:

 /* Content width */
.bootstrap .row-fluid .span9  { width:71%; }
.bootstrap .container-fluid { padding-left: 10px; padding-right: 10px; }
 /* Main left sidebar headers */
.bootstrap .well h3 { color: #3BA749; }
/* Browse Files column width */
#fileBrowserFolders { width:28%;  }
#fileBrowserFiles { width:45%; margin-left:0px; }
#fileBrowserButtons { width:22%; margin-left:0px; }
.fileBrowserColumn .header { color: #3BA749; }

To make Tomcat to reload the .css, I had to delete the content of

biserver-ce/pentaho-solutions/system/tmp
biserver-ce/tomcat/temp
biserver-ce/tomcat/work/Catalina/localhost

Then restart the server and clean the browser cache at login screen.

Translation (i18n)

If you like to change words, you need to modify some text files, modify the text to the right of the equal sign and save them with UTF-8 encoding:

• In 5.0 and 5.1:
  Main app mesages are located at:
  \biserver-ce\tomcat\webapps\pentaho\mantle\home\properties\messages.properties
• In 5.0
  To edit the navigation text on the upper left selector, edit:
  \biserver-ce\pentaho-solutions\system\default-plugin\resources\messages\messages.properties
• In 5.1:
  – One file contains login, navigation content and tools header text. It’s located at
  \biserver-ce\tomcat\webapps\pentaho\mantle\messages\mantleMessages.properties
  – Navigation text and right content of options like browse files are in:
  \biserver-ce\tomcat\webapps\pentaho\mantle\browser\messages_es.properties
• Notes:
  – Use unicode, ie, \u00E1 instead of á, or otherwise your system may fail after login.
  – Copy each message file to a new one and add your locale, i.e, for spanish copy to messages_es.properties and then edit you translation. You also need to add the line es=Español to the file messages_supported_languages.properties on the same folder.

Restart your server, clear your browser cache and test it.

Notes

Other images were modified in older versions and havent verified if they are used today but they are listed if needed:

• Logo. 185x50px. pentaho-solutions\system\common-ui\resources\themes\images\logo.png
• Logo. 52x60px. tomcat\webapps\pentaho\mantle\themes\onyx\images\logo.png
• Login. 224x94px. tomcat\webapps\pentaho-style\images\login\logo.png

About other text messages files:

• There is a similar copy of the first file mentioned above but has no effect:
  \biserver-ce\tomcat\webapps\pentaho\mantle\browser\messages.properties
• There are older translation files that are no longer needed. But they are listed:
  \biserver-ce\tomcat\webapps\pentaho\mantle\messages\MantleLoginMessages.properties
  \biserver-ce\tomcat\webapps\pentaho\mantle\messages\filechooser_messages.properties

Thanks to:

An evaluation post of 5.0 by nextCoder that suggested the login page straight modification in http://www.nextcoder.com/?p=1172

There is a guide in your Pentaho installation, look into \biserver-ce\tomcat\webapps\pentaho\docs\customizing_pentaho_guide.pdf. I found it updated after making this notes, is consise and complete.

Advertisement