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.

default style

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.

altered title style

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.

• Gunner: You can pass the html table and style the rows and columns according to ur choice.
• Craig: Have you looked through the CSS file to see what is set to transparent? serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/dijit/css/…
• tomfumb: @Craig Chrome's developer tools show me every CSS style that applies to the elements. Transparency didn't seem to be mentioned, and I couldn't see any references to images that might be transparent

Answer 1

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

Answer 2

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!