Example of using CSS to change the look and feel of forms

to:

To change the look and feel of AR System forms

1. Create a CSS file.

   For information about how to create a CSS file, see To create the CSS file.

   A sample CSS file (flat.css) is available as an attachment on this page. Click here to preview and download the file.

2. Save the CSS file in the <midTierInstallDirectory>/resources/standard/stylesheets folder.
3. Open a form in Developer Studio. Update the Web Header Content property of the View property as follows:
   “<link rel="stylesheet" href="../../../../resources/stylesheets/flat.css">” 
4. Perform Mid Tier sync cache.
5. To apply the CSS to other forms, repeat step 3 for each form.
6. To verify, view the form in a browser and check the web inspector.
   

To create the CSS file

1. Test the changes that you are likely to make using the web inspector. Perform the following:
   1. Open any AR form in a browser, right-click on the field that you want to inspect and click Inspect Element. The web inspector opens.
      
   2. To apply the style, edit the web inspector rules. For example, you might want to change the background color of a field to Blue as shown in the following image:
      
   3. To make the change more generic, apply the style to other selectors. Use the Rules panel to decide whether to apply the changes to a selective group of form elements or to a generic group of elements.
   4. To verify that your changes are generic and can work on all the fields, create a form, add field types with variations such as Disabled, Enabled, and Read-Only on the form and see whether the style change affects all the fields.

   5. In case of a Button field, you might want to apply a style only to all buttons with entry fields and not to other regular buttons available on the form. To make the change specific to certain types of fields, identify the field’s parent div class and apply the style. For example, change the button next to the entry field, edit the button, and change the background color.
      
      
      However, changing the entry field button property also changes the background color of the other regular buttons on the form. To overcome this, identify that all the entry fields have a parent div with class df (Data Field) and change the style: 
      
      a.btn
      to
      div.df a.btn

      The style is applied only to the entry type button fields and not to the regular buttons.

2. Cut and paste the style in a style editor. Perform the following:
   1. Open any CSS Editor of your choice.
   2. Cut and paste the style to the editor including the selector.

   3. The final style for entry fields and its associated edit button should look as follows:

           div.df textarea.text:not(.dat),  div.df input.text:not(.dat),  div.df a.btn,  div.df a.btn3d,  div.df a.menu{
             border-width: 0px;
             background: rgb(234, 243, 251);
             border: 1px solid rgb(221,237,249);
             color:black;
          }
3. Optionally, if you have a specific field such as the Search button (with the shared field ID across multiple forms) for which you want to apply the style. You can use the fieldid class selector and apply the CSS style name to individual form elements such as button, table, and so on. 

In this example, the style is applied to the field with field id 1002. For each field you created within Dev Studio, there should be a unique class selector with prefix arfid to uniquely identify the field.