Custom Images and Colors Utilization Guide for Visual Themes

 

This Article Applies To:
Impact Edition Pro Edition Team Edition Legacy Edition


Knowing which color to use, and where, goes a long way towards creating a professional site that is visually appealing. Here's a quick rundown of the Visual Theme Custom Image and Color settings, as well as examples of the more prominent places they'll appear on your site.

Custom Images

When you're creating or modifying a Visual Theme, you’ll see a section header titled “Custom Images.” Within this section, there are five different options where you can attach a file. To add a background image or video, look for the headers titled “Inner Background” and “Outer Background.” These options will allow you to attach an image or video file. 

  • Menu Logo
    Appears within the top bar of the top left of each page (Example)
  • Inner Background
    Appears behind each page for logged in desktop users (Example)
  • Outer Background
    Appears behind body pages for non-logged in desktop users (Example)
  • Favicon
    The small image that appears in the browser bar and bookmarks (Example)
  • Report PDF Logo
    Appears within exported PDF reports (Example)

The dimensions listed in dark gray next to the Attach File button are our tried and tested recommendations for optimum image height and width. We recommend using these for the best results.

Custom Colors

Knowing which color to use, and where, goes a long way towards creating a site that is professional  and visually appealing. Here's a quick rundown of the Visual Theme Custom Image and Color settings, as well as examples of the more prominent places they'll appear on your site.

  • Site Header
    Affects the Navigation Bar
    • Background: Changes the background color of the navigation bar (Example)
    • Text/Icons: Changes the text/icon colors used in the navigation bar menus (Example)
    • Caret: Changes the color of the carets used to indicate dropdown menus (Example)
  • Dropdown and Flyout Menus
    Affects the color of the dropdown and flyout submenus for the Navigation Bar
    • Background: Changes the background color of dropdown/flyout menus (Example)
    • Menu Label: Changes the color of the text for the options (including “New” icons) in dropdown/flyout menus (Example)
    • Caret: Changes the color of the carets used to indicate flyout menus (Example)
  • Page & Table Selections
    Affects the color of numerous site navigation related labels and table headers
    • Row Background and Section Title Text: Changes the color of section title text on homepages, and Row/Label background colors on menus and feedback forms (Row Background Example)(Section Title Example)
    • Row Text: Changes the color of the text on Row/Labels using the Row Background and Section Title Text color selection (Example)
    • Button: Changes the color of buttons used in Section Title bars (Example)
  • Inner Background
    Affects the overall background of the site when a user is logged in
    • Color: Changes the color of the site background (will not be visible if using an Inner Background image) (Example)
    • Text: Changes the color of text used within the background section of the site (Example)
    • Link: Changes the color of link text used within the background section of the site (Example)
  • Outer Background
    Affects the overall background of the site on the login page
    • Color: Changes the color of the site login page background (will not be visible if using an Outer Background image) (Example)
    • Text: Changes the color of text used within the background section of the site login page (Example)
    • Link: Changes the color of link text used within the background section of the site login page (Example)
  • Miscellaneous
    Affects the colors of buttons throughout the site and links in forms and content
    • Primary Button: Changes the color of most buttons throughout the site (with a few exceptions controlled by other color selections) (Example)
    • Secondary Button: Changes the color of buttons that appear within forms and as alternate choices located near primary buttons (Example)
    • Link: Changes the color of links located within pieces of content and forms (Does NOT include feedback ticket title links) (Example)
  • Custom Colors
    Affects the colors used in visual reporting elements, and certain block styles available to select in the WYSIWYG editor (Example)

Additional Resources

  • For general Visual Theme information, example templates, and additional resources click Here
  • For information on how to access and edit visual themes click Here