How do I modify the pop up title bar color?

6236
5
07-03-2015 02:46 PM
TracyArchibald
Occasional Contributor

I've seen samples where the color has been changed to grey for popups in ArcGIS online.  I can't figure out where to do it.

I've created a map and turned it into an app.  The blue title bar clashes with the app design.  But I can't see anywhere to change it.

halp!

Thanks!

5 Replies
JeffWard
Occasional Contributor III

Are you using the Web AppBuilder or are you publishing from one of the templates on ArcGIS Online?

If you are publishing from a template, the Basic Viewer App Template allows you to enter any color for the popup/header color.

Jeff Ward
Summit County, Utah
TracyArchibald
Occasional Contributor

I've taken a webapp builder developer's edition map, downloaded the template and made some (minor) modifications so we could secure it in a weird way.  So, not quite standard, but not custom either... 

I'm guessing it should be in the index or config.json files?

0 Kudos
TobiasFimpel1
Occasional Contributor III

Tracy, you could achieve this by overwriting the css property of the pop up title bar color. One way to do that is to figure out which id or class defines the current color, and then overwrite that property.

For example, if you add:

.esriPopupMobile .titlePane{background: none repeat scroll 0 0 red !important;}

at the end of the file jimu.js/css/dojo-override.css then the mobile popup title pane element will be red. I would use something like Google Chrome Developer tools to figure out which css classes you need to change. Hope this points you in the right direction.

TracyArchibald
Occasional Contributor

ugh...  Hide and seek... Not exactly my idea of fun. 

If that's what it's gotta be, so be it. 

0 Kudos
TracyArchibald
Occasional Contributor

so, for the next poor sap that needs to do this...

find the style.css file.  It should be at : widgets/Geocoder/css/style.css

Modify this:

.esriPopup .titlePane {

  background-color: insert color here;

  border-color: #777777;

}

Clear browser cache and you should be good.