Customize Forms Using Custom Styles

You can customize forms using custom styles to change the style of the forms user interface.

Here we will customize a form with Data Lookup, Data Grid, Panel Form, and Button controls using custom styles.

Default Form

Customized Form

1. Create a form, and add Data Lookup, Data Grid, Panel Form, and Button controls.

2. Modify properties of the form as follows:

   1. In the Appearance tab, set the Custom Style Sheet property to WorkOrderStyles (the name of the custom style sheet).

      For example, WorkOrderStyles for style sheet located at <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/WorkOrderStyles.css.

      Note:
      - For earlier versions of the product, the location for style sheet is BPMUITemplates/Default/Themes/<ThemeName>/NextGenForms/css/custom/WorkOrderStyles.css
      - If Theme is not applied and if the style sheet name is tagged with FormCustomPath: or FormCustomThemePath:, the location is <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/WorkOrderStyle.css
      - If Theme is applied and if the style sheet name is tagged with FormCustomPath: or FormCustomThemePath:, the location is <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/Themes/<ThemeName>/css/WorkOrderStyle.css

3. In the WorkOrderStyle.css, code as follows:

   /* Changing the Background Color */

   html:not(.skd) .skfcn

   {

   background-color: black;

   }

   /* Form Header Styles */

   html:not(.skd) .skh

   {

   background-image: url(../images/Dairy-Header2.png);

   background-repeat: no-repeat;

   background-position: 20px 10px;

   height: 80px;

   }

   /* Hiding the Form Title Text*/

   html:not(.skd) .skh .sktt

   {

   display: none;

   }

   /* Controls Label Styles - Using without Custom Style Identifier as it needs to be applied to all control labels */

   html:not(.skd) .skctr .skfli

   {

   color: white;

   }

   /* Grid Styles - With Custom Style Identifier 'jobSteps' */

   html:not(.skd) .jobSteps_skctr .k-grid

   {

   border-color: rgb(128, 128, 128);

   background-color: #000;

   }

   /* Grid Header Styles */

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-header

   {

   border-color: rgb(128, 128, 128);

   background-color: #000;

   padding-right: 0 !important;

   }

   /* Grid Header Cell Styles */

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-header table th[role="columnheader"]

   {

   background-color: #000;

   }

   /* Grid Header Cell Text Styles */

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-header table th[role="columnheader"] .k-link

   {

   color: #FFF !important;

   }

   /* Grid Content Styles */

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-content

   {

   overflow: hidden !important;

   }

   /* Grid Alternate Row Styles- for even-indexed records */

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-content table tr:not(.k-alt)

   {

   background-color: #000;

   color: #FFF;

   }

   /* Grid Alternate Row Styles- for odd-indexed records */

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-content table tr.k-alt

   {

   background-color: #333;

   color: #FFF;

   }

   html:not(.skd) .jobSteps_skctr .k-grid .k-grid-content table tr.k-state-selected,

   html:not(.skd) .skbtn

   {

   background-color: rgb(0, 136, 102) !important;

   color: #FFF !important;

   }

   html:not(.skd) .skbtn:hover

   {

   background-color: #00aba9 !important;

   color: #000 !important;

   }

   /* Grid Footer Styles */

   html:not(.skd) .jobSteps_skctr [data-role="pager"]

   {

   display: none;

   }

   /* Data Lookup Styles - With Custom Style Identifier 'wo' */

   html:not(.skd) .wo_skctr .ski,

   html:not(.skd) .wo_skctr .skld

   {

   background-color: rgb(0, 136, 102) !important;

   color: #FFF !important;

   }

   html:not(.skd) .wo_skctr .skllc

   {

   display: none !important;

   visibility: hidden !important;

   }

   /* Panel Form Styles - With Custom Style Identifier 'actions' */

   /* Changing Border Color and Background Color*/

   html:not(.skd) .actions_skcw

   {

   border-color: rgb(128, 128, 128);

   background-color: rgb(29, 29, 29);

   }

   /* Changing Title Color and Style */

   html:not(.skd) .actions_skpt

   {

   color: #FFF;

   font-weight: normal;

   }