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

« Previous Version 35 Next »

Visual Themes in Releases

Starting with R13.07 only 2 themes are available in releases:

  • Flat Grey
  • Tomahawk

The main reasons we kept only them are (the original discussion started here)

  • Less maintance burden
  • Flat Grey is the only theme capable of handling RTL (Right To Left) languagues like Arabic, Hebrew, etc.
  • Tomahawk is the last evolution of a family of themes (others are in order of appeareance: BlueLight, Dropping Crumbs)

There are 5 themes available in trunk (order of appeareance)

  • BizznessTime
  • BlueLight
  • Dropping Crumbs
  • Flat Grey
  • Tomahawk

Visual Themes - How To

How to install a Visual Theme not present in a release but available in trunk?

Simply checkout the theme you want from the trunk in Subversion repository. If you need more information about this ask on user ML
Then place it under the themes directory in your OFBiz instance.
From this moment your added Visual Theme is installed and available in the OFBiz framework at next restart.

You can also install an older theme dowloaded from the Visual Themes Gallery.

How to change the backoffice default Visual Theme

Simply change the VISUAL_THEME property in general properties

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.

When creating new themes for OFBiz, it is important to follow these guidelines

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

https://issues.apache.org/jira/browse/OFBIZ-3490 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.

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.
  • 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

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/mythemeData.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.
  • 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"

Your theme is now ready to be installed.

You have to either do a ant load-file or import the file your modified /themes/mytheme/data/mythemeData.xml through the webtools.
If you went the route of /framework/common/data/CommonTypeData.xml then you must do the same with that file as well.

How to use it

If you did a backend theme, then select it through the themes link at the top (or bottom for FlatGrey) of any page (maybe in preferences for some themes)
If you did an eCommerce theme, then select it in the Product Store associated with the Website you want to use it on.

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 !

  • No labels