Page History

...

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

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

...

An OFBiz Visual Theme consists of a simple OFBiz component installed, usually, in the hot-deploy themes 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 galleryOFBiz themes folder.

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

• Download the Create a new /themes/mytheme folder and copy there all files from the /themes/bluelight folder.vt_multiflex.zip file from the GalleryUnzip it in the OFBiz hot-deploy folder
• Rename the folder hot-deploy/vt_multiflex to hot-deploy/vt_mythemeRename the folder hot-deploy/vt_mytheme/themes/mytheme/webapp/vt_multiflex to hot-deploy/vt_bluelight to /themes/mytheme/webapp/vt_mytheme
• Delete all files from the hot-deploy/vt_/themes/mytheme/includes folder and add your own header and/of footer files if needed
• Delete all files from the hot-deploy/vt_/themes/mytheme/webapp/vt_mytheme folder and add your own css files and images
  
  

  Panel
  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_mytheme/background.jpg)

  
  
  
• Edit the file hot-deploy/vt_/themes/mytheme/data/ThemeData.xml as follows:
  • change the visualThemeId from "MULTIFLEXBLUELIGHT" 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_/themes/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_/themes/mytheme/ofbiz-component.xml as follows:
  • change all "vt_multiflexbluelight" 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_/themes/mytheme folder and upload to the gallery.

...