Pentaho+ User Console Styling

Pentaho+ User Console – Custom Theming

Business Need

There are scenarios where customer might require all their applications of the organization to follow a same standard style pattern rather than the default styles of each application.
In such cases, the application should be flexible enough to add new custom themes to the application to bring a monotonous feel.

So is possible to customize the Pentaho+ User Console to be in compliant with the customer’s official theme rather that default Pentaho+ theme?

How to apply custom themes and styles to Pentaho+ User Console?

Solution

The Pentaho+ User Console is the standard web application for the Pentaho+ BA Server, and includes interactive elements of Reporting, Analysis and Dashboards.

We can alter the look and feel of the User Console by editing its configuration files, graphics, and CSS style sheets manually.

There are two different kinds of themes: system and local.

System themes provide common styles and scripts that apply across the entire Pentaho+ BA Server. For instance, buttons are defined in the default system theme, Crystal. A change to the Crystal system theme will change the way buttons look in all applications.

Local themes are defined for a particular area or “context” of the Pentaho+ BA Server. Contexts include Pentaho+ BA Server plug-ins as well as the names of the top-level directories in the Pentaho+. Resources for local themes take effect only in their particular area of the BA Server.

StepsOptimize ETL Jobs by Clustering and Partitioning in PDI

Theming – Pentaho+ User Console

1. Open “/../pentaho-solutions/system/common-ui/resources/themes” directory.

2. Create a copy of “crystal” directory.

3. Rename the above folder to new theme name. Let us consider the new theme name as “yourtheme”.

4. Open the file /../pentaho-solutions/system/common-ui/themes.xml

5. Add below lines for displaying new theme to user.

< yourtheme display-name=" yourtheme " system="true">
globalCrystal.css
bootstrap/css/bootstrap-namespaced.css
</ yourtheme >

6. Open the file

(/../Pentaho/server/biserver-ee/tomcat/webapps/pentaho/mantle/themes/crystal/mantleCrystal.css)

7. Copy all contents

8. Append the content in your theme css say,

/../Pentaho/server/biserver-ee/pentaho-solutions/system/common-ui/resources/themes//globalCrystal.css

9. Load the below URL

http://localhost:8080/pentaho/content/common-ui/resources/web/test/style-samples.html?theme=

yourtheme

10. Above URL will show you all the components present in Pentaho. Modify the css for the components.

11. Update the modified css in appropriate css file. (Use inspect element in the browser and update the color and css)

12. Restart the server.

13. Login as Admin. Choose the new theme ” yourtheme ” from Menu “View” -> “Themes”

Note:

If this url fails in your server(http://localhost:8080/pentaho/content/common-i/resources/web/test/style- samples.html?theme=crystal).

Then revert to the original settings.

Tips:

Login screen will be using the Crystal theme by default. To customize the Login screen widget theme, above changes needs to be updated in crystal theme folder.

Customizing the Login screen background

1. Navigate to location /../Pentaho/server/biserver-ee/pentaho-solutions/system/common-ui/resources/themes/crystal/images

2. Replace your background image file with the name login-crystal-bg.jpeg

3. Restart the server and clear the browser cache to view the changes.

Customizing the Logo

1. Navigate to location /../Pentaho/server/biserver-ee/pentaho-solutions/system/common-ui/resources/themes/images

2. Replace your logo image file with the name puc-login-logo.png

3. Restart the server and clear the browser cache to view the changes.

Common Problems

While creating a new theme, it is always advisable to copy an existing theme folder, and use that to create your new theme.

The default system theme is defined in the /pentaho-solutions/system/pentaho.xml configuration file through the default-theme node.

The BA Server uses Crystal as the default theme; changing the value to another theme name will set the default active theme for all User Console users