Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

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

Panel

NOTE:
You can also start from a theme that is not included in OFBiz but is available in the Gallery. This is not reccomended because there is no garantee that themes out of the OFBiz distribution are regularly updated to be compatible with the latest OFBiz. 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.


Note

https://issues.apache.org/jira/browse/OFBIZ-3490Image Removed has a script to copy one theme to a new one.
for instance if you want an new ecommerce theme, copy the multiflex theme to your new one.

...

  • Create a new /themes/mytheme folder and copy there all files from the /themes/bluelight folder.
  • 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

NOTE:
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
    • You can add more references like styies but using the sequence. this will determine how they are places in the web pages.
    • You can also add Variables that you can use in the includes/* files. For instance ROBOTTEXT.

...

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

Enjoy !