Form Type Styles
Introduced with the 3.75.00 release of the Framework, the Form Type Styles setup page provides functional control over the application of style sheets to specific form types. Style sheets can be added or removed, their order of appearance in the HTML can be controlled, and they can be enabled or disabled.
Note: The functionality enabled by this setup page applies only to form types that use Fluid. Style sheets added for form types that use Classic styling will have no effect.
Navigation: Main Menu > Manage GT eForms 3.x > GT Functional Setup > GT System Setup > Form Type Styles
Style sheets controlled by this setup page are loaded in addition to the default style sheets already loaded by PeopleSoft and our Framework. Our Oracle Redwood-inspired style sheet was also introduced with version 3.75.00, and its inclusion is controlled on this page, which can be removed if desired. An entry enabling the G3FORM_REDW_DFLT_CSS style sheet will automatically be added when new form types are created. For form types created prior to upgrading to 3.75.00, to apply the Redwood styling an entry must be added manually to this setup.
Form Type Style
The Filter Options fields of Form Type, Form Family, Style Sheet Name can be used filter the entries displayed in the grid.
| Field | Value/Use |
|---|---|
| Form Type | The Form Type this style sheet entry applys to. |
| Sequence Number | The Squence Number will detrimine the order of appearance in the form page HTML. Lowest sequence will appear first. |
| Style Sheet Name | The style sheet to include. |
| Active | If checked the style sheet will be loaded when the form type loads. If unchecked, the style sheet will be omitted. Allows you to disable a style sheet without permenantly removing it form this setup. |
Things to Consider
In the example image above you can see that the TRAIN_AWD form type has 3 style sheet entries: G3FORM_REDW_DFLT_CSS, G_SETH_REDW_DEV_CSS and G_DAVID_REDW_DEV_CSS. If all 3 were active, they would be added to the head element in the HTML on the form page in that order. Something like this:
<link id="G3FORM_REDW_DFLT_CSS_1954_css" rel="stylesheet" type="text/css" href="/cs/ps/cache/G3FORM_REDW_DFLT_CSS_1954.css" pttarget="css">
<link id="G_SETH_REDW_DEV_CSS_1820_css" rel="stylesheet" type="text/css" href="/cs/ps/cache/G_SETH_REDW_DEV_CSS_1820.css" pttarget="css">
<link id="G_DAVID_REDW_DEV_CSS_1857_css" rel="stylesheet" type="text/css" href="/cs/ps/cache/G_DAVID_REDW_DEV_CSS_1857.css" pttarget="css">
However, since the G_SETH style sheet does not have Active checked on this table, it will be omitted and only lines 1 & 3 will be added to the HTML.
The order in which style sheets are added does have significance. For CSS rules, when more than one rule applies to an element on the page and they have the same specificity, the last rule to appear will be applied. This means that, from our example, any rules in the G_DAVID style sheet that are the same as, or have the same specificity as, rules in the G3FORM_REDW_DFLT_CSS style sheet will override those in G3FORM_REDW_DFLT_CSS. By controlling the order in which the style sheets are applied, you can use the same rules as our style sheets and ensure that your styles take precedence over ours simply by placing your style sheet after ours. This can be achieved by assigning it a higher sequence number.
If you are using our Redwood style sheet and wish to modify some of the styles, we recommend reviewing the G3FORM_REDW_DFLT_CSS style sheet. In the first section, we’ve included many CSS variables that make it easy to override styles by simply redefining these variables in a custom style sheet you create and include after ours. For example, if you wanted to change the text color for input fields, you can modify the following variables:
--g3rw-element-text-color: rgb(27, 25, 24);
--g3rw-disabled-element-text-color: rgb(85, 77, 78);
By simply redefining these variables in a later style sheet, you can change the text color for both enabled and disabled form fields. While there will be some exceptions, we hope we’ve made it much easier to implement desired style changes.
Form Type Style Bulk Add
The Bulk Add page was created as a way to quickly apply a new style sheet to multiple form types at once.
| Field | Value/Use |
|---|---|
| Style Sheet to Add | Select a style sheet object that you want to add to multiple form types. |
| Form Family | Limit the Form Types returned to those in a single family. If blank all family values will be considered. |
| Search | Pressing this button will fill the grid with all form types that do not have an entry in the style table for the selected style sheet. Note: A form type that has an entry for this style sheet will not show on this page regardless of the current Active value. |
| Clear | This button clears all values on the page. |
| Add Style Sheet to selected Form Types | Pressing this button will add a style sheet entry for each of the Form Types in the grid that have the Add Style Sheet checkbox checked. These entries will all be set to active. |
| Grid Field | Value/Use |
|---|---|
| Form Type | Form Type value |
| Form Family | Form Family value |
| Add Style Sheet | Checking this checkbox will indicate that a style sheet entry should be created for the Form Type when the Add Style Sheet to Selected Form Types button is pressed |