August 1, 2007

Styles in HTML Areas

In recent posts I've written about selecting styles for page fields and also about the versatility of the HTML Area object. Today I'd just like to put those together for a quick and easy way to control styles on a page.

There are many delivered "styles" (which actually resolve to CLASS= attributes on the page), but many tend to be repetitive. PeopleSoft pages, as delivered, have a certain consistent look and feel. Therefore, we should not be surprised that "bold red text on a green background" is not among the delivered styles. But sometimes you just need a little more flexibility. For example, I recently had the need to shade the background of a group box in certain cases and could not find a delivered style that met the requirement.

We could clone and maintain a Stylesheet object, but these are large. If you need a quick change to just one or a few pages and don't want to maintain a custom Stylesheet, you can use an HTML Area instead.

First, pick a delivered style that is somewhat similar to what you need—or if you can't find one, just pick any random style that the page isn't already using. I'll add a Static Text field and set it to use the "KNOCKOUT" style for this example. Add an HTML Area anywhere on the page. The size and position don't matter. In the Value portion of the properties box, select "Constant" and enter:

<style type="text/css">
  .knockout  {color: red; background-color: green; font-weight: bold;}
</style>

Save and run the page, and there it is: an ugly bold red field on a green background.

Naturally, if red on green is part of the look and feel of your system, you wouldn't want to use this trick on every page but would want to create a Stylesheet instead. But for quick fixes or formatting of unusual page elements, this can work well.

Until next time...