Access to add and change pages is restricted. See: https://cwiki.apache.org/confluence/display/OFBIZ/Wiki+access

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

OFBiz Visual Themes

Visual Themes are intended to be used in your OFBiz installation to change the applications look and feel.

OFBiz framework allows every backoffice application user to select his own Visual Theme among the ones that the OFBiz administrator has installed. A Visual Theme can be selected also for the ecommerce application. In this case the selection is made by the shop administrator and all shop visitors will see and use it.

OFBiz comes with two out of the box installed themes: one is intended to be used in the backoffice and one is for the ecommerce application.

Additional themes can be downloaded by the OFBiz Visual Theme Gallery and installed by an OFBiz administrator. Of course, you can change any of the downloaded themes as you like, or you can create one from scratch.

In any case, we encourage you to share your work with other OFBiz users uploading your own themes in the gallery.

How to install a Visual Theme

A Visual Theme is distributed as a single .zip file like for example vt_chrome.zip of vt_multiflex.zip.

  1. Download the zip file from the Gallery
  2. Unzip it in the OFBiz hot-deploy folder
  3. Issue the "ant run-install" command in your OFBiz home folder

From this moment your added Visual Theme is installed and available in the OFBiz framework.

How to create a Visual Theme

An OFBiz Visual Theme consists of a simple OFBiz component installed, usually, in the hot-deploy folder. In the component, all the resources needed by the Visual Theme are defined.

The simplest way to create a Visual Theme is starting from one of the already available themes in the gallery.

Let's assume you want to create a new theme called vt_mytheme and have selected vt_multiflex as a starting template.

  • Download the vt_multiflex.zip file from the Gallery
  • Unzip it in the OFBiz hot-deploy folder
  • Rename the folder hot-deploy/vt_multiflex to hot-deploy/vt_mytheme
  • Rename the folder hot-deploy/vt_mytheme/webapp/vt_multiflex to hot-deploy/vt_mytheme/webapp/vt_mytheme
  • Delete all files from the hot-deploy/vt_mytheme/includes folder and add your own header and/of footer files if needed
  • Delete all files from the hot-deploy/vt_mytheme/webapp/vt_mytheme folder and add your own css files and images

    Please consider that all images references in your css file must be linked using the "/vt_mytheme" path. For example if you have a background.jpg image you should use the following address: url(/vt_multiflex/background.jpg)


  • Edit the file hot-deploy/vt_mytheme/data/ThemeData.xml as follows:change the visualThemeId from "MULTIFLEX" to "MYTHEME"if your theme is intended to be used for the Ecommerce application set the visualThemeTypeId="ECOMMERCE".if your theme is intended to be used for the backoffice applications set the visualThemeTypeId="BACKOFFICE".Change all VisualThemeResource lines to include references to you theme files* Edit the file hot-deploy/vt_mytheme/webapp/vt_mytheme/WEB-INF/web.xml as follows:Change the <display-name> and <description> with a description of your theme* Edit the file hot-deploy/vt_mytheme/ofbiz-component.xml as follows:Change all "vt_multiflex" occurrences with "vt_mytheme"

    Your theme is now ready to be installed.

If you want to upload your theme to the Visual Theme Gallery, simply create a mytheme.zip file from the hot-deploy/vt_mytheme folder and upload to the gallery.

Enjoy !

  • No labels