| Selecting Styles for Page Fields | KEVIN RESCHENBERG
05-16-2007 |
When adding fields to pages, we select a "style" for each new field.
The style maps to a CSS class that is contained within a PeopleSoft stylesheet
object. In most cases, we simply take the default value for the style and that gives
us a consistent appearance on our pages. But sometimes we want to modify the
visual appearance of a field.
To select a style,
simply choose it from the dropdown list in the field properties.
(There is a style for the field and one for the label.) Simple enough. But what do
all the choices mean? Do you know what "PAFRAMELEVEL3WBO" is? Also, the style as
it appears in App Designer is often just an approximation of what will appear in
the browser. Do we need to use a trial-and-error approach to see what each style is?
Instead of that method, try displaying samples of all of the styles in the browser. 90% of them are
duplicates or very specialized styles that are rarely used. But among the rest you might find
good choices for your page design.
It's pretty easy to do. Write some SQL that generates HTML:
SELECT
'<DIV CLASS="' || STYLECLASSNAME || '">' || STYLECLASSNAME || '</DIV>'
FROM PSSTYLECLASS
WHERE STYLESHEETNAME = 'PTSTYLEDEF'
Insert an HTML Area on your page. Run the SQL and copy the
results into the HTML Area (as a "constant" value instead of a field value).
There is a limit to how much text you can put there, so you may need to restrict
your selection in the WHERE clause of the SQL (in this example, I just picked
one stylesheet). Save the page and navigate to it, and you should see something
like this:
Pick the appropriate style and apply it to your field, then just delete the HTML Area
and you should be all set. One thing to be aware of, though, is that most of the
styles with backgrounds do not fill in more than the area taken by the text.
You can see how this works by testing it. For the styles that do fill in larger
areas, do a View Source in the browser and look for "width:100%".
|
