Versions Compared

Old Version 16

changes.mady.by.user Bruno Busco

Saved on

compared with

New Version Current

changes.mady.by.user Jacques Le Roux

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Warning: use AsciiDoc


Info
titlePre Commo Theme version

This page documents the usage with the Common Theme, the pre-Common-Theme documentation is here: Visual Themes - How to


Warning
titleDeprecated, use AsciiDoc in source

The documentation below is deprecated since R17.12 branch. It's better to refer to themes/README.adoc in source


The documentation bloc below is the HTML import of the conversion of README.MD into HTML by Pandoc using this command line locally in root folder.

Code Block
pandoc themes/README.md -s -o tools/wiki-files/themes/README.md.html


...


Table of Contents


HTML
script#https://svn.apache.org/repos/asf/ofbiz/tools/wiki-files/themes/README.md.html

How to install a Visual Theme

A Visual Theme is distributed as a single .zip file like for example chrome.zip\.

  1. Download the zip file from the Gallery
  2. Unzip it in the OFBiz themes 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 themes folder. In the component, all the resources needed by the Visual Theme are defined.

...

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.

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

...

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)

...

  • 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

...

  • change the <display-name> and <description> with a description of your theme

...

  • change all "bluelight" occurrences with "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 /themes/mytheme folder and upload to the gallery.

...