Changing The Look Of Your O4W 1.0 Screens (Web)

With the recent release of OpenInsight 9.2, our new O4W web development tool is finally available for everyone to use.  One of the key design goals for O4W is to be flexible and configurable; thats why it s built on the widely-supported jQuery open source toolkit.  One of jQuery s features is the ability to quickly change the look of a web page by changing which jQuery user interface  theme  is selected - and O4W developers and users can take advantage of this feature to change the look of their O4W screens in the same way.

You specify which theme you want jQuery (and thus O4W) to use on the O4W Configuration Screen.  Bring up the O4W Configuration Screen (either in O4W from the main menu, or from within OpenInsight using the RTI_O4W_CFG form), and on the  scripts  tab press either the  on-line  or  off-line  button to set the default  core script  to the  on-line  version of jQuery hosted by Google s servers (on the Google Content Delivery Network, or CDN), or the  off-line  copy of jQuery that s distributed with O4W.

If you choose the  off-line  version, you can edit the text thats inside the  Core Scripts  box to use a different jQuery theme   simply look for the line that begins:

<link rel="stylesheet" type="text/css" href="../jquery/1.3.2/css/smoothness/jquery-ui-1.7.2.custom.css" />

You can manually change the theme from  smoothness  to one of the other distributed themes   the available choices are smoothness, ui-darkness, ui-lightness, and flick. So to use the ui-lightness theme instead, change this URL to instead be:

<link rel="stylesheet" type="text/css" href="../jquery/1.3.2/css/ui-lightness/jquery-ui-1.7.2.custom.css" />

Be sure to save your changes, and then refresh your page to see the changed theme.

If you choose the  on-line  version instead, you can choose amongst most or all of the jQuery themes rather than just the selected few that are distributed with O4W   this list includes ui-lightness, ui-darkness, smoothness, start, Redmond, sunny, overcast, le-frog, flick, pepper-grinder, eggplant, dark-hive, Cupertino, south-street, blitzer, humanity, hot-sneaks, excite-bike, vader, dot-luv, mint-choc, black-tie, trontastic, and swanky-purse.

Note that if you choose the  on-line  version, you must change the URL for the stylesheet   the one that s provided with O4W is no longer in operation.  So after switching to the on-line version, look for the line that contains:

http://www.jqueryui.com/latest/themes/base/ui.all.css

and change it to be instead:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/%3Cthemename%3E/jquery-ui.css

where you would replace <themename> with the name of the theme you wish to use.  For example, if you wanted to use the on-line configuration with the ui-lightness theme, you would change the URL section of the line to be:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css

Once again, be sure to save your changes to the configuration record and refresh the browser to have your changes take effect.

With all these choices, you ll be sure to find a color scheme and overall  theme  to match _whatever_ web site you re integrating O4W into.