Customizing Smart Reporting images and browser CSS

Remedy Smart Reporting(Smart Reporting) uses style sheets to control the look and feel of various aspects of the product. The main file used when restyling Smart Reporting content is ie.css. Smaller CSS files are used for specific functions or pages.

Additionally, many images are used throughout Smart Reporting to control the look and feel of various menus and results. You can customize these images with image editing software. (If you do not have image editing software, you can use free tools, including GIMP and Paint.NET.)

Within the SmartReportingInstallDir\appserver\webapps\ROOT directory, you can store your customized image and CSS files in following custom subdirectories so that these files are used in place of the original files:

• customcss
• customimages

When Smart Reporting is updated, these custom directories are not modified.

Before you begin

Before you make any changes, create a backup of the entire ROOT directory so that you can restore your styling back to the default state if necessary.

Browser developer tools for modifying CSS

Generally, when heavily restyling Smart Reporting, use the browser's developer tools. Then, you can investigate elements on a page—testing possible changes before any styles sheets are changed. The following table describes how to access developer tools in common browsers.

Browser	Page Instructions	Menu Instructions
Chrome	Right-click anywhere on the page and select Inspect Element.	Navigate to Settings > Tools > Developer tools.
Firefox	Right-click anywhere on the page and select Inspect Element.	Navigate to Firefox Menu > Web Developer > Inspect.
IE	Press F12.	Click on the Tools menu and select developer tools.
Opera	Right-click anywhere on the page and select Inspect Element.	Navigate to Opera > Page > Developer Tools > Opera Dragonfly.
Safari	Right-click anywhere on the page and select Inspect Element.	Navigate to Display > Develop > Show Web Inspector. Note: You must first enable this in Settings > Preferences > Advanced > Show Develop menu in menu bar.

To replace Smart Reporting default images with custom images

1. Make the required changes to the image files.
2. Save your changes to the reportingInstallDir\appserver\webapps\ROOT\customimages directory, ensuring the file maintains the same name and type.
3. Clear your browser cache.
4. Reload the affected page and review.

To customize the CSS for Smart Reporting

1. Make the required changes to the CSS files.

2. Save the files to the reportingInstallDir\appserver\webapps\ROOT\customcss directory.

   Warning

   Note

   The replacement files you store in the customcss directory do not need the same name as the original. As long as they have the correct class names, Smart Reporting will use them. For efficiency, you can condense all your custom styling in one CSS file that contains only items you have customized.

3. Clear your browser cache.
4. Reload the affected page and review.