Conditionally Change Color of Page and/or Grid based on the Window or Data

The purpose of this page is to help you conditionally change the color of a window or a grid field in iDempiere.

New Way

Starting in iDempiere 5'ish, the System client => Window, Tab and Field window => Tab subtab => Field subtab => Field Style field was added. This field allows you to control fields by injecting CSS into the detail/grid views. Zooming from the Field Style field brings you to the CSS Style window. Here you can create a new record. The below example makes the Business Partner window => Credit Status field red when the value is 'Credit Stop'.

Create and save a CSS Style window record named 'Credit Status Field Red when Credit Stop'.
Create and save a new Style Line subtab record with the following fields:
- Line No: 10
- Inline Style: background-color: rgb(201, 76, 76);
- Display Logic: @SOCreditStatus@=S
Update the 'Business Partner' Window, Tab and Field => 'Business Partner' subtab => 'Credit Status' field to point to your new 'Credit Status Field Red when Credit Stop' record.

When you Reset Cache and log into your GardenWorld client, you can see the Credit Status field turn red when set to 'Credit Stop'.

Old Material

The below material is outdated; however, I am keeping it for reference just in case.

How to make the SO have a different color than the PO

Note: google discussion with extra details Though somewhat limited, conditional css support exists and works better with wider browser support in HTML5. Unfortunately, iDempiere uses transitional XHTML and a pure css solution would have very limited browser support. So, a solution that will work with almost universal browser support would be using Javascript. Since iDempiere already loads jquery, all that needs to be done is to add some javascript using a theme that checks what iDempiere window is currently active and changes colors, background, font-size, etc. Here's a working example inspired by http://jsfiddle.net/JUcvj/1/ . The options to change the look are endless and I have provided a few examples for Purchase Order.

$(".adwindow-breadcrumb .z-label").each(function () {
  if ($(this).text() == "Sales Order") {
    $(this).css('background-color', 'orange');
  } else if ($(this).text() == "Purchase Order") {
    $(this).css('background-color', 'blue');
    $(this).parent().css('padding', '10px');
    $(this).parent().closest('div').css('border', '2px solid green');
  }
});

How to make a field (in grid view) red based on some condition.

Here is a Plugin Alternative solution: This can be done using javascript to change the css based on content - here's a link for those who need some inspiration: http://jsfiddle.net/stofke/Ya68Q/ For any given window, using the css nth-child selector element, this can be achieved. The way iDempiere outputs html, it does not give an ID name or a predictable css class name to each column. Therefore, all users of a given window will need to have the same sequence of columns for this to work. The css will stop working for users who customize grid view and change column sequence. There is no pure css/javascript way to do this. A bullet-proof option is to change the zul files to "tag" columns with a name or css ID in the html output that can be manipulated using css/javacript (like the jsfiddle example above).