Customizing UI Visual Styles and Icons

PTC Arbortext Content Delivery Customization > Customizing the PTC Arbortext Content Delivery User Interface > Customizing UI Visual Styles and Icons

ThePTC Arbortext Content Delivery client provides multiple mechanisms for injecting custom CSS styling into the user interface.

The available methods are:

• #./AlwaysLoadASingleFileThroughClientS-7CDBBEF2

• #./AlwaysLoadMultipleFilesThroughClien-7CDBFF8B

• #./DynamicallyLoadASingleFileThroughSe-7CDBFA28

For any of these cases, first create folders for the custom files and place them appropriately:

• <WT_HOME>/codebase.war/delivery/custom/app/style/css

• <WT_HOME>/codebase.war/delivery/custom/app/style/images

Always Load a Single File through Client Side Customization

Add code to the following function in customizations.js to set the custom file’s name.

module.config(function (ptcThemeConfigProvider) {
ptcThemeConfigProvider.setThemeName(“myCustomFile”);
});

Always Load Multiple Files through Client Side Customization

Place any number of ptcTheme directives inside index.jsp.Each directive must be inside a separate style tag.

Dynamically Load a Single File through Server Side Customization

1. Create a custom delegate that implements thecom.ptc.sc.services.plugins.ThemeDelegateinterface. This interface contains a single method to return aFileDataSourceJava object for the custom CSS file:FileDataSource getThemeContent(Map<String, String> queryOptions) throws Exception;

2. Compile and register the custom delegate as described inCreating Custom Delegates on the Server.

3. Once registered, the contents of the custom CSS file is embedded into the<body>element of thePTC Arbortext Content Delivery pages allowing them to be referred to in custom templates.

Displaying Icons for New Information Element Types

If new Information Elements types are loaded that are not part of the OOTB types, new icons for these can be placed in the custom images directory and referred to in a custom CSS file as described above. The CSS rule needs to be of the form below where<docType>matches the definition of that type as configured for the Transform and Load (TAL) of the data from the published bundles from the authoring system.

.equivalence-thumbnail.<docType>Icon {
background-image: url(“<URL to image>”);
}

A few examples of OOTB IE types have the following CSS rules (defined in<WT_HOME>/codebase.war/delivery/app/style/css/servicecenter.css)

.equivalence-thumbnail.PDFIcon
.equivalence-thumbnail.publicationsIcon
.equivalence-thumbnail.procedureIcon