Client Site Branding

Owned by Becky Weinberg (Unlicensed)
Last updated: Jul 05, 2023 by Nancy Cohn (Deactivated)
2 min read

You can customize the look and feel of Eagle Portal by using your client’s company logo, fonts, and color schemes for branding. Since customization is different for every client, the following sections describe some use cases and best practices to use as guidelines when customizing your Portal. You use the following files when working with branding and customization:

  • Site.css

  • Default.aspx

  • Eagle.xml

  • Web.config

Before you begin, review your client’s current Eagle Portal customizations. Also, make sure you have access to where Portal is installed, since the files you work with are located there. Always back up existing files before making any changes. A backup file allows you to revert back to Eagle Portal in its initial state if necessary. A good practice when backing up a file is to rename the original file to *.bakmmddyy and use the proper name for the copied file. For example, if you want to make changes to Default.aspx, make a copy of it and name it Default.aspxbakmmddyy. Name the new file you are working with Default.aspx. Do not give the new file a different name such as Default_edited.aspx,) because Eagle Portal requires correctly named files in order to work. Finally, document all the changes you are making for your client in a separate document. 

The procedures in the following sections describe how to use your client’s company logo and color scheme. Before doing this, you must copy and rename the Eagle Portal folder that contains the themes, <Portal install directory>/Web/App_themes/.

  1. Copy the existing Default folder from <Portal install directory>/Web/App_themes/.
    This folder contains 3 types of files: Images in the Images subfolder, http://ASP.NET skin files and CSS (Cascading Style Sheet). The main CSS for Eagle Portal is site.css, which contains the default settings for fonts, colors and logos.

  2. Rename the copied folder to reflect the name of the theme you are creating. Once you create the new theme, the changes are not overwritten in the next upgrade.

To see which CSS file to change, use the Microsoft Internet Explorers F12 developer tool or the Firefox developer tool. These tools help you identify the CSS element, and what it is controlled by. The following examples describe how to use the Microsoft Internet Explorers F12 developer tool to identify the elements.

In this section