Using CSS with Forms
  • Updated on 07 Feb 2017
  • 14 minutes to read
  • Print
  • Dark
    Light

Using CSS with Forms

  • Print
  • Dark
    Light

There are two ways to use CSS in Decisions. Existing CSS documents can be uploaded and the custom-defined classes can be mapped to each form component. The other method is to carefully craft your CSS document using the pre-defined classes of Decisions, which will be automatically mapped to their respective form components.

CSS files can be used to change the appearance of forms and form controls by simply uploading your custom CSS file and selecting it in the form designer.

Upload CSS Document: Path: System/Designer/CSS.

Note: For more information on how to upload a CSS file, please refer to  https://documentation.decisions.com/css-styling-form-controls/ .

Example 1: Custom-defined classes

In this example, we will be using this custom-defined classes in our style sheet.

 .Background_offwhite {
        background-color: #f6f6f3;
}
.title_label {
text-align: center;
color: black;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
text-shadow: 2px 1px #D3D3D3 ;
}
.input_fields {
font-size: 12px;
color: red;
background-color: lightyellow;
}
.button1 {
        background-color: #3898DC; /* blue */
        border: none;
        color: white;
        padding: 0px;
        text-align: center;
text-transform: uppercase;
        font-family: chiller;
        display: inline-block;
        font-size: 22px;
font-weight: bold;
text-shadow: 2px 1px #000000;
}
.button2 {
background-color: orange;
        border: none;
        color: black;
        padding: 0px;
        text-align: center;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
        text-decoration: none;
        font-size: 12px;
font-weight: bold;
        text-shadow: 2px 1px #FFFFFF;
}

Once the CSS file is uploaded in the Studio , open up the Form Designer and navigate to Properties > Style and check the box of the CSS file to be used.
2018-02-05_091324.png

The CSS file is now available to use on any form component. By default, the custom-defined classes are not mapped to any components. To map a form component to a class, click on the component and expand the View section under Properties . Under Css Class , use the drop down menu to map the custom class to the form component.
2018-02-05_091456.png

Repeat this process for each form component that will be modified by the CSS file. When the form is run in a flow, the components that are assigned a Css Class will be modified.
2018-02-05_092154.png{height ="668" width="794"}
[

](http://documentation.decisions.com/wp-content/uploads/2017/02/Custom-Defined-Class-Form.png) We see that each component of the form has been modified by it's own unique custom-defined class.

Example 2: Pre-defined classes from Decisions

In this next example, we will be using a style sheet that utilizes the pre-defined classes from Decisions.

 /* form background */
.form-surface-view, .form-surface-view form, .form-surface-view .SilverGrid 
{
        background: #BDBDBD;
}

/* default text styles */
.form-surface-view, .form-surface-view .silverLabel, .form-surface-view input[type="password"], .form-surface-view .Combo-list-sub ul li, .form-surface-view .SilverButtonStyle button, .form-surface-view a.MultiFileUpload 
{
        font-family: arial, helvetica, sans-serif;
        font-size: 28px;
        font-weight: bold;
        color: #2D79B0;
}

.form-surface-view input[type="text"] 
{
        font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: red;
}

.form-surface-view .silverLabel 
{
        line-height: 20px;
}

.form-surface-view .silverLabel
{
        border: 20px solid black;
    border-radius: 0px;    
   padding: 5px 10px 5px 10px;
    background : #000000;
    color: #2aa4eb; 
    font-family: arial, helvetica, sans-serif;
    font-size:40px;
   Text-align : center;
text-transform: uppercase;
font-weight: bold;
}

/* buttons */
.form-surface-view .SilverButtonStyle button 
{
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        color: #FFFFFF;
        background: #2aa4eb;
        border: 1px solid #2aa4eb;
}

.form-surface-view .SilverButtonStyle button:hover 
{
        cursor: pointer;
        color: #2aa4eb;
        background: #FFFFFF;
        border: 1px solid #2aa4eb;
}

/* fields borders */
.form-surface-view input[type="text"], .form-surface-view input[type="password"], .form-surface-view .cke_chrome, .form-surface-view .commondropdown 
{ /* fields borders */
        border: 1px solid #b0b0b0;
}

/* hover fields */
.form-surface-view input[type="text"]:hover, .form-surface-view input[type="password"]:hover, .form-surface-view .cke_chrome:hover, .form-surface-view .commondropdown:hover 
{
        border: 1px solid #2aa4eb;
}

CSS files with the pre-defined classes are also applied in the form Properties > Style by checking the box next to the CSS file.

The CSS classes are automatically matched up to the components by default so there is no need to set the class for each component.
2018-02-05_092520.png

When the form is run in a flow, we see the CSS classes have been assigned to the correct components.

2018-02-05_093734.png

Pre-defined classes in Decisions

Listed below are the pre-defined CSS classes available when designing a CSS file to modify a form.

 /* 1.  Label:
       Change border width by 1px and color to green, curve corner border by 10px, padding to increase space inside label, background color to white, text color to blue, font family to Times New Roman, text size to 14px, align text in center. */

.MyLabel
{
        border: 1px solid green;
    Border-radius: 10px;    
   padding: 5px 10px 5px 10px;
    Background : white;
    color: blue; 
    font-family: times new roman;
    font-size: 14px;
   text-align: center;
}

/* OR */

.form-surface-view .silverLabel
{
    border: 1px solid green;
    Border-radius: 10px;    
    padding: 5px 10px 5px 10px;
    background: White;
   color: blue; 
    font-family: times new roman;
    font-size: 14px;
   Text-align: center;
}



/* 2. Button:
Curve corner border by 10px, text to bold, background-color to aqua, font color to black, change border width by 1px , solid and color to yellow, font-size set the size to text, increase transparent by 0.5. */

.MyButton
{
    border-radius: 10px;
    font-weight: bold;
    background-color: aqua;     
   color: black;
    border: 1px solid yellow;   
    font-style: italic;
    font-size: 14px;
    opacity: 0.5;
}


/* .MyButton:hover - To change background-color to light yellow and text to blue color. */

.MyButton:hover
{
        background-color: #ffffcc; /*light yellow*/
     color: blue;
}

/* OR */

.form-surface-view .buttonControl
{
    border-radius: 10px;
    font-weight: bold;
    background-color: aqua;     
    color: black;
    border: 1px solid yellow;   
    font-style: italic;
    font-size: 14px;
    opacity: 0.5;
}

.form-surface-view .buttonControl:hover
{     
    background-color: #ffffcc; /*light yellow*/
    color: blue;
} 



/* 3. Close Button:
 Change border to width by 1px solid color to black, background to red, font-style to italic, font to bold,  font-family to Times New Roman, Text color to white, curve border corner by 10px. */

.MyCloseButton
{
border: 1px solid black;
    background: red !important;
font-style: italic;
font-weight: bold;
font-family: times new roman;
    color: white;
border-radius: 10px;
}

/* OR */

.form-surface-view .SilverButtonStyle input[type="button"]
{
        border: 1px solid black;
    background: red !important;
font-style: italic;
font-weight: bold;
font-family: times new roman;
    color: white;
border-radius: 10px;
}



/* 4. Link Button:
Change  background color to light blue, font style to normal, font to bold, font color to black, underline to text,height to 25px, width to 100px. */

.MyLinkButton
{
    background: #99ccff; /*Light Blue*/
font-style: normal;
font-weight: bold;
color: black;
   text-decoration: underline;
   height: 25px;
   width: 100px;
}

/* OR */

.form-surface-view .SilverHyperLinkButtonStyle .buttonControl
{
    background: #99ccff; /*Light Blue*/
font-style: normal;
font-weight: bold;
color: black;
   text-decoration: underline;
   height: 25px;
   width: 100px;
}



/* 5. Image Button:
        Place the image in button background of specified Url, Height 163 px and Width: 300px and background image will not repeat, curve corner border by 10px. */

.MyImage
{
        background-repeat: no-repeat;
        width: 300px;
        height: 163px;
        border: 2px solid black;
        border-radius: 10px;
}

/* OR */

.form-surface-view img
{
        background-repeat: no-repeat;
        width: 300px;
        height: 163px;
        border: 2px solid black;
        border-radius: 10px;
}



/* 6. Navigation Tree: 
        MyNavigationTree: Curve corner border by 5px, border width to 2px solid, and color to black. */

.MyNavigationTree
{
        border-radius: 5px;
    border: 2px solid black; 
}

/* OR */

.form-surface-view .Commonscroll
{
  border-radius: 5px;
  border: 2px solid black; 
}


/* MyNavigationText: font family to Times New Roman, font size to 14px, font style to normal. */

.MyNavigationText
{
        font-family: times new roman; 
        font-size: 14px;
        font-style: normal;
}

/* OR */

.form-surface-view .jstree-no-icons li
{
        font-family: times new roman; 
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: black;
}


/* MyNavigationText : Hover 
      Increase font size to 16px, font style to bold , font family to Arial. */

.MyNavigationText:hover
{
    font-size: 16px;
    font-style: bold;
    font-family: arial;
}

/* OR */

.form-surface-view .jstree-no-icons .jstree-leaf :hover
{
    font-size: 15px;
font-weight: bold;
}



/* 7. Tag Editor :
.MyTagEditorControlCss: Change Border width to 2px solid and green color, font family to Times New Roman, font size to 14px, background color to white and text to black. */

.MyTagEditorControlCss
{
    border: 2px solid green;
    font-family: times new roman;
    font-size: 14px;
    background-color: white;
    color: black;  
}

/* OR */

.form-surface-view .compactTagView
{
    border: 2px solid green;
    font-family: times new roman;
    font-size: 14px;
    background-color: white;
    color: black;  
}

/* .MyTagEditorTextBoxCss - Change background color to little yellow, text color to black, size to 16px, font style to normal, font family to Times New Roman, font to bold. */

.MyTagEditorTextBoxCss
{
    background-color: #ffffe6;/*light yellow*/
    color: black;
    font-size: 16px;
    font-style: normal;
   font-family: times new roman;
   font-weight: bold;
}

/* OR */

.form-surface-view .blinktext 
{
    background-color: #ffffe6;/*light yellow*/
    color: black;
    font-size: 16px;
    font-style: normal;
   font-family: times new roman;
   font-weight: bold;
}


/* .MyTagEditorButtonCss - Change border width by 1px  solid and color to blue, background color to grey, text size to 14px, text color to black, curve corner border by 3px. */

.MyTagEditorButtonCss
{
    border: 1px solid blue;
    background-color: grey;
    color: black;
    font-size: 14px;
    border-radius: 3px;
}

/* OR */

.form-surface-view .compact-tag-view-drop-down-arrow
{
    border: 1px solid blue;
    background-color: grey;
    color: black;
    font-size: 14px;
    border-radius: 3px;
}


/* .MyTagEditorDropDownListCss - Change border width to 1px solid & black color, font style Times New Romen, font size to 16px, font to bold. */

.MyTagEditorDropDownListCss
{
        border: 1px solid black;
   font-family: times new roman;
  font-size: 14px;
font-weight: bold;
}

/* OR */

.form-surface-view .compactTagSuggestions
{
border: 1px solid black;
   font-family: times new roman;
  font-size: 14px;
        font-weight: bold;
}



/* 8. Approval Chain Editor:
   MyApprovalChainEditor  CSS to change border width to 1px & black, background color to green, text color to white, text size to 16px. */

.MyApprovalChainEditorButton
{
   border: 1px groove black;
    background-color: green;
  color: white;
  font-size: 16px;
        font-style: normal;
}

/* .MyApprovalChainEditorAdvanceLink - Change text size to 14px, text style to italic, text family to serif, underline the text, text color to grey. */

.MyApprovalChainEditorAdvanceLink
{
font-size: 14px;
  font-style: italic;
    font-family: serif;
    text-decoration: underline;
        color: grey;
}

/* OR */

.form-surface-view .SilverHyperlinkButtonadvance
{
        font-size: 14px;
  font-style: italic;
    font-family: serif;
    text-decoration: underline;
    color: grey;
}



/* .MyApprovalChainEditorList - Change font family to Courier New, background color to light pink, Add spacing inside list of 3px, add space left side outside component.
Add space of 25px to left side of list. */

.MyApprovalChainEditorList
{
        font-family: courier new;
background-color: #ffe5e5;   
     padding: 3px;
    margin-left: 25px;
}

/* OR */

.form-surface-view .Approval-list
{
        font-family: courier new;
background-color: #ffe5e5;   
     padding: 3px;
    margin-left: 25px;
}


/* .MyApprovalChainDropDownButton - Change background color to orange, text size to 14px. */

.MyApprovalChainDropDownButton
{
        background-color: orange;
    font-size: 14px;
}

/* OR */

.form-surface-view .common-dropdown-Arrow
{
        background-color: orange;
    font-size: 14px;
}



/* .MyApprovalChainDropDownList - Change background to white color, text size to 18px, text style to italic, cursor to pointer, text color to aqua. */

.MyApprovalChainDropDownList
{
        background-color: white;
    font-size: 18px;
    font-style: italic; 
   cursor: pointer;
    color: aqua;
}

/* OR */

.form-surface-view .Combo-list-sub
{
        background-color: white;
    font-size: 18px;
    font-style: italic; 
    cursor: pointer;
    color: aqua;
}

/* .MyApprovalChainDropDownTextBox - To change background color to light blue, text color to black, text size to 18px, text style to normal. */

.MyApprovalChainDropDownTextBox
{
        background-color: #6da0f2;
    color: black;
    font-size: 18px;
    font-style: normal;     
}

/* OR */

.form-surface-view .common-dropdown label
{
        background-color: #6da0f2;
    color: black;
    font-size: 14px;
    font-style: normal; 
}



/* 9. Text Box:
    MyTextbox CSS to change border to none, background color to white, text color to black, text size 14px, add light blue shadow to sides of textbox. */

.MyTextbox
{
        border: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-style: normal;    
    box-shadow: 0 0 7px #198be5;
}

/* OR */

.form-surface-view .silvertextbox input
{
        border: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-style: normal;    
    box-shadow: 0 0 7px #198be5;
}



/* 10. Password Text Box:
      Change border width to 2px and color to light yellow, curve corner border by 7px, background color to orange, add light blue box shadow at sides. */

.MyPasswordTextbox
{
        border: 2px groove #ffffcc; /*light Yellow*/
border-radius: 7px;
background-color: orange;
box-shadow: 0 0 10px #198be5;
}

/* OR */

.form-surface-view .password-box
{
        border: 2px groove #ffffcc; /*light Yellow*/
border-radius: 7px;
background-color: orange;
box-shadow: 0 0 10px #198be5;
}



/* 11. Masked Text Box:
     Change curve corner border by 10px, text family to Times New Roman,text size to 14px, width to 250px. */

.MyMaskedTextbox
{
        border-radius: 10px;
    font-family: times new roman;
    font-size: 14px;    
   width: 250px;
}

/* OR */

.form-surface-view .passwordBox
{
        border-radius: 10px;
    font-family: times new roman;
    font-size: 14px;    
    width: 250px;
}



/* 12. DatePicker:
     MyDatePicker CSS to change border width to 1px and  color to light yellow, curve corner border by 12px. */

.MyDatePicker
{
        border: 1px solid #ffffcc;
    Border-radius: 12px;
}

/* OR */

.form-surface-view .calendar
{
        border: 1px solid #ffffcc; /*light yellow*/
    border-radius: 12px;
}

/* .MyDatePickerTextbox - Change text color to blue, text size to 16px, text style to normal, width to 125px. */

.MyDatePickerTextbox
{
        color: #6666ff; 
    font-size: 16px;
    font-style: normal;
    width: 125px;
}

/* OR */

.form-surface-view .datePickerInput
{
        color: #6666ff;
    font-size: 16px;
    font-style: normal;
    width: 125px;
}

/* .MyDatePickerButton - To change border width to 1px solid and color to black, curve the border by 5px. */
.MyDatePickerButton
{
        border: 1px solid black;
border-radius: 2px;
}

/* OR */

.form-surface-view .silverdatePickerIcon
{
        border: 1px solid black;
border-radius: 2px;
}



/* 13. Radio Button List:
     Curve corner border by 12px, add space between radio button by 5px, add space outside radio button, and background color to yellow. */

.MyRadioButtonList
{
        border-radius: 12px;
    margin-bottom: 6px;
padding: 5px;  
    background-color: yellow;
}

/* OR */

.form-surface-view .SilverRadioButtonsControl
{
        border-radius: 12px;
    margin-bottom: 6px;
    padding: 5px;  
    background-color: yellow;
}



/* 14. List Box:
 Change font family to Times New Roman and size to 14px, text style to normal, border width to 1px solid, curve corner border by 5px. */

.MyListBox
{
        font-family: times new roman;
    font-size: 14px;
    font-style: normal;
    border: 1px solid;
    border-radius: 5px;
}

/* OR */

.form-surface-view .SilverLinkList li
{
        font-family: times new roman;
    font-size: 14px;
    font-style: normal;
    border: 1px solid;
    border-radius: 5px;
}



/* 15. Drop Down List:
      .MyDropDownListControl: Change border width to 1px solid and color to black, curve corner border by 5px. */

.MyDropDownListControl 
{
        border: 1px solid black;
    border-radius: 5px;
}

/* OR */

.form-surface-view .commondropdown
{
        border: 1px solid black;
        border-radius: 5px;
}

/* MyDropDownList - Change background color to shade of green, text size to 18px, text style to normal, change cursor icon to pointer, text color to aqua. */
 
.MyDropDownList
{
        background-color: #ccffcc;
  font-size: 18px;
  font-style: normal; 
  cursor: pointer;
    color: aqua;
}

/* OR */

.form-surface-view .Combo-list-sub
{
        background-color: #ccffcc;
    font-size: 18px;
    font-style: normal; 
    cursor: pointer;
    color: aqua;
}


/* .MyDropDownListTextbox - To change background color to white, text color to black, text size to 14px, text style to normal, remove border and add shadow of blue color. */

.MyDropDownListTextbox
{
        border: none;
        background-color: white;
    color: black;
   font-size: 14px;
    font-style: normal;    
    box-shadow: 0 0 7px #198be5;
}

/* OR */

.form-surface-view .commondropdowninput input
{
        border: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-style: normal;
    box-shadow: 0 0 7px #198BE5;
}


/* .MyDropDownListButton - To change background color to shade of green, text color to aqua, remove border and add shadow of blue color. */
 
.MyDropDownListButton
{
        border: none;
    background-color: #ccff99;
    color: aqua;
        box-shadow: 0 0 10px #198be5;
}

OR

.form-surface-view .common-dropdown-Arrow
{
        border: none;
background-color: orange;
font-size: 14px;
}



/* 16. Check Box List:
      MyCheckboxList to change border width to 1px and color to black, curve corner border by 9px, add space two check box, text family to Courier New, text size to 14px, background color to  shade of yellow. */

.MyCheckBoxList
{
        border: 1px solid black;
border-radius: 9px;
padding: 5px;
font-family: courier new;
font-size: 14px;
background-color: #ffffcc;
}

/* OR */

.form-surface-view .SilverCheckBoxList
{
        border: 1px solid black;
border-radius: 9px;
padding: 5px;
font-family: courier new;
font-size: 14px;
background-color: #ffffcc;
}



/* 17. Link List:
   MyLinkListItem CSS to change background color to light grey, add space between two link list item. */

.MyLinkListItem
{
background-color: #e6e6e6;
        padding: 3px;
}

/* OR */

.form-surface-view .SilverLinkListItem
{
        background-color: #e6e6e6;
padding: 3px;
}

/* .MyLinkListText - Change text family to Courier New, text size to 16px, text style to normal. */

.MyLinkListText
{
        font-family: courier new;
font-size: 16px;
font-style: normal;
}

/*OR */

.form-surface-view .SilverLinkListItemText
{
        font-family: times new roman;
font-size: 16px;
font-style: normal;
}


/* .MyLinkListLinks - To change text family to Times New Roman and text size to 16px, text to Oblique. */

.MyLinkListLinks
{
        font-family: times new roman;
font-size: 16px;
font-style: oblique;
}

/* OR */

.form-surface-view .SilverLinkListItem
{
        font-family: times new roman;
font-size: 16px;
font-style: oblique;
}



/* 18. Check Box List [Sortable]:
      Curve corner border by 8px, add space between checkbox by 5px, background color to azure, add space outside list. */

.MySortableCheckBoxList
{
        border-radius: 10px;
    padding: 5px;    
    background-color: azure;
   margin: 2px;
}

/* OR */

.form-surface-view .SortableCheckBoxMain
{
        border-radius: 10px;
    padding: 5px;    
    background-color: azure;
    margin: 2px;
}



/* 19. Sub Dialog Button:
  .MySubDailogButton - To change border width to 1px and color to yellow, curve corner border by 10px, font family to Times New Roman, text size to 14px, text color to black, background color to Aqua. */

.MySubDailogButton
{
        border: 1px solid yellow;
border-radius: 10px;
font-family: times new roman;
font-size: 14px;
    color: black;
    background-color: aqua;
}

/* OR */

.form-surface-view .buttonControl
{
        border: 1px solid yellow;
    border-radius: 10px;
    font-family: times new roman;
    font-size: 14px;
    color: black;
    background-color: aqua;
}



/* 20. Sub Dialog Link:
.MySubDailogLink - To change font family to Times New Roman, text size to 14px, text color to orange. */

.MySubDailogLink
{
        font-family: times new roman;
font-size: 14px;
color: orange;
}

/* OR */

.form-surface-view .SubDataFlowLink
{
        font-family: times new roman;
font-size: 14px;
color: orange;
}

/* Add border to div by 1px solid color to black, curve corner border by 10px. */

.form-surface-view .SubDataFlowLinkContainer 
{    
        border: 1px solid black;
    border-radius: 10px;
}



/* 21. Sub Dialog Image Button:
      Change border width to 2px gloove and color to blue, curve corner border by 10px, background color to white. */
  
.MySubDailogImageButton
{
        border: 2px gloove blue;
border-radius: 10px;
background-color: white;
}

/* OR */

.form-surface-view .sdf-image-button
{
        border: 2px gloove blue;
border-radius: 10px;
background-color: white;
}
Was this article helpful?