Configuring the Map Menu

This section describes the classes that color the map widgets. You can type them into the Embedded CSS tab of the HTML page that contains the map, or you can access an external .css file.

If you add them to an external .css file, place them outside of the body tag.

The following table lists the map menu classes with an image of the map menu component affected by that class. The affected areas are outlined in or colored red.

Class Name	Class Description	Class Image (Outlined in or Colored Red)
.mainMenuColor	Main menu container colors
.HomeButton	Home button hover color
.layersWidget	Layers (Table of Contents) button hover color
.selectionWidget	Selection button hover color
.basemapBtn	Basemap button hover color
.LocateButton .zoomLocateButton	Locate button hover color
.lyrCheckBoxColors	Check boxes to turn layers on and off in Table of Contents
.lyrContainerColors	Color of each layer container in the Table of Contents widget
.optionsListColors	Layer options box container background color
.stContentColor	Selection tools content background color
.selectionInfoColors	Number of selected features box
.tabsHeaderColors	Background color of Basemaps and Info Maps tabs
.imTabsTitlesColors	Button color of Basemaps and Info Maps tabs
.imContentColor	Background color of the Basemaps and Info Maps content area.
.imActive	Color of the active button, either the Basemaps and Info Maps tab
.dojoxFloatingPaneTitle	Background and border colors of the title pane of all widgets
.esriPopup .titlePane	Background color of the title pane in the Esri pop-up window
.tocContentColor	Background color of the content area in the Table of Contents widget
.WidgetOn	Color of any button in the main menu when its corresponding widget is active

The following syntax shows the .css definitions for the colors of the components in the map menu. You can replace any color definition using a hexadecimal color value, an RGBA color value, or a color name. Some classes contain multiple background color properties in order to support browsers that may require color definitions in different formats (hexadecimal or RGBA). The default color definitions are the same in both formats.

/*MAIN MENU STYLES*/

/*main menu container colors*/
.mainMenuColor{
    border-color: #FFFFFF;
    border-left-color: #66b2ff;
    background: #66b2ff;
}

/*Color of the home button in the main menu when mouse hovers*/
.HomeButton .home:hover {
    background-color: #5390cf;
    background-color: rgba(83, 144, 207,1);
}

/*Color of the button in the main menu that invokes the table of contents widget when mouse hovers*/
.layersWidget:hover {
    background-color: #5390cf;
    background-color: rgba(83, 144, 207,1);
}

/*Color of the button in the main menu that invokes the selection widget when mouse hovers*/
.selectionWidget:hover {
    background-color: #5390cf;
    background-color: rgba(83, 144, 207,1);
}

/*Color of the button in the main menu that invokes the basemaps widget when mouse hovers*/
.basemapBtn:hover {
    background-color: #5390cf;
    background-color: rgba(83, 144, 207,1);
}

/*Color of the locate button in the main menu when mouse hovers*/
.LocateButton .zoomLocateButton:hover {
    background-color: #5390cf;
    background-color: rgba(83, 144, 207,1);
}

/*Color any button in the main menu when its corresponding widget is active*/
.WidgetOn {
    background-color: #023858;
    background-color: rgba(2, 56, 88,1);
}

/*Color any button in the main menu when its corresponding widget is active and mouse hovers*/
.WidgetOn:hover {
    background-color: #023858;
    background-color: rgba(2, 56, 88,1);
}

/*background color of the content area in the Table-Of-Contents widget*/
.tocContentColor{
    background-color: #c9dbdf;
}

/*style of each layer container in the Table-Of-Contents widget*/
.lyrContainerColors{
    background-color: white;
    border-color: #00b2f3;
    color: #66b2ff; /*text color. All child nodes will inherit this color*/
}

/*check boxes to turn On and Off layers in Table-Of-Contents widget*/
.lyrCheckBoxColors{
    border-color: #66b2ff;
    color: #66b2ff;
}

/* layer options box container background color*/
.optionsListColors{
    background-color: rgba(243, 10, 21, 0.19);
}

/*selection tools content background color*/
.stContentColor{
    background-color: #c9dbdf;
}

/*number of selected features box*/
.selectionInfoColors{
    color: #cd5c5c;
    border-color: #cd5c5c;
}

/*BASE MAPS WIDGET*/

/*basemaps and info-maps tabs background color */
.tabsHeaderColors{
    background-color: #66b2ff;
}

/*base-maps and info-maps tabs buttons colors*/
.imTabsTitlesColors{
    color: #ffffff;
    background-color: transparent;
}

/*base-maps and info-maps tabs buttons active colors*/
.imActive{
    background-color: #5390cf;
    border: 1px solid white;
}

/*base-maps and info-maps tabs buttons hover colors*/
.imTabsTitles:hover{
    background-color: #5390cf;
    background-color: rgba(83, 144, 207,1);
}

/*base-maps and info-maps content area background color*/
.imContentColor{
    background-color:  #00ff00;
}

/*Title pane of all widgets*/
.dojoxFloatingPaneTitle {
    background-color: #023858;
    border-color: #ffffff;
}

/*title pane in the esri pop-up window*/
.esriPopup .titlePane{
    background-color: #66b2ff; !important;
}