Using CSS to customize application lists and navigation fields

You can use style sheets to customize the appearance of the Application List and navigation fields in a browser. Most of the common styles displayed in the browser are defined in midTierInstallDir\resources\standard\stylesheets\ARSystem.css. For more information about ARSystem.css for the Mid Tier, see AR-System-server-cascading-style-sheets-and-rules.

AR System server provides individual arsystem.css style sheets for the Microsoft Edge (..\resources\stylesheets\resources\ie\stylesheets) and Mozilla (..\resources\stylesheets\resources\moz\stylesheets) browsers if there are browser-specific styles to define. When you edit these style sheets, you are making changes to the entire Mid Tier, not only to a particular application. Using style sheets with a browser. Before editing style sheets, make sure that you are familiar with HTML and Cascading Style Sheet (CSS) files. An excellent background resource is the MSDN Library website (https://docs.microsoft.com/en-us/documentation/). See the sections on HTML, Dynamic HTML, and CSS Attributes. Although browser attributes are similar, they are not exactly the same. Not all attributes work with every browser.

When you open the home page in a browser, the browser automatically applies the appropriate style sheet. Users can then edit this style sheet to change fonts, colors, attributes, and so on.

Related topic

Creating-and-modifying-the-alternative-Home-Page-form

To use style sheets with application list fields for a browser

  1. Open the home page in your browser.
  2. Open the ARSystem.css style sheet for browsers in a text editor.

  3. Edit any of the attributes as needed.
    You must use the defined style classes (for example, td.FIRSTAPPNAME). You can add any available style to these classes. Make sure you use the correct syntax, adding a semicolon after an attribute, valid font families, correct color or RGB settings, and so on. Edit the font family, font size, and add a color to the style, for example:

    td.FIRSTAPPNAME {
    font-family:'Century Gothic';
    font-size:10pt;
    font-weight:bold;
    color:deeppink;
    }
  4. Save your changes.
  5. Refresh your home page in the browser.
    The new attributes you defined appear in the Application List field.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*