Form CSS reference

This section details some of the styles used by forms pages that are commonly changed when rebranding or adjusting the format for an HCM or Recruit form.

Screenshot: annotated to show CSS styles and the page areas they affect

Color scheme

Style Notes CSS
Logo

By default, the company logo is displayed in the top left of each form page. The logo is controlled by the .formTitle class.

In your CSS file, find the class .formTitle. This has a background-image attribute:

 
.formTitle {
    height: 100%;
    width: 100%;
    text-align: right;
    display: table-cell;
    vertical-align: right;
    font-size: 100%;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    background-image: url('/resource/CompanyLogo');
    background-repeat: no-repeat;
    background-position: 0px 0px;
   }
Body background

The body background color is used behind the main form question table, header and borders. This color surrounds the main form page content.

Change the background-color attribute in the body class.

 
body {
    background-color: #FCFF33;
    font-family: 'Verdana', sans-serif;
    font-size: 75%;
    margin: 0;
}
Form header

The form header is the area at the top of every form page that displays the logo, the form title, and the subtitle. The div.formTitleBlock class defines the text color and the background color for this area.

Change the color attribute to adjust the text color for the form title and subtitle.

Change the background-color attribute to change the background color of the header.

 
div.formTitleBlock {
    height: 115px;
    color: #3355FF;
    background-color: #FC33FF;
    margin: 0;
    display: table;
    width: 100%;
}
Navigation areas

The navigation areas are at the top and bottom of each form question page, and contain the navigation buttons.

Change the background-color attribute in the .pbHeader class to adjust the color of the top navigation border.

Change the background-color attribute in the div.secondaryPalette class to adjust the bottom navigation border.

 
.pbHeader {
    padding-top: 4px;
    background-color: #D8FE00;
    border-bottom: 1px solid #FFFFF;
    margin: 0px 2px 0px 0px;
    padding-bottom: 2px;
    font-family: "Verdana",sans-serif;
}
 
div.secondaryPalette {
    background-color: #f5f5f5;
    border:1px solid #D89828;
    border-top: 2px solid #D89828;
}
Question area background color Change the background-color attribute in the div.pbBody class to adjust the background color of the main question area. 
div.pbBody {
    padding: 10px;
    color: #00000;
    background-color: #ff0000;
}
Question page title color The div.pageTitle class defines the color of the title that is shown at the top of each page. Change the color attribute to adjust the color. 
div.pageTitle {
    font-size: 150%;
    font-weight: bold;
    color: #B46CFC;
}
Button colors Change the background-color attribute in the input.pageButton, input.pageButtonDisabled, and input.pageButton:hover classes to change the appearance of the navigation buttons: 
input.pageButton, input.pageButtonDisabled {
    background-color: #D89828;
    padding: 7px 30px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
input.pageButtonDisabled {
    background-color: #00529F;
    cursor: auto;
}
input.pageButton:hover {
    background-color: #00529F;
}
Page footer Change the background-color attribute in the .mainPageDiv class to adjust the color of the page footer. This is where any page post text is displayed. 
.mainPageDiv {
    position: static;
    margin: 0 auto;
    width: 100%;
    background-color: #FC33FF;
}
Margin borders

The margin borders surround the question and navigation areas.

Change the border-top attribute in the div.secondaryPalette class to adjust the border above the upper button bar and below lower button bar.

Change the border attribute in the div.secondaryPalette class to adjust the border above the page footer and vertically on each side of the question and navigation areas.

Change the border-bottom attribute in the .pbHeader class to adjust the border below the upper button bar.

Change the border-top attribute in the div.pbBottomButtons class to adjust the border above the lower button bar.

 

 

 
div.secondaryPalette {
   background-color: #f5f5f5;
    border:1px solid #D89828;
    border-top: 2px solid #D89828;
}
 
.pbHeader {
    padding-top: 4px;
    background-color: #66ffcc;
    border-bottom: 1px solid #00000;
    margin: 0px 2px 0px 0px;
    padding-bottom: 2px;
    font-family: "Verdana",sans-serif;
}
 
div.pbBottomButtons {
    border-top: 2px solid #009999;
    padding: 10px;
    background-color: #3366ff;
}