Customizing the Riva Insight Header

Applies to Riva Insight Server 2017.4 or higher.

Audience: Riva Insight Administrators, Riva Client Engagement Team, and Riva Success Team.

Location of files referenced in this article:

• Riva Insight Cloud:
  • Theme > {datacentre}\Insight\{endpoint}\Content\themes\
  • Company Settings > {datacentre}\Insight\{endpoint}\App_Data\Config\{accountholder}\CompanySettings.xml (Riva Insight 2020.3 or higher.)
    • Note: In Riva Insight 2017.4 through 2020.2, "Company Settings" was located at {datacentre}\Insight\{endpoint}\App_Data\Config\{accountholder}\{accountholder}_CompanySettings.xml
       
• Riva Insight On-Premise:
  • Theme > {Insight Folder}\Content\themes\
  • App Settings > {Insight Folder}\App_Data\AppSettings.xml

Changing Riva Insight header logos

By default,

• in Riva Insight 2017.4 through 2021.2, the Riva Corporate and Riva Insight logos are shown in the header of Riva Insight.
• in Riva Insight 2021.3 or higher, the Riva Insight header displays no logos.

As a customer, you may request that one or both of the logos be changed to your own corporate logo or to insert your own logos if there are none. There are two images (logos) that can be replaced.

1. The primary logo (on the left);
    
2. The secondary logo (on the right).
    

Requirements:

• Logo has a landscape orientation (wider than it is tall).
   
• Logo has been resized to between 35 and 40 px high and saved as a .png file.

To change Riva Insight header logos:

Note: This procedure works in 2021.3 or higher even though be default the Riva logos aren't visible to the end users. That's because the logos still reside in the _default theme folder mentioned in the following step.

1. Create a new theme. To do so, make a copy of the "_default" theme (folder), ensuring that the name contains no spaces or special characters.
    
2. Add new logos.
   1. In the new theme, replace the primary and/or secondary logos with the new logos. (To do so, delete the old ones, and rename the new ones to header-primary.png and header-secondary.png .)
   2. Make note of the width of each logo.
   3. Calculate the % width for each logo.
      • For example, if the primary logo is 120px wide and the secondary logo is 80px wide, the percent width would be 60% and 40%.
         
3. Update the theme skin.
   1. Note: To ensure the images scale proportionately to each other, the skin file needs to be updated.
   2. Within skin.css, set the "max-width" to the % width of the logo, for example:

      .skin-header-primary {
          max-width: 60%;
          height: auto;
          width: auto\9;
      }
      
      /*Only needed if using both primary and secondary logo in HR*/
      .skin-header-secondary {
          max-width: 40%;
          height: auto;
          width: auto\9;
          float: right;
      }
      

4. Apply the theme: Go to the Settings file, and add the following key, with the value set to the theme folder name:

   		<add key="Insight.Theme.Key" value="myNewTheme" /> 

To change the Riva Insight header logo links (URLs)

The keys used to control the URL for the logos are:

1. Insight.Theme.HeaderPrimaryLink > sets the url for the Primary (left) logo.
    
2. Insight.Theme.HeaderSecondaryLink > sets the url for the Primary (left) logo.

To change the Riva Insight header logo links (URLs):

• Add the keys to the Settings file, and set the urls accordingly. For example:

  <add key="Insight.Theme.HeaderPrimaryLink" value="https://www.primarylogolink.com" />
  <add key="Insight.Theme.HeaderSecondaryLink" value="https://www.secondarylogolink.com/insight" />