Apply custom CSS stylesheet or JavaScript file on a page

You can take any of the two approaches to change the look and feel of a page in Citizen Access:

  • Directly create your own cascading style sheet (CSS) in ACA Admin. For more information, see Define your own CSS style.

  • Create and apply custom CSS stylesheet files and JavaScript files to pages in Citizen Access. You can apply a custom CSS stylesheet or JavaScript file to either a single page or every page in Citizen Access.

To apply a custom CSS stylesheet or JavaScript file to a web page

  1. Add the standard choice value ENABLE_CUSTOMIZATION_PER_PAGE in the standard choice ACA_CONFIGS to enable the feature. You must set the value description to Yes.

  2. Get the aspx file name of the target web page.

    1. Right-click on the target web page

    2. Select Properties in the popup menu and get the address (URL) of the web page.

      The address (URL) of the web page contains the aspx file name. For example, if the address is http://@ACA_SERVER@:@ACA_SERVER_PORT@/Account/welcome.aspx, the aspx file name is welcome.aspx.

  3. Change the file name of the custom CSS stylesheet or JavaScript file, so that the file name is identical as that of the aspx file of the target web page.

    For example, because the aspx file name for the welcome page is welcome.aspx, the custom CSS stylesheet for the page shall be welcome.css, and the custom JavaScript file shall be welcome.js.

    The aspx file name for the record home page is cap\caphome.aspx (which means that the file caphome.aspx file locates in the cap sub folder), the custom CSS stylesheet for the page shall be caphome.css, and the custom JavaScript file shall be caphome.js.

    Note: If the Citizen Access website is internationalized, in addition to the stylesheet or JavaScript file that can be commonly applied, you can create custom CSS stylesheet and JavaScript files that apply to a specific language. You need to add the language code as the suffix for the file name. For example, besides the welcome.css and welcome.js which can be commonly applied, you can create welcome-ar-AE.css, welcome-en-US.css, welcome-ar-AE.js, and welcome-en-US.js.

  4. Go to the folder where you installed Citizen Access, create a customization folder and then an agency name folder in the customization folder. For example, if the customization folder name is Customization, the agency name folder locates at [ACA Application]\Customization\agency name.

  5. If the customization folder name is Customization, you can skip this step. Otherwise, open the web.config file under the Citizen Access website root folder, and add a “CustomizationDirectory” key in the <appSettings> section with the value being the actual customization folder name, for example, MyCustomization.

    <appSettings>

    ……

    <add key="CustomizationDirectory" value="MyCustomization"/>

    ……

    </appSettings>

  6. If the aspx file of the target web page locates in a sub folder, you shall further create a sub folder of the same name in the <agency name> folder for storing the custom page. For example, because Cap is the directory that stores the original caphome.aspx file, the folder to store the custom page shall be [ACA Application]\Customization\<agency name>\Cap.

  7. Copy the custom CSS stylesheet or JavaScript file into the customization folder.

    For example, if the file path of the original caphome.aspx file is:

    • D:\ACAProject\aca_trunk_new\Web\Cap

    You can copy the custom file to the following location (assuming the agency name is Test_Agency):

    • D:\ACAProject\aca_trunk_new\Web\Customization\Test_Agency\Cap

  8. Clear cache in ACA Admin. Remember to clear cache every time after you add or delete a custom CSS stylesheet file or JavaScript file.