Style the item details in the Maps and Apps title bar

Summary

ArcGIS for Local Government provides maps and apps that help implement GIS in a local government context, and a destination where users, partners, and the teams within Esri can collaborate.

The instructions provided describe how to change the style of item details in the Maps and Apps title bar.

Procedure

Code:
.dijitDialogTitleBar {
}

• Background
  To change the color of the bar's background to a medium blue, add the following line inside the braces:
  
  
  

  Code:
  background-color: mediumblue !important;

  
  
  
  

  Note:
  The '!important' text is necessary to override the default style.

  
  
• Gradient
  To remove the gradient in the bar's background, add the following line inside the braces:
  
  
  

  Code:
  background-image: none !important;

  
  
• Title
  The details title bar does not display a title, but a fixed title can be added to the title bar.
  
  To set the text color of a title to white, add the following line inside the braces:
  
  
  

  Code:
  color: white;

  
  
  To set the title text, do the following:
  
  
  1. Navigate to <installation folder> Application > MapsAndApps and open mapps.html in a text editor.
  2. In mapps.html, find the following lines near the bottom:
  
  

  Code:
  <!-- Gallery details dialog -->
  <div id="detailsDialog" data-dojo-type="dijit.Dialog" data-dojo-props="title:''">
      <div id="detailsDialogFrame" data-dojo-type="dijit.layout.BorderContainer"
          data-dojo-props="design:'sidebar',gutters:false">

  
  3. Modify the code to include the title. In the example below the title 'Item Details' has been added.
  
  

  Code:
  <!-- Gallery details dialog -->
  <div id="detailsDialog" data-dojo-type="dijit.Dialog" data-dojo-props="title:'Item Details'" class="hidden">
      <div id="detailsDialogFrame" data-dojo-type="dijit.layout.BorderContainer"
          data-dojo-props="design:'sidebar',gutters:false">

  
  
• Color
  Named colors and custom colors can be used to define the background and text colors.
  
  
  • See Color Names for a list of named colors.
  
  • Create a custom combination of red, green, and blue in the format '#1E90FF', where '1E90FF' is the hexadecimal red (1E), green (90), and blue (FF) intensities on a scale of 00 to FF. See the Color Picker for a simple way to generate the hexadecimal code.