How To: 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

Once the ArcGIS for Local Government Maps and Apps template has been downloaded and extracted to the local machine, an Application folder is created under the install location.

To apply a different style to the item details title bar, change the CSS class dijitDialogTitleBar.

1. Navigate to <installation folder> Application > MapsAndApps > Configuration and open styles.css.

2. Add the following lines to the end of styles.css:

Code:
.dijitDialogTitleBar {
}

3. Reference the following list for style options for the title bar.

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.