Making style changes to VLF for Web WAMs

Date:2 December 2011
Product/Release:Visual LANSA Framework V12 SP1
Abstract:How to apply CSS changes to WAMs used in VLF for Web
Submitted By:LANSA Technical Support

By making use of the new VLF layout weblet vlf_layout_v2 shipped in the latest release of the VLF, it is now easier to add CSS changes to VLF WAMs.

Disclaimer:

  1. LANSA advises against changing the basic theming - where possible, stick to the theming supplied with the VLF
  2. Avoid changing properties which may behave differently across browsers (typically, but not limited to, heights, widths and display styles)
  3. It is the developer's responsibility to test all changes in all browsers.

Method:

vlf_layout_v2 was included to enable the use of jQuery UI weblets, however it has an additional benefit of allowing us to add CSS to VLF WAMs easily through the External Resources functionality available in V12 SP1. After applying this layout weblet to your VLF WAM (through either of the methods described in the jQuery tip), additional CSS external resources can be added to the WAM in the same manner.

CSS External Resources are created as regular CSS files in your Images/Style folder, and then enrolled in the repository as follows:

Enroll External Resource

Creating CSS code can be difficult, however you can use the browser developer tools to identify individual areas of your WAM for overriding. Developer tools are available in all major browsers, but the following example assumes IE9: First execute the WAM, and start the Developer Tools by pressing F12. Use the HTML tab, and select the cursor icon. Then move the mouse over your select the element you want to change and select it. The Style and Trace Styles pages on the right will give you the information on how to reference that element in the CSS.

For example, the following CSS will change the background colours of the grid weblet in a VLF WAM:

.std_grid TBODY tr.odd_row TD
{
background-color: #B0E0E6;
}
.std_grid TBODY tr.even_row TD
{
background-color: Red;
}

Once enrolled as an External Resource, the resulting (garish) outcome is as follows:

Example screen