Overriding the Style Sheet

Making an eForm Your Own

You created the perfect form using GT eForms™. It is a seamless blend of your complex business requirements and a simple user experience. It is a masterpiece! The best part? You created it without having to ask the development team for help at every turn. Now if you could just make that form match your branding, it would be complete.

Great news! You can, even if you aren’t a developer.  When you first start an eForm it looks like this:

With a few lines of code pasted in, you can easily make it look like this:

With a skilled CSS developer you can get really crazy:

Steps:

1: Find the branding objects page.

Navigation: Peopletools > Portal > Branding > Branding Objects > stylesheet

2: Choose if you want to do a form wide change or form specific.

You can make a change to all of the forms in the framework by adding CSS to a style sheet called G_FRAME_CLIENT_CSS.

It is also possible to give each form its own style. You do this by adding a style sheet object with the same name as the Application Package used on the form (more on that in a bit).

If the style sheet is already in the list, click on edit. You can add a new style sheet by clicking on Upload Style Sheet Object.

The object name should match the Application Package or Framework indicator.

Not sure where to find your Application Package?

The Application Package for the form can be found by looking at the ‘Data’ tab in the Create/Update an eForm setup page. The Application Package in the example below is G_FORM_WCTEST.

Note: if your form does not yet have an Application Package, you can add one in the format G_FORM_<FORMTYPE>.

3: Add in some code

Use the text box to enter the CSS override commands. Altering the CSS is generally a task for a professional developer. However, there are a few basic lines of code that an Analyst can add to make simple changes to the form. A summary is below (proceed with caution and a sense of adventure):

Main Header

Enter a row with the following command to adjust the color of the top bar. Substitute #C81900 with the hex color of your choosing.

.task-header{background-image:none; background-color:#C81900;}

Header Title

Enter a row with the following command to adjust the color of the ‘TASK’ text in the top bar. Substitute #E5E4E2 with the hex color of your choosing.

.task-header-title {color:#E5E4E2;}

Sub Header

Enter a row with the following command to adjust the color of the subtask bar. Substitute #B6B6B4 with the hex color of your choosing.

.task-subheader { background-color:#B6B6B4 ; }

Sub Header Progress Bar

Enter a row with the following command to adjust the color of the progress bar on the right side of the subtask bar. Substitute #666362 with the hex color of your choosing.

.task-subheader-progress .bar { background-color:#666362; }

Segment Line Breaks

Enter a row with the following command to adjust the width, style and/or color of the segment line break.

Substitute 2 with a larger number for a thicker line or smaller number for a thinner line.

Substitute ‘solid’ to impact the style of the line. The default is ‘dotted’.

Substitute #B6B6B4 with the hex color of your choosing.

table.PSGROUPBOXNBO { border-top:2px solid #B6B6B4; }

Segment Header Text

Enter a row with the following command to adjust the color of the Segment Header Text. Substitute #C81900 with the hex color of your choosing.

.PSGROUPBOXLABEL { color:#C81900; }

4: Push save. Open the form and see how it turned out.

Did you know that you can log into the Gideon Taylor Hub to see other tips’n’tricks?

https://gideontaylor.com/Account

 

MENU > DOCUMENTATION > TIPS’N’TRICKS