Skip To Content

Define a custom map theme

When designing and configuring a report, report authors can define the look of the map layout by applying one of six predefined themes or by modifying one of these themes for the current report. In a theme, the following map layout elements are defined:

  • Menu
  • Menu text
  • Menu highlight
  • Menu icon color
  • Highlight
  • Default font

For more information, see Configure map settings and tools.

In addition, system administrators can create custom themes for their organization. Custom themes are defined in themes.json.txt. Once defined, a custom theme becomes available to report authors to apply to reports they are configuring.

  1. Browse to <em4c_ location>\webcontent\esrimap\em4c-bisprovider\config\design\.
  2. Make a copy of themes.json.txt.default and rename it to themes.json.txt.
  3. Open themes.json.txt in a text editor such as Notepad.

    A custom Light Blue theme has already been added to the file.

  4. Modify the file to include additional themes as needed. The following sample code includes three custom themes to use as a guide:
    {	
    	"themes":	[
    	{
    	"name": "theme1",
    	"css": {
    		"headerColor": "#828282",
    		"headerHoverColor": "#01709d",
    		"accentColor": "#3093ca",
    		"accentTextColor": "#ffffff",
    		"fontFamily": "'Segoe UI', Avenir, 'Helvetica Neue', Arial, sans-serif",
    		"menuIconColor": "gray" //options are white, gray, black
    		}
    	},
    	{
    	"name": "theme 2",
    	"css": {
    		"headerColor": "#b3f189",
    		"headerHoverColor": "#076b2c",
    		"accentColor": "#b3f189",
    		"accentTextColor": "#101b14",
    		"fontFamily": "Tahoma, Geneva",
    		"menuIconColor": "black"
    		}
    	},
    	{
    	"name": "theme 3",
    	"css": {
    		"headerColor": "#828282"
    		}
    	}
    			]  
    }
    Note:

    If only some of the available settings are provided for a theme (as in theme 3 in the sample), the equivalent settings for the Blue (default) theme will be applied for the missing settings.

  5. Verify that the JSON file is still valid.
  6. Save the file.
  7. Clear your browser cache.
  8. Verify that your custom themes appear in Report Authoring mode as follows:
    1. From the Advanced menu, choose Configure.
    2. Click the Layout tab.
    3. Expand the Theme drop-down menu.

      The custom themes you created should be listed. If two or more themes have the same name, a number is appended to the name of each duplicate theme. If the JSON file has errors, the custom themes are not displayed in the list.

    4. Choose a custom theme you defined and click Customize to ensure the settings were defined correctly. Repeat this step for any other custom themes you defined.
    5. Click Cancel when finished.