topic Re: How do I modify the pop up title bar color? in ArcGIS Online Questions

How do I modify the pop up title bar color?

TracyArchibald — Fri, 03 Jul 2015 21:46:00 GMT

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!

Re: How do I modify the pop up title bar color?

JeffWard — Fri, 03 Jul 2015 21:51:32 GMT

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.

Re: How do I modify the pop up title bar color?

TracyArchibald — Fri, 03 Jul 2015 21:56:20 GMT

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?

Re: How do I modify the pop up title bar color?

TobiasFimpel1 — Sat, 04 Jul 2015 05:07:27 GMT

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.

Re: How do I modify the pop up title bar color?

TracyArchibald — Mon, 06 Jul 2015 16:58:17 GMT

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

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

Re: How do I modify the pop up title bar color?

TracyArchibald — Thu, 09 Jul 2015 18:03:24 GMT

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.