Knowledge Base (Display) Knowledge Base (Display)

How to build your own theme

How to build your own theme

This article is partially deprecated, it will be soonly updated . Please see SASS section of release notes v2.2.


There are currently 2 jquery themes bundled with the reportlet distribution: "redmond" and "smoothness", but you will probably want to create your own theme. Please check out to the "Themeswitcher" demo to see what Visioneo looks like with some popular jquery UI themes.

 Although the application has been initially designed to support simultaneous themes, it is easier and more optimized to remove existing themes and only keep your own.  This article describes how to manage this!

If you already have a jquery theme loaded

You might already have some existing components requiring jquery UI, and therefore an existing jquery theme loaded in your portal. Firstly we should check if it is the same version as the one required by Visioneo (currently jquery UI 1.10.4). If the version is different, give it a try but most of the time some display issues would occur.

We need to remove css headers from Visioneo reportlet application, this action would depend on which portal is used. With Liferay, open <visioneo root>/WEB-INF/liferay-portlet.xml, and remove or comment css lines related to the theme:


If there are major display issues because of a different version and you can't upgrade existing components, then it is necessary to scope your custom visioneo theme (see next section). If there are only a few minor issues, then you could try to fix them by adding custom rules in <reportlet app root>/resources/css/visioneo-custom.css

Build a new theme with jQuery Themeroller

The first step is to build a new theme using the jQuery themeroller.  Once you have a satisfactoy result, click on the download option. In your downloaded package you should have a minified version, something like jquery-ui.min.css
Scope the theme: set ".vui" as selector:


Different options to embed a new theme:

  • Embed a new theme in reportlet css resources
  • Embed a new theme in portal resources (for example with Liferay, through a Theme plugin)

Embed your theme in reportlet css resources

Backup the current state of the css reportlet folder:    <reportlet app root>/resources/css

  • Remove css files in <reportlet app root>/resources/css/theme
  • Remove image files in <reportlet app root>/resources/css/theme/images
  • Copy the minified css of your new theme into <reportlet app root>/resources/css/theme/visioneo-custom.css
  • Copy the content of your the css image folder of the new theme  into the folder <reportlet app root>/resources/css/images

Restart your portal. you might have to struggle a little bit with the css persistence! Don't forget to refresh your web browser cache.

Tags: admin developers
Average (0 Votes)
Most Recent