{"id":182512,"date":"2018-11-29T14:32:20","date_gmt":"2018-11-29T22:32:20","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&#038;p=182512"},"modified":"2019-07-12T17:59:42","modified_gmt":"2019-07-13T00:59:42","slug":"learn-to-customize-the-shortlist-story-map-banner","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner","title":{"rendered":"Learn to Customize the Shortlist Story Map Banner"},"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":[284842,277752],"arcwatch_issues":[224182],"class_list":["post-182512","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-esri-story-maps-apps","tag-short-list","tag-story-map","arcwatch_issues-may-2014","arcwatch_sections-the-tip"],"acf":{"short_description":"There's a way to customize the color and style of your banner for Short List, a popular Esri Story Map template application.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"There's a way to customize the color and style of your banner for Shortlist, a popular Esri story map template application.\r\n\r\nShortlist is the ideal template to use when you want to present a curated list of points of interest in a particular geographic area. A good example is the\u00a0<a href=\"http:\/\/storymaps.esri.com\/stories\/shortlist-palmsprings\/\">Palm Springs Shortlist<\/a>, which features sections on fun, food, hotels, and design in Palm Springs, California.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip1.jpg\" \/>\r\n\r\nYou can view other Shortlist apps created by Esri and the user community in the\u00a0<a href=\"http:\/\/storymaps.arcgis.com\/en\/gallery\/#s=0&amp;n=30&amp;d=1&amp;md=storymaps-apps:0000010000\">Story Maps Gallery<\/a>.\r\n\r\nTo make a\u00a0<a href=\"http:\/\/storymaps.arcgis.com\/en\/app-list\/shortlist\/\">Shortlist app<\/a>, first download the template; author a web map with locations of interest; add your web map ID to the template; and, finally, host the app from a server. This straightforward process is\u00a0<a href=\"http:\/\/storymaps.arcgis.com\/en\/app-list\/shortlist\/tutorial\/\">documented in this online tutorial<\/a>.\r\n\r\nThe default Shortlist header is gray, but you can easily add visual spice by changing the color scheme or adding your own custom banner to match your organization's look and feel. Here are a few examples:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip2.jpg\" \/>\r\n<h3>Before You Begin<\/h3>\r\nFirst, deploy your Shortlist application. Follow the instructions in the\u00a0<a href=\"http:\/\/storymaps.arcgis.com\/en\/app-list\/shortlist\/tutorial\/\">Shortlist tutorial<\/a>\u00a0before you start to customize the banner. Then consider what you can do:\r\n<ul>\r\n \t<li>Change the color scheme of the banner.<\/li>\r\n \t<li>Add a banner graphic.<\/li>\r\n \t<li>Change the color scheme of core template elements.<\/li>\r\n<\/ul>\r\nThe changes can be made in different ways by overriding the application's default style settings. You can make the style changes by editing the application source, changing styles in the &lt;head&gt; or &lt;body&gt; elements of the index.html file, or using a separate Cascading Style Sheet (CSS) that can be referenced in the index.html file.\r\n\r\nIn this example, you will create a new style sheet to make the desired changes. This approach has a couple of advantages: the application source code is not altered, making it easy to return to the default, and all the customizations are in a single location. To set up the custom.css file, follow the steps below:\r\n<h3>Step 1: Add a link to the custom.css style sheet.<\/h3>\r\nIn the index.html file, add a link to the custom.css style sheet that will contain the style changes. Open the index.html file in any text editor, then locate the links to existing style sheets near the top of the file. Copy and paste one of the existing links, then change the file reference to \"css\/custom.css\", as shown below, and make sure the new link is listed at the end of the links:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip3.jpg\" \/>\r\n\r\nOr copy and paste the line below into the index.html file after the link to style.css, as shown above:\r\n\r\n<code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/custom.css\" \/&gt;<\/code>\r\n<h3>Step 2: Create the custom.css file.<\/h3>\r\nIn the CSS folder of the Shortlist source, create a new, empty file named custom.css. Changes described later will be made to this file only. If things go awry, just delete your custom.css file and start again. If you want to reset to the original template as downloaded, simply remove the reference to custom.css from the index.html file.\r\n<h3>Step 3: Determine the style element you want to change.<\/h3>\r\nUsing the inspection tools available in your browser, you can peer at the\u00a0<a href=\"http:\/\/www.w3.org\/TR\/DOM-Level-3-Core\/introduction.html\">Document Object Model (DOM)<\/a>\u00a0to discover the elements you will need to change. See the specific developer documentation for\u00a0<a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/\">Chrome<\/a>,\u00a0<a href=\"https:\/\/getfirebug.com\/\">Firefox<\/a>, or other browsers to learn more.\r\n\r\nOnce you've discovered the elements, add them to the custom.css file and make the desired changes. These changes will override the application defaults.\r\n<h3>Changing the Banner Color<\/h3>\r\nThe default color scheme for Shortlist is white text on different gray backgrounds, as shown below:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip4.jpg\" \/>\r\n\r\nFirst, you might want to alter the color of the dark gray banner at the top of your application. Using the browser (in this case, Chrome) developer tools, you will see that the banner background color is set in the #header element:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip5.jpg\" \/>\r\n\r\nTo change the banner color, edit custom.css and use the element id and attributes of the element to set a new background color. In your file, add the id #header and set the background-color attribute to the desired color (in this case, the hexadecimal color value). The id and attribute were both obtained from the inspector shown above.\r\n\r\n<code>#header {\r\nbackground-color: #a8a875;\r\n}\r\n<\/code>\r\n\r\nThe above CSS will change the header background to green, as shown below.\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip6.jpg\" \/>\r\n\r\nTo change the font color, add the color attribute with the desired color:\r\n\r\n<code>#header {\r\nbackground: #a8a875;\r\ncolor:#333;\r\n}\r\n<\/code>\r\n\r\nYour Shortlist application banner now has dark gray text on a green background:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip7.jpg\" \/>\r\n\r\nNext, add a background graphic to the header. From the inspector, you will learn that the header is 115 pixels high. Make your background image 115 pixels high and about 1,000 pixels wide, and save it in the images folder. To make the image more pleasing, a fade-to-transparent gradient (which lets the background color show through) was applied to the right side of the graphic.\r\n\r\nYou also will want the image to display once without repeating and be anchored on the left side. The changes made to the custom.css file to display the background image as described are shown here:\r\n\r\n<code>#header {\r\nbackground-color: #a8a875;\r\nbackground-image: url(\"..\/images\/austin-ban.png\");\r\nbackground-repeat: no-repeat;\r\nbackground-position: left;\r\ncolor:#333;\r\n}\r\n<\/code>\r\n\r\nHere's how your banner will look after these changes:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip8.jpg\" \/>\r\n<h3>Doing More<\/h3>\r\nBy following the approach used in the previous steps in which you identify elements you want to change and then make those changes to your custom.css file using the id or class, you can continue to tweak your application's look and feel. The result? Your Shortlist story map will stand out. The Shortlist app in this example has additional customizations for the tab colors, thumbnail background, and header divider:\r\n\r\n<img src=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/0514-tip9.jpg\" \/>\r\n\r\nThe custom.css file that was used is shown below:\r\n\r\n<code>#header {\r\nbackground-color: #a8a875;\r\nbackground-image: url(\"..\/images\/austin-ban.png\");\r\nbackground-repeat: no-repeat;\r\nbackground-position: left;\r\ncolor:#333;\r\n}\r\n.tab {\r\nbackground-color:#a8a875;\r\n}\r\n.tab.tab-selected {\r\nbackground-color:#e2deb6;\r\ncolor: #000;\r\n}\r\n#divStrip {\r\nbackground-color: #dcc999;\r\n}\r\n#paneLeft {\r\nbackground-color: #e2deb6;\r\n}\r\n.tab-selected {\r\nbackground-color:#b9b9b9;\r\ncolor:#FFFFFF;\r\ncursor:default;\r\n}\r\n<\/code>\r\n\r\nYou can apply this same technique to any application template.\r\n<h3>For More Information<\/h3>\r\nView the README file found in the downloaded source to learn more about how to customize the Shortlist template."}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn to Customize the Shortlist Story Map Banner<\/title>\n<meta name=\"description\" content=\"There&#039;s a way to customize the color and style of your banner for Short List, a popular Esri Story Map template application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn to Customize the Shortlist Story Map Banner\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-13T00:59:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/ausum18_inspiring_card.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner\",\n\t            \"name\": \"Learn to Customize the Shortlist Story Map Banner\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2018-11-29T22:32:20+00:00\",\n\t            \"dateModified\": \"2019-07-13T00:59:42+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"ArcWatch Articles\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Learn to Customize the Shortlist Story Map Banner\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541\",\n\t            \"name\": \"Rick Schneblin\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"caption\": \"Rick Schneblin\"\n\t            },\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learn to Customize the Shortlist Story Map Banner","description":"There's a way to customize the color and style of your banner for Short List, a popular Esri Story Map template application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner","og_locale":"en_US","og_type":"article","og_title":"Learn to Customize the Shortlist Story Map Banner","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2019-07-13T00:59:42+00:00","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/ausum18_inspiring_card.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner","url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner","name":"Learn to Customize the Shortlist Story Map Banner","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2018-11-29T22:32:20+00:00","dateModified":"2019-07-13T00:59:42+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-customize-the-shortlist-story-map-banner#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"ArcWatch Articles","item":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch"},{"@type":"ListItem","position":3,"name":"Learn to Customize the Shortlist Story Map Banner"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541","name":"Rick Schneblin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","caption":"Rick Schneblin"},"url":""}]}},"sort_order":"2","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/182512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcwatch"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/651"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/182512\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=182512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=182512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=182512"},{"taxonomy":"arcwatch_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch_issues?post=182512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}