Popup Themes

1295
2
Jump to solution
01-10-2017 09:27 AM
SarojThapa1
Occasional Contributor III

What are the different types of built-in Popup themes other than dark and light? 

var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));

domClass.add(popup.domNode, "dark");

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

The Popup page in the API reference has a link to the css for that widget. If you search the css for the widget you can see that there are the light and dark themes and also a blueTheme. 

https://developers.arcgis.com/javascript/3/jsapi/css/esri/dijit/css/Popup.css 

Reviewing the css can also be helpful if you'd like to create your own theme. Just copy/paste the light or dark theme css to your app stylesheet and modify the colors to suit your needs.  For example if I wanted to create a new theme called 'redTheme' that has a red title bar with white text I could add this to my app stylesheet. 

.esriPopup.light .titlePane,
.dj_ie7 .esriPopup.light .titlePane .title,
.esriPopup.light .contentPane,
.esriPopup.light .actionsPane {
    background-color: #ff0000;
    color: #fff;
}

View solution in original post

2 Replies
KellyHutchins
Esri Frequent Contributor

The Popup page in the API reference has a link to the css for that widget. If you search the css for the widget you can see that there are the light and dark themes and also a blueTheme. 

https://developers.arcgis.com/javascript/3/jsapi/css/esri/dijit/css/Popup.css 

Reviewing the css can also be helpful if you'd like to create your own theme. Just copy/paste the light or dark theme css to your app stylesheet and modify the colors to suit your needs.  For example if I wanted to create a new theme called 'redTheme' that has a red title bar with white text I could add this to my app stylesheet. 

.esriPopup.light .titlePane,
.dj_ie7 .esriPopup.light .titlePane .title,
.esriPopup.light .contentPane,
.esriPopup.light .actionsPane {
    background-color: #ff0000;
    color: #fff;
}
RobertScheitlin__GISP
MVP Emeritus

Saroj,

   The esri.css file only has light, dark and blueTheme. The blueTheme is a very limited theme.