Change Your Page Logos and Site Theme

• About the Page Logo

• Change the Logo

  • Results Page Logo

  • Index Page Logo

• Page Theme

  • Example: Primary Color Change

 

About the Page Logo

• The logo that appears on your search page (Index.html), landing page (Landing.html), and results page (Results.html) can be changed.
• Most users prefer to use a custom, corporate logo on their search and results pages.
• A custom logo can give your results page a polished, professional look, and assure users of your SmartHub instance that they are searching internal, corporate-approved data sources.

Change the Logo

Results Page Logo

• The Results page - Results.html - is shown below.

• The page contains a logo in the top left corner.

• This logo is the file is logo.png in the SmartHub image directory: <SmartHub-install-folder>\image

UI Editor

The easiest and fastest way to change the logo is via the SmartHub UI Editor.

For information about how to access the UI Editor as well as who can access it, see Use the UI Editor.

1. SmartHub administrators can simply click the UI Editor link from the SmartHub ADMINISTRATION page.

2. Click the Select a page link from the top menu.

3. Select (double-click) the page (Index.html, Results.html, landing.html, etc.) you wish to modify.

   1. BA Insight recommends you create your own custom page and folder to modify. Leave the default files as templates.

      • Example: MyResultsPage.html

      • See Create Custom Pages.

4. Select the Brand the page link from the top of the page.

5. Select the gear icon next to the Logo ("Smart Search")

6. Change the logo by updating the path to the new logo in the Logo Source field.
   Note: The default image directory is <SmartHub-install-folder>\image

7. Ensure that your SmartHub site is being loaded by IIS.

Index Page Logo

• The Index page - Index.html - is shown below.

• The page contains a logo in the top left corner.

• This logo is the file is logo_white.png in the SmartHub image directory: <SmartHub-install-folder>\image

UI Editor

The easiest and fastest way to change the logo is via the SmartHub UI Editor.

For information about how to access the UI Editor as well as who can access it, see Use the UI Editor.

1. SmartHub administrators can simply click the UI Editor link from the SmartHub ADMINISTRATION page.

2. Click the Select a page link from the top menu.

3. Select (double-click) the page (Index.html, Results.html, landing.html, etc.) you wish to modify.

   1. Below, the Results.html page is shown for sample purposes.

   2. BA Insight recommends you create your own custom page and folder to modify. Leave the default files as templates.

      • Example: MyResultsPage.html

      • See Create Custom Pages.

4. Select the Brand the page link from the top of the page.

5. Select the gear icon next to the Logo ("Smart Search")

6. Change the logo by updating the path to the new logo as you see desire.
   Note: The default image directory is <SmartHub-install-folder>\image

7. Click Apply.

8. Click Save changes.

Page Theme

The color scheme used on your pages can be modified.

1. Open the UI Editor. SmartHub administrators can simply click the UI Editor link from the SmartHub ADMINISTRATION page.

2. Click the Select a page link from the top menu.

3. Select (double-click) the page (Index.html, Results.html, landing.html, etc.) you wish to modify.

   1. Below, the Results.html page is shown for sample purposes.

   2. BA Insight recommends you create your own custom page and folder to modify. Leave the default files as templates.

      • Example: MyResultsPage.html

      • See Create Custom Pages.

4. Select the Brand the page link from the top of the page.

5. Select Color customizations from the left side navigation.
   

6. The Customize colors palette opens.
   

7. Select the colors as you see fit.

8. Click Apply.

9. Click Save changes.

10. The changes are instantly reflected in the page on the screen.

    Advanced: You have even more power over your color scheme by switching to Advanced mode and selecting Advanced css edit.
    
    

Example: Primary Color Change

To change the primary color of the main visual objects in your SmartHub Results page, use the following steps:

1. Follow the steps above in the topic "Page Theme" to access your Customize colors palette.

2. In this example, we use the Results page, but you can select any page you desire.

3. Change the Primary Color to a different color, as you desire.

4. Click Apply.

5. Click Save changes.

6. The new page appears.

7. Note the new colors of the objects on the page.