ここでは、マップウィジェットに色を適用するクラスについて説明します。これらのクラスは、マップが配置されている HTML ページの [埋め込み CSS] タブに入力することも、外部 .css ファイルに追加することもできます。

クラスを外部 .css ファイルに追加する場合、そのクラスを body タグの外側に入力します。

下表は、マップメニューのクラス、およびそのクラスの影響を受けるマップメニューコンポーネントのリストを示しています。影響を受ける領域は、赤色の枠線内または着色部分です。

.zoomLocateButton

次の構文は、マップメニューの各コンポーネントの色を表す .css 定義を示しています。色の 16 進数値、RGBA 値、または色名を使用して、任意の色定義を置き換えることができます。一部のクラスには、複数の背景色プロパティがあります。これは、各ブラウザで色定義のフォーマットが異なる場合でも (16 進数値または RGBA 値)、これらのブラウザ固有のフォーマットをサポートするためです。デフォルト色定義は、両方のフォーマットで同一です。

/*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;
}