Changing infoWindow style in ArcGIS JavaScript API (v3.2)

Question

See below a screenshot of the infoWindow's appearance in my ArcGIS JavaScript API (v3.2) application.

As you can see the transparent title bar with the white buttons doesn't work too well against a background map with white areas.

I've used Chrome's developer tools to test changing the CSS of every element associated with the infoWindow but still haven't managed to stop it having a transparent background. The closest I've come gave it a coloured background - by adding a background-color to the title class - but this extended way outside the infoWindow and out of the map.

How do I style this differently? Do I need to choose a new (non-claro) theme for the whole page? What are the other theme options?

Any input much appreciated.

Answer 1

There's a blog post on this topic on the ArcGIS blog with specific directions on how to customize the look of a popup: Making Your Pop-up Pop!

Answer 2

In the end my specific requirement - to remove transparency from the info window - was solved outside the ArcGIS JavaScript API.

The application's global CSS file defines a style for the class .title which includes float: left;

Because the info window uses the same class name I was getting some weird effects that were not related to API styling. The reason I couldn't find any mention of transparency in the CSS was because it wasn't a transparency setting making the area transparent, but instead an unwanted position offset that stopped it from being coloured.

I didn't want to change the global styling (or all titles in the site), and I wanted to avoid digging into the info window to change its title's class name, so I introduced the following JavaScript immediately after creating the map

var infoWindowTitle = query('.title', this.map.infoWindow.domNode)[0];
infoWindowTitle.style.float = 'none';
infoWindowTitle.style.styleFloat = 'none';  // IE