Setting Style Class Attributes
This section provides overviews of class attributes and fonts and discusses how to:
Access class attributes.
Specify fonts.
Set font attributes for a specific language.
Specify spacing and alignment.
Specify background attributes.
Reference a background image URL.
Specify border attributes.
Specify margins.
Specify miscellaneous attributes.
Class attributes are grouped into categories and appear in a tabbed dialog box for each class.
Note: PeopleSoft Application Designer does not render certain style class formatting attributes at design time. You might be able to see the attribute at runtime only. Also, not all browsers support every style class attribute.
PeopleSoft Pure Internet Architecture supports the attributes that are listed in the World Wide Web Consortium (W3), Cascading Style Sheets, Level 1.
See http://www.w3.org/TR/REC-CSS1.
Every class has each of these major attributes, which correspond to a tab in the Class dialog box.
|
Field or Control |
Definition |
|---|---|
| Font |
Controls the font in which text appears. If more than one font is specified, the browser displays the first font; if it cannot find it, it displays the next font. |
| Spacing/Alignment |
Controls the spacing in addition to the default spacing. You can specify additional spacing between words and between letters. You can also specify the alignment, height, indent, and white space. |
| Background |
Controls the background colors for the page control. If the background is an image, you can select how the image appears. |
| Border |
Controls the border that appears around the element. You can specify width, color, and style. |
| Margins |
Controls the margins and padding on each side of the element. |
| Miscellaneous |
Controls the display of list-item markers, URLs, and cursor formats. |
When you add a font, the dialog box provides a choice between generic fonts and installed fonts.
Generic fonts can appear in all browsers. This table lists examples of some of the generic fonts:
|
Generic Font |
Example |
|---|---|
|
Cursive |
Zapf-Chancery |
|
Fantasy |
Western |
|
Monospace |
Courier |
|
Sans serif |
Helvetica |
|
Serif |
Times New Roman |
Installed Fonts
Installed fonts are installed on your computer. If you use an installed font for a style class, you should:
Verify that all users of your application have the same installed font.
Specify the installed font first, followed by a generic font.
If the installed font is not available to users of your application, they can use the generic font.
To access class attributes:
Open a style sheet.
Double-click the class name.
Access the class dialog box and select the Font tab.
Image: PSLONGEDITBOX (Class) dialog box: Font tab
This example illustrates the fields and controls on the PSLONGEDITBOX (Class) dialog box: Font tab. You can find definitions for the fields and controls later on this page.
Font Family
Specify the font in which you want the text to appear. You can specify more than one font so that if the browser cannot display the first font, it will attempt to display the next font, and so on, until it finds a font that it can display.
Font Size
|
Field or Control |
Definition |
|---|---|
| Absolute |
Select to use a size from the drop-down list box (xx-small, x-small, small, medium, and so on). Adjacent sizes have a scaling factor of 1.5 between them. |
| Length |
Specify the size with a number and select the measurement type from the drop-down list box (em, ex, Pixels, Inches, Millimeters, and so on). |
| Percentage |
Specify a number, followed by a percent sign (%). Percentage values are always relative to the parent element. |
| Relative Larger and Relative Smaller |
Select to interpret the font relative to the table of font sizes and the font size of the parent element. For example, if the parent element has a font size of medium and you select Relative Larger, this font size is large. |
|
Field or Control |
Definition |
|---|---|
| Font Weight |
Select the weight of the font. The values 100 to 900 form an ordered sequence in which each number indicates a weight that is at least as dark as its predecessor. The value Normal is synonymous with 400, and Bold is synonymous with 700. |
| Font Style |
Select the style of the font. Values are: Normal, Italic, or Oblique. These values are matched to existing fonts with those names. |
| Font Variant |
Select a variant. Values are: Normal or Small Caps. In a small caps font, the lowercase letters look similar to the uppercase ones, but they are a smaller size and have slightly different proportions. |
| Color |
Specify a color or select a color from a color palette. |
You can change the fonts that are available based on the base language settings. The default for the base language is English, providing generic fonts. If these fonts are not appropriate for a particular language, you must set the language preference before opening a style sheet. You can then set the font name list, font size, or font weight for the selected language.
To set font attributes for a specific language:
Select from your browser.
Select the appropriate language for the style sheet from the drop-down list box.
Save the new selected language as the base language.
Open the style sheet definition in which you want to save the font name list, font size, or font weight for the selected language.
Access the class dialog box and select the Spacing/Alignment tab.
Image: PSEDITBOX (Class) dialog box: Spacing/Alignment tab
This example illustrates the fields and controls on the PSEDITBOX (Class) dialog box: Spacing/Alignment tab. You can find definitions for the fields and controls later on this page.
|
Field or Control |
Definition |
|---|---|
| Word Spacing and Letter Spacing |
Select Normal or Length. If you select Length, specify a number to indicate an addition to the default space between words or letters. Values can be negative, but implementation-specific limits might exist. |
| Vertical Alignment |
Select the vertical positioning of the element. Values are: Baseline: Aligns the baseline (or the bottom if the element does not have a baseline) of the element with the baseline of the parent. Sub: (subscript) Aligns the top of the element with the baseline of the parent element. Super: (superscript) Aligns the baseline of the element with the top of the parent element. Top: Aligns the top of the element with the tallest element in the line. Text Top: Aligns the top of the element with the top of the parent elements font. Middle: Aligns the vertical midpoint of the element (typically an image) with the baseline plus half of the x-height of the parent. Bottom: Aligns the bottom of the element with the lowest element on the line. Text Bottom: Aligns the bottom of the element with the bottom of the parent elements font. Percentage: Refers to the value of the line-height property of the element itself. It raises the baseline (or the bottom if it has no baseline) of the element to the specified amount above the baseline of the parent. Negative values are possible. For example, a value of −100% lowers the element so that the baseline of the element is where the baseline of the next line should have been. This setting allows precise control over the vertical position of elements (such as images that are used in place of letters) that do not have a baseline. Note: Using the top and bottom alignments could cause a loop in which element dependencies occur. |
| Line Height |
Set the distance between the baselines of two adjacent lines. When a numerical value is specified, the line height is provided by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits. When a numerical value is specified, child elements inherit the factor itself, not the resultant value (as is the case with percentage and other units). Negative values are not allowed. |
| Text Indent |
Specify the indentation that appears before the first formatted line. This value can be negative, but implementation-specific limits might exist. An indentation is not inserted in the middle of an element that was broken by another. |
| Text Align |
Specify how text is aligned in the element. Because Text Align inherits, all block-level elements inside the DIV element with CLASS=center are centered. Note: Alignments are relative to the width of the element, not the canvas. |
| White Space |
Specify how to handle white space inside the element. Values are: Normal: White space is collapsed. Pre: Behaves like the PRE element in HTML. Nowrap: Wrapping is done only through elements with a line break. |
Access the class dialog box and select the Background tab.
Image: PSEDITBOX (Class) dialog box: Background tab
This example illustrates the fields and controls on the PSEDITBOX (Class) dialog box: Background tab. You can find definitions for the fields and controls later on this page.
|
Field or Control |
Definition |
|---|---|
| Background Color |
Specify the background color of an element. |
| Background Image URL |
Set the background image of an element to an image file that was previously defined. When you set a background image, also set a background color to use when the image is unavailable. When the image is available, it appears on top of the background color. |
| Background Repeat |
If you specify a background image, indicate whether the image is repeated and, if it is, how many times. |
| Background Attachment |
If you specify a background image, indicate whether it is fixed to the canvas or whether it scrolls along with the content. |
| Background Position |
If you specify a background image, set its initial position. Values are: Top: Aligns the background to the top of the element. Left: Aligns the background to the left of the element. Center: Aligns the background to the midpoint of the element (typically an image). Bottom: Aligns the background to the bottom of the element. Right: Aligns the background to the right of the element. Length: Specifies the length of the background and the unit of measure. Percentage: Refers to the value of the line-height property of the background itself. It raises the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. For example, a value of −100% lowers the element so that the baseline of the element is where the baseline of the next line should have been. This setting allows precise control over the vertical position of elements without a baseline, such as images used in place of letters. |
Examples of Percentage and Length Value Pairs and Keywords
This table lists background positions, value pairs, and their effect:
|
Background Position |
Value Pair |
Effect |
|---|---|---|
|
Percentage |
0 and 0 |
Places the upper, left-hand corner of the image in the upper, left-hand corner of the box that surrounds the content of the element (that is, not the box that surrounds the padding, border, or margin). |
|
Percentage |
100 and 100 |
Places the lower, right-hand corner of the image in the lower, right-hand corner of the element. |
|
Percentage |
14 and 84 |
Places the point that is 14 percent across and 84 percent down the image at the point that is 14 percent across and 84 percent down the element. |
|
Length |
2cm and 2cm |
Places the upper, left-hand corner of the image 2 centimeters (cm) to the right and 2 cm below the upper, left-hand corner of the element. |
|
Top Left or Left Top |
NA |
The same as 0 percent and 0 percent. |
|
Top Center or Center Top |
NA |
The same as 50 percent and 0 percent. |
|
Right Top or Top Right |
NA |
The same as 100 percent and 0 percent. |
|
Left Center or Center Left |
NA |
The same as 0 percent and 50 percent. |
|
Center and Center |
NA |
The same as 50 percent and 50 percent. |
|
Right Center or Center Right |
NA |
The same as 100 percent and 50 percent |
|
Bottom Left or Left Bottom |
NA |
The same as 0 percent and 100 percent. |
|
Bottom Center or Center Bottom |
NA |
The same as 50 percent and 100 percent. |
|
Bottom Right or Right Bottom |
NA |
The same as 100 percent and 100 percent. |
Note: If you set only one percentage or length value, the system sets the horizontal position only and the vertical position becomes the default 50 percent. If you set two values, the first one is the horizontal position. You can set negative positions and combinations of length and percentage values, for example 50 percent and 2 cm.
To specify a background image URL, select from a drop-down list box that is populated by entries in the URL Maintenance table (PeopleTools Utilities, Administration, URL Maintenance). To reference a background image file on a designated server, add its location to the URL Maintenance table.
You reference a background image in the URL Maintenance table in the same way you would register any other URL.
Access the class dialog box and select the Border tab.
Image: PSGROUPBOX (Class) dialog box: Border tab
This example illustrates the fields and controls on the PSGROUPBOX (Class) dialog box: Border tab. You can find definitions for the fields and controls later on this page.
|
Field or Control |
Definition |
|---|---|
| Border Width |
Specify the width of each line in the border. Values are:Thin, Medium, or Thick, or you can specify Length, which enables you to specify a font size (with a number) and the measurement type from the drop-down list box (Pixels, Inches, Millimeters, and so on). |
| Border Color |
Specify the color of each line in the border. You can specify a hexadecimal value for the color or select the color from a color palette. |
| Border Style |
Specify the style of line in the border. Values are: None: No border is drawn (regardless of the <border-width> value). Dotted: Border is a dotted line that is drawn on top of the background of the element. Dashed: Border is a dashed line that is drawn on top of the background of the element. Solid: Border is a solid line. Double: Border is a double line that is drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value. Groove: Border is a three-dimensional groove that is drawn in colors based on the <color> value. Ridge: Border is a three-dimensional ridge that is drawn in colors based on the <color> value. Inset: Border is a three-dimensional inset that is drawn in colors based on the <color> value. Outset: Border is a three-dimensional outset is that is drawn in colors based on the <color> value. |
Access the class dialog box and select the Margins tab.
Image: PSGROUPBOX (Class) dialog box: Margins tab
This example illustrates the fields and controls on the PSGROUPBOX (Class) dialog box: Margins tab. You can find definitions for the fields and controls later on this page.
|
Field or Control |
Definition |
|---|---|
| Margin and Padding |
Specify the margin and padding for each side of the element. Values are: Length: Specify a font size and the measurement type from the drop-down list box (pixels, inches, millimeters, and so on). Percentage: Specify a number, followed by a percent sign (%). The percentage value is relative to the parent element. Auto: The system calculates the width. Do not use negative values for padding. |
| Width and Height |
Set the width and height of text elements. These properties are most useful with replaced elements, such as images. The system scales the image to fit the value that you specify. If you set either property to Auto and the image needs scaling, the system preserves the aspect ratio of the image. Do not use negative values. Note: If the width and height of a replaced element are both set to Auto, the system sets these properties to the intrinsic dimensions of the element. |
Access the class dialog box and select the Miscellaneous tab.
Image: PSHYPERLINK (Class) dialog box: Miscellaneous tab
This example illustrates the fields and controls on the PSHYPERLINK (Class) dialog box: Miscellaneous tab. You can find definitions for the fields and controls later on this page.
|
Field or Control |
Definition |
|---|---|
| List Style Type |
Specify the appearance of the list-item marker if the List Style Image URL field is blank or if the system cannot display the image that the URL referenced. |
| List Style Image Url (list style image URL) |
Specify the URL containing the image to display as the list-item marker. |
| List Style Position |
Specify how the list-item marker is drawn relative to the content. Values are: Inside and Outside. |
| Display |
Specify how an element appears on the canvas, which might be a printed page or a computer display. Values are: Block: Opens a new box. The box is positioned relative to adjacent boxes. Typically, elements like H1 and P are block types. ListItem: Similar to block except that a ListItem marker is added. In HTML, LI typically has this value. Inline: Results in a new inline box on the same line as the previous content. The box dimensions are based on the formatted size of the content. If the content is text, it might span several lines and each line will have a box. The margin, border, and padding properties apply to inline elements but do not affect line breaks. None: Deactivates the display of the element, including children elements and the surrounding box. |
| Float |
Specify how the element floats with the text. Values are: None: Causes the element to appear where it appears in the text. Left and Right: Causes the element to move to the left or right, and the text wraps on the right-hand or left-hand side of the element, respectively. With a Left or Right value, the system treats the element as block-level and ignores the Display property. |
| Clear |
Specify the sides of an element on which floating elements are not accepted. Values are: Left: An element appears below any floating element on the left-hand side. Right: An element appears below any floating element on the right-hand side. Both: An element appears below any floating element on the left-hand and the right-hand side. None: Floating elements are allowed on all sides. |
| Transform |
Use for text elements only. Values are: Capitalize, Uppercase, Lowercase, and None. |
| Cursor |
Specify the appearance of the cursor when it passes over an element. |
| Disabled Field |
Specify the appearance of the link when the link (or field) is disabled. |
| WSRP Style (web services for remote portlets style) |
Specify the appearance of the link when the link appears in a portlet. |
Pseudo Classes
Pseudo classes are mechanisms that extend the expressiveness of style sheets. Using pseudo classes, you can change the style of page links based on whether and when the links have been visited. Pseudo classes do not exist in HTML; that is, they are not visible in the HTML code.
PeopleSoft applications uses pseudo classes to specify how a browser indicates to a user the status of links in a document that the user is viewing. For example, a browser might display a document link in a different color than the rest of the text.
|
Field or Control |
Definition |
|---|---|
| Link |
Specify the normal appearance of a link. |
| Active |
Specify the appearance of a link that is actively selected. |
| Visited |
Specify the appearance of a link that has been visited. |
| Hover |
Specify the appearance of a link when it is designated but not activated. For example, when the cursor hovers over a box that an element generated. |
Visual Formatting
|
Field or Control |
Definition |
|---|---|
| Position |
The position property places an element in a static, relative, absolute, or fixed position. Static: The page element always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations). This value is the default. Relative: The page element moves relative to its normal position, for example, left:20 adds 20 pixels to the left position of the element. Absolute: The page element is positioned at the specified coordinates relative to its containing block. The position of the element is specified with the left, top, right, and bottom properties. Fixed: The page element is positioned at the specified coordinates relative to the browser window. Absolute: The page element is positioned at the specified coordinates relative to its containing block. The position of the element is specified with the left, top, right, and bottom properties. |
| Z-Index |
Positioning of elements in CSS occurs in three dimensions, not just two. The placement of elements along this third axis, a z-axis, is exactly what this property controls. The third dimension is perpendicular to the screen, giving the screen a sense of depth. Elements can be overlapped, with higher or closer elements obscuring elements that are lower or farther away (element transparency becomes an important issue with this capability). The rendering box for each element is automatically assigned an integer z-index stacking level based on its context in the document. Boxes with greater z-axis numbers will appear in front of boxes with lower z-axis numbers (0 and negative numbers are allowed). Explicitly setting the z-index property for an element box not only sets its z-position relative to other element boxes in its current context, it also initiates a new stacking context hierarchy that affects the current element box and its child elements. If two or more boxes have the same stacking level within the same context, then they are rendered back to front in the order of the document tree. If no z-index property is set for an element box, then it inherits the stacking level of its parent element box. |
Visual Effects
|
Field or Control |
Definition |
|---|---|
| Overflow |
This property specifies whether the content of a block-level element is clipped when it overflows the element box (which acts as a containing block for the content). Visible: This value indicates that content is not clipped; it may be rendered outside the block box. Hidden: This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. You specify the size and shape of the clipping region using the Clip property. Scroll: This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar), a box should display the mechanism whether any of its content is clipped. This setting avoids any problem with scroll bars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is print or projection, overflowing content should be printed. Auto: The behavior of this value is user agent-dependent, but it should cause a scrolling mechanism to be provided for overflowing boxes. |
| Visibility |
This property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the Display property to None to suppress box generation altogether). Visible: The generated box is visible. Hidden: The generated box is invisible (fully transparent) but still affects layout. Collapse: This property may be used in conjunction with scripts to create dynamic effects on rows and columns. If used on elements other than rows or columns, Collapse has the same meaning as Hidden. |