{"id":186792,"date":"2018-11-29T15:20:01","date_gmt":"2018-11-29T23:20:01","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&p=186792"},"modified":"2019-07-12T18:00:26","modified_gmt":"2019-07-13T01:00:26","slug":"learn-to-customize-the-map-tour-app-header-and-color-scheme","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-map-tour-app-header-and-color-scheme","title":{"rendered":"Learn to Customize the Map Tour App Header and Color Scheme"},"content":{"rendered":"","protected":false},"author":651,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[10682],"tags":[163382,284862,276962],"arcwatch_issues":[224192],"class_list":["post-186792","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-esri-story-maps-apps","tag-arcgis-online","tag-esri-story-maps","tag-map-tour","arcwatch_issues-june-2014","arcwatch_sections-the-tip"],"acf":{"short_description":"Want to change the banner and text colors and header logo and links in your Map Tour Story Map? Here's how.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Map Tour is a very popular Story Map template available in\u00a0ArcGIS Online<\/a>. You will find many interesting examples in the\u00a0Story Map gallery<\/a>. Map Tour is a hosted application that appears in the web map template gallery and can also be\u00a0launched directly<\/a>\u00a0from the Story Map website.\r\n\r\nMap Tour is configured using the builder, an online configuration tool that enables you to assemble a tour and customize its look and feel and color scheme.\r\n\r\nThe default Story Map template, with a dark gray banner, \"A Story Map\" linked text, and Esri logo, is shown below:\r\n\r\n\r\n\r\nYou can, however, change the banner and text colors and the header logo and links. Here's how:\r\n

Step One: Change the Banner Color<\/h3>\r\nIn the builder mode of your Map Tour application, change the banner color by clicking Settings.\r\n\r\n\r\n\r\nThen choose the Colors tab to select from one of the preset color combinations or click the last row to create your own color scheme.\r\n\r\n\r\n

Step Two: Change the Text Color<\/h3>\r\nWith the color changes shown above applied to the header, the text is difficult to read:\r\n\r\n\r\n\r\nCurrently, there isn't a separate color setting for the title and subtitle text, but inline styles can be used to change them. Click the title and subtitle to edit the text, then add the style changes inline using the text editor. Inline styles can be used to change other attributes\u2014font size, weight, and more.\r\n\r\n\r\n\r\nThe result, after applying the style change to both the title and subtitle, is shown below:\r\n\r\n\r\n

Step Three: Change the Header Logo and Links<\/h3>\r\nIn Application settings, click the Header tab to change the logo, links, and shortcut and social options, and then click Apply.\r\n\r\n\r\n\r\nThe changes applied above alter the right side of the application header, as shown below:\r\n\r\n\r\n\r\nRemember to save all your changes before you leave builder mode.\r\n

Advanced Customization<\/h3>\r\nYou can download, modify, and host the Map Tour app template from your own server. With a downloaded and self-hosted template, you can make similar style changes (and more) using the techniques outlined in this\u00a0previous post<\/a>. The example below adds color tweaks, plus a custom header image using style overrides in the source HTML.\r\n\r\n\r\n\r\nFor more information, visit the following sites:\r\n