Page Comparison

To make sure we can display different icons per theme (Onyx, Crystal, Slate, ...…) we should not be using static paths to images in HTML via the <img> tag. Rather, we should favor using CSS to set background images of a DOM element. This allows us to override images/icons with just CSS to customize a theme.

...

• Check to see if a css class already exists for an image/icon in one of the themed css files (globalOnyx.css, globalCrystal.css). if so, use it.
• If the image you need isn't available already as a common image/icon but could be re-used by others:
  • Add the image file to a themeable area (like pentaho-commons-gwt-modules/pentaho-gwt-widgets/src/org/pentaho/gwt/widgets/themes/public/themes/images)
  • Add a css definition to all themed files: globalOnyx.css, globalCrystal.css, globalSlate.css. Be sure to define background image url, height, and width

    Code Block
    title globalOnyx.css, globalSlate.css
    .my-image-style { background: url('../images/myNewCommonIcon.png'); // up to the common theme images folder height: 16px; width: 16px; }

  • If a particular theme needs a custom version of the image/icon, add it to the theme-specific images folder and reference it in the css (like pentaho-commons-gwt-modules/pentaho-gwt-widgets/src/org/pentaho/gwt/widgets/themes/public/themes/crystal/images)

    Code Block
    title globalCrystal.css
    .my-image-style { background: url('images/myNewCommonIcon.png'); // reference to the theme-specific images folder height: 16px; width: 16px; }

• If the image/icon is not a common/re-usable one, it should be themed within the context of the plugin that needs it. The process is the saem, but rather than adding the images/css to the global theming system, add them to the plugin (mantle/analyzer/dashboards/...). For example, if the image is only needed for analyzer
  • Add the image to an appropriate subfolder in pentaho-analyzer/resource/images
  • Add a css definition to common.css in analyzer to make sure all themes have a starting point they can override
  • Add theme override images/css to the appropriate theme folders within analyzer as needed.