Page History

...

The simplest way to create a Visual Theme is starting from one of the already available themes in the OFBiz themes folder. You can also start from a theme that is not included in OFBiz but is available in the Gallery. In this case just download the theme file, unzip it in the /themes/mytheme folder and apply the same procedure below skipping the very first step.

Let's say you want to create a new theme for the backoffice applications called mytheme and have selected bluelight as a starting template.

• Create a new /themes/mytheme folder and copy there all files from the /themes/bluelight folder.vt_multiflex.zip
• Rename the folder /themes/mytheme/webapp/bluelight to /themes/mytheme/webapp/mytheme
• Delete all files from the /themes/mytheme/includes folder and add your own header and/of footer files if needed
• Delete all files from the /themes/mytheme/webapp/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 "/mytheme" path. For example if you have a background.jpg image, you should use the following address: url(/mytheme/background.jpg)

  
  
  
  
• Edit the file /themes/mytheme/data/ThemeData.xml as follows:
  • change the visualThemeId from "BLUELIGHT" 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 /themes/mytheme/webapp/mytheme/WEB-INF/web.xml as follows:
  • change the <display-name> and <description> with a description of your theme
    
• Edit the file /themes/mytheme/ofbiz-component.xml as follows:
  • change all "bluelight" occurrences with "mytheme"

...